Add missing button labels (fix for screen readers) (#1016)

src/renderer/views/components/add-to-playlist.ejs

@@ -3,7 +3,7 @@
             <div class="modal-window">
                 <div class="modal-header">
                     <div class="modal-title">{{app.getLz('action.addToPlaylist')}}</div>
-                    <button class="close-btn" @click="app.resetState()"></button>
+                    <button class="close-btn" @click="app.resetState()" :aria-label="app.getLz('action.close')"></button>
                 </div>
                 <div class="modal-content">
                     <button class="playlist-item"
@@ -25,7 +25,7 @@
                                v-model="searchQuery"
                                @input="search()"
                                class="search-input">
-                    </div>                
+                    </div>
                 </div>
             </div>
         </div>

src/renderer/views/components/airplay-modal.ejs

@@ -3,7 +3,7 @@
     <div class="modal-window airplay-modal">
         <div class="modal-header">
             <div class="modal-title">{{'Enter password'}}</div>
-            <button class="close-btn" @click="close()"></button>
+            <button class="close-btn" @click="close()" :aria-label="app.getLz('action.close')"></button>
         </div>
     <div class="modal-content" style="overflow-y: overlay; padding: 3%">
         <input type="text" v-model="passcode"/>

src/renderer/views/components/audio-controls.ejs

@@ -4,7 +4,7 @@
         <div class="modal-window">
             <div class="modal-header">
                 <div class="modal-title">{{app.getLz('term.audioControls')}}</div>
-                <button class="close-btn" @click="app.resetState()"></button>
+                <button class="close-btn" @click="app.resetState()" :aria-label="app.getLz('action.close')"></button>
             </div>
             <div class="modal-content">
                 <div class="md-option-line">

src/renderer/views/components/audio-playbackrate.ejs

@@ -4,7 +4,7 @@
         <div class="modal-window">
             <div class="modal-header">
                 <div class="modal-title">{{app.getLz('settings.option.audio.changePlaybackRate')}}</div>
-                <button class="close-btn" @click="app.resetState()"></button>
+                <button class="close-btn" @click="app.resetState()" :aria-label="app.getLz('action.close')"></button>
             </div>
             <div class="modal-content">
                 <div class="md-option-line">

src/renderer/views/components/audio-settings.ejs

@@ -4,7 +4,7 @@
             <div class="modal-window">
                 <div class="modal-header">
                     <div class="modal-title">{{app.getLz('term.audioSettings')}}</div>
-                    <button class="close-btn" @click="app.resetState()"></button>
+                    <button class="close-btn" @click="app.resetState()" :aria-label="app.getLz('action.close')"></button>
                 </div>
                 <div class="modal-content">
                     <button class="playlist-item"

src/renderer/views/components/castmenu.ejs

@@ -3,7 +3,7 @@
     <div class="modal-window">
         <div class="modal-header">
             <div class="modal-title">{{$root.getLz('action.cast.todevices')}}</div>
-            <button class="close-btn" @click="close()"></button>
+            <button class="close-btn" @click="close()" :aria-label="app.getLz('action.close')"></button>
         </div>
     <div class="modal-content" style="overflow-y: overlay; padding: 3%">
         <div class="md-labeltext">{{$root.getLz('action.cast.chromecast')}}</div>
@@ -111,11 +111,11 @@
             },
             setCast(device) {
                 CiderAudio.sendAudio();
-                this.activeCasts.push(device); 
+                this.activeCasts.push(device);
                 ipcRenderer.send('performGCCast', device, "Cider", "Playing ...", "Test build", '');
             },
             setAirPlayCast(device) {
-                this.activeCasts.push(device); 
+                this.activeCasts.push(device);
                 ipcRenderer.send("performAirplayPCM",device.host,device.port,null,"","","","",device.txt)
             },
             stopCasting() {

src/renderer/views/components/cider-modal.ejs

@@ -4,10 +4,10 @@
             <div class="modal-window">
                 <div class="modal-header">
                     <div class="modal-title">{{app.getLz('action.addToLibrary')}}</div>
-                    <button class="close-btn" @click="app.resetState()"></button>
+                    <button class="close-btn" @click="app.resetState()" :aria-label="app.getLz('action.close')"></button>
                 </div>
                 <div class="modal-content">
-                    <button class="playlist-item" 
+                    <button class="playlist-item"
                     :class="{ focused: playlist.id == focused }"
                     @click="addToPlaylist(playlist.id)" style="width:100%;" v-for="playlist in playlistSorted" v-if="playlist.attributes.canEdit && playlist.type != 'library-playlist-folders'">
                     <div class="icon"><%- include("../svg/playlist.svg") %></div>
@@ -25,7 +25,7 @@
                                v-model="searchQuery"
                                @input="search()"
                                class="search-input">
-                    </div>                
+                    </div>
                 </div>
             </div>
         </div>

src/renderer/views/components/equalizer.ejs

@@ -3,7 +3,7 @@
         <div class="modal-window" >
             <div class="modal-header">
                 <div class="modal-title">{{$root.getLz('term.equalizer')}}</div>
-                <button class="close-btn" @click="close()"></button>
+                <button class="close-btn" @click="close()" :aria-label="$root.getLz('action.close')"></button>
                 <div class="md-option-segment md-option-segment_auto">
                     <select class="md-select" style="width:220px;text-align:center;margin-right:245px" v-model="$root.cfg.audio.equalizer.preset" v-on:change="changePreset($root.cfg.audio.equalizer.preset)">
                         <optgroup :label="$root.getLz('term.userPresets')">
@@ -50,7 +50,7 @@
                         <input tabindex="0" type="number" class="eq-freq" orient="vertical" min="-12" max="12" step="0.1" v-model="$root.cfg.audio.equalizer.gain[2]" @change="changeGain(2)">
                         <input tabindex="0" type="range" class="eq-slider" orient="vertical" min="-12" max="12" step="0.1" v-model="$root.cfg.audio.equalizer.gain[2]" @change="changeGain(2)">
                         <input type="number" class="eq-freq" orient="vertical" min="88" max="177" step="8" v-model="$root.cfg.audio.equalizer.frequencies[2]" @change="changeFreq(2)">
-                        <input type="number" class="eq-q" orient="vertical" min="0" max="5" step="0.1" v-model="$root.cfg.audio.equalizer.Q[2]" @change="changeQ(2)">    
+                        <input type="number" class="eq-q" orient="vertical" min="0" max="5" step="0.1" v-model="$root.cfg.audio.equalizer.Q[2]" @change="changeQ(2)">
                     </div>
                     <div class="input-container">
                         <input tabindex="0" type="number" class="eq-freq" orient="vertical" min="-12" max="12" step="0.1" v-model="$root.cfg.audio.equalizer.gain[3]" @change="changeGain(3)">
@@ -95,8 +95,8 @@
                         <input type="number" class="eq-q" orient="vertical" min="0" max="5" step="0.1" v-model="$root.cfg.audio.equalizer.Q[9]" @change="changeQ(9)">
                     </div>
                 </div>
-                
-            </div>    
+
+            </div>
             <div class="modal-lowercontent">
                 <div class="row">
                     <div class="col">

src/renderer/views/components/fullscreen.ejs

@@ -51,39 +51,49 @@
                                        :max="app.mk.currentPlaybackDuration" :value="app.getSongProgress()">
                             </div>
                         </div>
-                    <div class="control-buttons">    
+                    <div class="control-buttons">
                         <div class="app-chrome-item">
                             <button class="playback-button--small shuffle" v-if="app.mk.shuffleMode == 0"
-                                    @click="app.mk.shuffleMode = 1"></button>
+                                    @click="app.mk.shuffleMode = 1" :title="$root.getLz('term.enableShuffle')"
+                                    v-b-tooltip.hover></button>
                             <button class="playback-button--small shuffle active" v-else
-                                    @click="app.mk.shuffleMode = 0"></button>
+                                    @click="app.mk.shuffleMode = 0" :title="$root.getLz('term.disableShuffle')"
+                                    v-b-tooltip.hover></button>
                         </div>
                         <div class="app-chrome-item">
-                            <button class="playback-button previous" @click="app.prevButton()"></button>
+                            <button class="playback-button previous" @click="app.prevButton()"
+                                    :title="$root.getLz('term.previous')" v-b-tooltip.hover></button>
                         </div>
                         <div class="app-chrome-item">
-                            <button class="playback-button pause" @click="app.mk.pause()" v-if="app.mk.isPlaying"></button>
-                            <button class="playback-button play" @click="app.mk.play()" v-else></button>
+                            <button class="playback-button pause" @click="app.mk.pause()" v-if="app.mk.isPlaying"
+                                    :title="$root.getLz('term.pause')" v-b-tooltip.hover></button>
+                            <button class="playback-button play" @click="app.mk.play()" v-else
+                                    :title="$root.getLz('term.play')" v-b-tooltip.hover></button>
                         </div>
                         <div class="app-chrome-item">
-                            <button class="playback-button next" @click="app.skipToNextItem()"></button>
+                            <button class="playback-button next" @click="app.skipToNextItem()"
+                                    :title="$root.getLz('term.next')" v-b-tooltip.hover></button>
                         </div>
                         <div class="app-chrome-item">
                             <button class="playback-button--small repeat" v-if="app.mk.repeatMode == 0"
-                                    @click="app.mk.repeatMode = 1"></button>
+                                    @click="app.mk.repeatMode = 1" :title="$root.getLz('term.enableRepeatOne')"
+                                    v-b-tooltip.hover></button>
                             <button class="playback-button--small repeat repeatOne" @click="app.mk.repeatMode = 2"
-                                    v-else-if="app.mk.repeatMode == 1"></button>
+                                    v-else-if="app.mk.repeatMode == 1" :title="$root.getLz('term.disableRepeatOne')"
+                                    v-b-tooltip.hover></button>
                             <button class="playback-button--small repeat active" @click="app.mk.repeatMode = 0"
-                                    v-else-if="app.mk.repeatMode == 2"></button>
+                                    v-else-if="app.mk.repeatMode == 2" :title="$root.getLz('term.disableRepeat')"
+                                    v-b-tooltip.hover></button>
                         </div>
                     </div>
                     <div class="app-chrome-item volume display--large">
                         <div class="input-container">
-                        <button class="volume-button--small volume" @click="app.muteButtonPressed()" :class="{'active': app.cfg.audio.volume == 0}"></button>
+                        <button class="volume-button--small volume" @click="app.muteButtonPressed()" :class="{'active': app.cfg.audio.volume == 0}"
+                                :title="app.cfg.audio.muted ? $root.getLz('term.unmute') : $root.getLz('term.mute')" v-b-tooltip.hover></button>
                         <input type="range" class="slider" @wheel="app.volumeWheel" :step="app.cfg.audio.volumeStep" min="0" :max="app.cfg.audio.maxVolume" v-model="app.mk.volume"
                                v-if="typeof app.mk.volume != 'undefined'" @change="app.checkMuteChange()"
                                v-b-tooltip.hover :title="$root.formatVolumeTooltip()">
-                        </div>       
+                        </div>
                     </div>
                     </div>
                 </template>
@@ -99,17 +109,17 @@
                     <lyrics-view :yoffset="120" :time="time" :lyrics="lyrics"
                     :richlyrics="richlyrics"></lyrics-view>
                 </div>
-                <div class="queue-col" v-if="tabMode == 'queue'">    
-                    <cider-queue v-if="tabMode == 'queue'" ref="queue" ></cider-queue>    
+                <div class="queue-col" v-if="tabMode == 'queue'">
+                    <cider-queue v-if="tabMode == 'queue'" ref="queue" ></cider-queue>
                 </div>
             </div>
         </div>
         <div class="tab-toggles">
             <div class="lyrics" :class="{active: tabMode == 'lyrics'}" @click="tabMode = (tabMode == 'lyrics') ? '' : 'lyrics'"></div>
             <div class="queue"  :class="{active: tabMode == 'queue'}" @click="tabMode =  (tabMode == 'queue') ? '' :'queue'"></div>
-        </div> 
+        </div>
     </div>
- 
+
 
 
 </script>

src/renderer/views/components/inline-collection-list.ejs

@@ -18,7 +18,7 @@
             </button>
         </div>
         <transition name="fabfade">
-            <button class="top-fab" v-show="showFab" @click="scrollToTop()">
+            <button class="top-fab" v-show="showFab" @click="scrollToTop()" :aria-label="app.getLz('action.scrollToTop')">
                 <%- include("../svg/arrow-up.svg") %>
             </button>
         </transition>

src/renderer/views/components/mediaitem-list-item.ejs

@@ -20,10 +20,10 @@
             <div class="popular" v-if="!showInLibrary && item?.meta?.popularity != null && item?.meta?.popularity > 0.7"></div>
             <div class="isLibrary" v-if="showLibraryStatus == true">
                 <div v-if="showInLibrary" :style="{display: (showInLibrary ? 'block' : 'none'), 'margin-left':'11px'}">
-                    <button @click="addToLibrary()" v-if="!addedToLibrary && (showIndex == false ||(showIndex == true && showIndexPlaylist != false))">
+                    <button @click="addToLibrary()" v-if="!addedToLibrary && (showIndex == false ||(showIndex == true && showIndexPlaylist != false))" :aria-label="$root.getLz('action.addToLibrary')">
                         <div class="svg-icon addIcon" :style="{'--color': 'var(--keyColor)', '--url': 'url(./assets/feather/plus.svg)'}"></div>
                     </button>
-                    <button v-else-if='!(showArtwork == true && (showIndex == false ||(showIndex == true && showIndexPlaylist != false)))' @click="playTrack()">
+                    <button v-else-if='!(showArtwork == true && (showIndex == false ||(showIndex == true && showIndexPlaylist != false)))' @click="playTrack()" :aria-label="$root.getLz('term.play')">
                         <div class="svg-icon playIcon" :style="{'--color': 'var(--keyColor)', '--url': 'url(./assets/feather/play.svg)'}"></div>
                     </button>
                 </div>
@@ -42,7 +42,9 @@
                         :size="48"
                         :bgcolor="getBgColor()"
                         :type="item.type"></mediaitem-artwork>
-                <button class="overlay-play" @click="playTrack()"><%- include("../svg/play.svg") %></button>
+                <button class="overlay-play" @click="playTrack()" :aria-label="$root.getLz('term.play')">
+                    <%- include("../svg/play.svg") %>
+                </button>
             </div>
             <div class="info-rect" :style="{'padding-left': (showArtwork ? '' : '16px')}"
                  @dblclick="route()">

src/renderer/views/components/mediaitem-square.ejs

@@ -8,7 +8,7 @@
     <div v-if="reasonShown" class="reasonSP ">{{item?.meta?.reason?.stringForDisplay ?? ''}}</div>
     <div style="{'--spcolor': getBgColor()}"
          class="cd-mediaitem-square" :class="getClasses()" @contextmenu="getContextMenu">
-        <template>           
+        <template>
             <div class="artwork-container">
                 <div class="unavailable-overlay" v-if="unavailable">
                     <div class="codicon codicon-circle-slash"></div>
@@ -24,9 +24,13 @@
                             :type="item.type"></mediaitem-artwork>
                 </div>
                 <button class="menu-btn" v-if="!nomenu.includes(item.type)"
-                        @click="getContextMenu"><%- include("../svg/more.svg") %></button>
+                        @click="getContextMenu" :aria-label="$root.getLz('term.more')">
+                    <%- include("../svg/more.svg") %>
+                </button>
                 <button class="play-btn" v-if="!noplay.includes(item.type)"
-                        @click="app.playMediaItem(item)"><%- include("../svg/play.svg") %></button>
+                        @click="app.playMediaItem(item)" :aria-label="$root.getLz('term.play')">
+                    <%- include("../svg/play.svg") %>
+                </button>
                 <div class="badge-container" v-if="itemBadges.length != 0">
                     <div class="socialBadge" v-for="badge in itemBadges.limit(1)">
                         <mediaitem-artwork
@@ -39,7 +43,7 @@
                 <div class="title" :title="item.attributes?.name ?? (item.relationships?.contents?.data[0]?.attributes?.name ?? '')" v-if="item.attributes.artistNames == null || kind!= 'card'" @click='app.routeView(item)'>
                     <div class="item-navigate text-overflow-elipsis">{{ item.attributes?.name ?? (item.relationships?.contents?.data[0]?.attributes?.name ?? '') }}</div>
                     <div class="explicit-icon" v-if="item.attributes && item.attributes.contentRating == 'explicit'" style= "background-image: url(./assets/explicit.svg);height: 12px;width: 12px;filter: contrast(0);background-repeat: no-repeat;margin-top: 2.63px;margin-left: 4px;"></div>
-                </div>       
+                </div>
                 <div :title="getSubtitle()" class="subtitle item-navigate text-overflow-elipsis" @click="getSubtitleNavigation()"
                      v-if="getSubtitle() != ''">
                     {{ getSubtitle() }}
@@ -242,9 +246,9 @@
                 let type = []
                 try{
                 type = this.item.type
-            
+
              }catch(e) {console.log('sd',this.item)}
-                 
+
                 if (this.kind != "") {
                     type = this.kind
                 }
@@ -252,7 +256,7 @@
                     default:
                         return []
                         break;
-                    case "editorial-elements":    
+                    case "editorial-elements":
                     case "card":
                         return ["mediaitem-card"]
                         break;
@@ -265,7 +269,7 @@
                     case "music-videos":
                     case "uploadedVideo":
                     case "uploaded-videos":
-                    case "library-music-videos":    
+                    case "library-music-videos":
                         return "mediaitem-video";
                         break;
                 }

src/renderer/views/components/moreinfo-modal.ejs

@@ -4,12 +4,12 @@
             <div class="modal-header">
                 <div class="modal-title">{{data.title}}</div>
                 <div class="modal-subtitle modal-title">{{data.subtitle ?? ""}}</div>
-                <button class="close-btn" @click="close()"></button>
+                <button class="close-btn" @click="close()" :aria-label="app.getLz('action.close')"></button>
             </div>
             <div class="modal-content">
                 <div class="content" v-html="data.content">
                 </div>
-            </div>    
+            </div>
         </div>
     </div>
 </script>
@@ -31,7 +31,7 @@
                     self.timedelay = true
                 }, 1000);
             })
-          
+
         },
         methods: {
             close() {

src/renderer/views/components/plugin-menu.ejs

@@ -3,7 +3,7 @@
         <div class="modal-window">
             <div class="modal-header">
                 <div class="modal-title">{{$root.getLz('term.pluginMenu')}}</div>
-                <button class="close-btn" @click="app.resetState()"></button>
+                <button class="close-btn" @click="app.resetState()" :aria-label="app.getLz('action.close')"></button>
             </div>
             <div class="modal-content">
             <span class="playlist-item" v-if="!app.pluginInstalled">

src/renderer/views/components/qrcode-modal.ejs

@@ -3,11 +3,11 @@
         <div class="modal-window" >
             <div class="modal-header">
                 <div class="modal-title">{{`Web Remote QR : ` + url }}</div>
-                <button class="close-btn" @click="close()"></button>
+                <button class="close-btn" @click="close()" :aria-label="app.getLz('action.close')"></button>
             </div>
             <div class="modal-content">
-                <img class="qrimg" :src="src"/> 
-            </div>    
+                <img class="qrimg" :src="src"/>
+            </div>
         </div>
     </div>
 </script>
@@ -18,12 +18,12 @@
         data: function () {
             return {
                 app: this.$root,
-              
+
             }
         },
         props: ["src","url"],
         mounted() {
-         
+
         },
         methods: {
             close() {

src/renderer/views/components/queue.ejs

@@ -5,7 +5,11 @@
                 <h3 class="queue-header-text">{{app.getLz('term.queue')}}</h3>
             </div>
             <div class="col-auto flex-center">
-                <button class="autoplay" :style="{'background': app.mk.autoplayEnabled ? 'var(--keyColor)' : ''}" @click="app.mk.autoplayEnabled = !app.mk.autoplayEnabled"> <img class="infinity"></button>
+                <button class="autoplay" :style="{'background': app.mk.autoplayEnabled ? 'var(--keyColor)' : ''}"
+                        @click="app.mk.autoplayEnabled = !app.mk.autoplayEnabled"
+                        :title="app.getLz('term.autoplay')" v-b-tooltip.hover>
+                    <img class="infinity">
+                </button>
             </div>
         </div>
         <div class="queue-body" v-if="page == 'history'">

src/renderer/views/components/share-sheet.ejs

@@ -4,7 +4,7 @@
             <div class="modal-window">
                 <div class="modal-header">
                     <div class="modal-title">{{app.getLz('action.addToPlaylist')}}</div>
-                    <button class="close-btn" @click="app.resetState()"></button>
+                    <button class="close-btn" @click="app.resetState()" :aria-label="app.getLz('action.close')"></button>
                 </div>
                 <div class="modal-content">
                     <button class="playlist-item"
@@ -26,7 +26,7 @@
                                v-model="searchQuery"
                                @input="search()"
                                class="search-input">
-                    </div>                
+                    </div>
                 </div>
             </div>
         </div>

src/renderer/views/components/spatial-properties.ejs

@@ -3,7 +3,7 @@
         <div class="modal-window" v-if="ready">
             <div class="modal-header">
                 <div class="modal-title">{{$root.getLz('spatial.spatialProperties')}}</div>
-                <button class="close-btn" @click="close()"></button>
+                <button class="close-btn" @click="close()" :aria-label="$root.getLz('action.close')"></button>
             </div>
             <div class="modal-content">
                 <template v-if="roomEditType == 'dimensions'">
@@ -15,7 +15,7 @@
                     </div>
                     <div class="row">
                         <div class="col">
-    
+
                             <div class="row">
                                 <div class="col-3 flex-center">
                                     {{$root.getLz('spatial.width')}}
@@ -29,7 +29,7 @@
                                            v-model="room_dimensions.width" step="1"/>
                                 </div>
                             </div>
-    
+
                             <div class="row">
                                 <div class="col-3 flex-center">
                                     {{$root.getLz('spatial.height')}}
@@ -43,7 +43,7 @@
                                            v-model="room_dimensions.height" step="1"/>
                                 </div>
                             </div>
-    
+
                             <div class="row">
                                 <div class="col-3 flex-center">
                                     {{$root.getLz('spatial.depth')}}
@@ -80,7 +80,7 @@
                     </div>
                     <div class="row">
                         <div class="col">
-    
+
                             <div class="row">
                                 <div class="col-3 flex-center">
                                     X ({{$root.getLz('spatial.listener')}})