okseby/orchard
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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

Browse source
This commit is contained in:
Pedro Galhardo 2022-05-10 05:20:13 +01:00 • committed by GitHub
parent 45bbe4c9fb
commit 44160dc104
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
32 changed files with 225 additions and 138 deletions
Download patch file Download diff file Expand all files Collapse all files

11
src/i18n/en_US.json
View file

@ -21,11 +21,13 @@
"term.accountSettings": "Account Settings",
"term.logout": "Logout",
"term.login": "Log In",
"term.quickNav": "Quick Nav",
"term.cast": "Cast",
"term.about": "About",
"term.privateSession": "Private Session",
"term.disablePrivateSession": "Disable Private Session",
"term.queue": "Queue",
"term.autoplay": "Autoplay",
"term.lyrics": "Lyrics",
"term.miniplayer": "MiniPlayer",
"term.history": "History",
@ -46,12 +48,19 @@
"term.createNewPlaylist": "Create New Playlist",
"term.createNewPlaylistFolder": "Create New Playlist Folder",
"term.deletePlaylist": "Are you sure you want to delete this playlist?",
"term.navigateBack": "Navigate back",
"term.navigateForward": "Navigate forward",
"term.play": "Play",
"term.pause": "Pause",
"term.previous": "Previous",
"term.next": "Next",
"term.shuffle": "Shuffle",
"term.enableShuffle": "Enable shuffle",
"term.disableShuffle": "Disable shuffle",
"term.repeat": "Repeat",
"term.enableRepeatOne": "Enable repeat one",
"term.disableRepeatOne": "Disable repeat one",
"term.disableRepeat": "Disable repeat",
"term.volume": "Volume",
"term.mute": "Mute",
"term.unmute": "Unmute",
@ -254,6 +263,7 @@
"action.newpreset": "New Preset...",
"action.deletepreset": "Delete Preset",
"action.open": "Open",
"action.close": "Close",
"action.relaunch.confirm": "Do you want to relaunch Cider?",
"action.cast.chromecast": "Chromecast",
"action.cast.todevices": "Cast to Devices",
@ -264,6 +274,7 @@
"action.cast.scanning": "Scanning...",
"action.createNew": "Create New...",
"action.openArtworkInBrowser": "Open artwork in browser",
"action.scrollToTop": "Scroll to top",
"menubar.options.about": "About",
"menubar.options.settings": "Settings",
"menubar.options.quit": "Quit Cider",

11
src/i18n/source/en_US.json
View file

@ -21,11 +21,13 @@
"term.accountSettings": "Account Settings",
"term.logout": "Logout",
"term.login": "Log In",
"term.quickNav": "Quick Nav",
"term.cast": "Cast",
"term.about": "About",
"term.privateSession": "Private Session",
"term.disablePrivateSession": "Disable Private Session",
"term.queue": "Queue",
"term.autoplay": "Autoplay",
"term.lyrics": "Lyrics",
"term.miniplayer": "MiniPlayer",
"term.history": "History",
@ -46,12 +48,19 @@
"term.createNewPlaylist": "Create New Playlist",
"term.createNewPlaylistFolder": "Create New Playlist Folder",
"term.deletePlaylist": "Are you sure you want to delete this playlist?",
"term.navigateBack": "Navigate back",
"term.navigateForward": "Navigate forward",
"term.play": "Play",
"term.pause": "Pause",
"term.previous": "Previous",
"term.next": "Next",
"term.shuffle": "Shuffle",
"term.enableShuffle": "Enable shuffle",
"term.disableShuffle": "Disable shuffle",
"term.repeat": "Repeat",
"term.enableRepeatOne": "Enable repeat one",
"term.disableRepeatOne": "Disable repeat one",
"term.disableRepeat": "Disable repeat",
"term.volume": "Volume",
"term.mute": "Mute",
"term.unmute": "Unmute",
@ -254,6 +263,7 @@
"action.newpreset": "New Preset...",
"action.deletepreset": "Delete Preset",
"action.open": "Open",
"action.close": "Close",
"action.relaunch.confirm": "Do you want to relaunch Cider?",
"action.cast.chromecast": "Chromecast",
"action.cast.todevices": "Cast to Devices",
@ -264,6 +274,7 @@
"action.cast.scanning": "Scanning...",
"action.createNew": "Create New...",
"action.openArtworkInBrowser": "Open artwork in browser",
"action.scrollToTop": "Scroll to top",
"menubar.options.about": "About",
"menubar.options.settings": "Settings",
"menubar.options.quit": "Quit Cider",

34
src/renderer/views/app/chrome-bottom.ejs
View file

@ -39,7 +39,8 @@
</div>
<template v-if="mk.nowPlayingItem['attributes']['playParams']">
<div class="actions">
<button class="lcdMenu" @click="nowPlayingContextMenu">
<button class="lcdMenu" @click="nowPlayingContextMenu"
:title="$root.getLz('term.more')" v-b-tooltip.hover>
<div class="svg-icon"></div>
</button>
</div>
@ -55,27 +56,36 @@
<div class="app-chrome-playback-controls">
<div class="app-chrome-item">
<button class="playback-button--small shuffle" v-if="mk.shuffleMode == 0"
@click="mk.shuffleMode = 1"></button>
@click="mk.shuffleMode = 1" :title="$root.getLz('term.enableShuffle')"
v-b-tooltip.hover></button>
<button class="playback-button--small shuffle active" v-else
@click="mk.shuffleMode = 0"></button>
@click="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="prevButton()"></button>
<button class="playback-button previous" @click="prevButton()"
:title="$root.getLz('term.previous')" v-b-tooltip.hover></button>
</div>
<div class="app-chrome-item">
<button class="playback-button pause" @click="mk.pause()" v-if="mk.isPlaying"></button>
<button class="playback-button play" @click="mk.play()" v-else></button>
<button class="playback-button pause" @click="mk.pause()" v-if="mk.isPlaying"
:title="$root.getLz('term.pause')" v-b-tooltip.hover></button>
<button class="playback-button play" @click="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="skipToNextItem()"></button>
<button class="playback-button next" @click="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="mk.repeatMode == 0"
@click="mk.repeatMode = 1"></button>
@click="mk.repeatMode = 1" :title="$root.getLz('term.enableRepeatOne')"
v-b-tooltip.hover></button>
<button class="playback-button--small repeat repeatOne" @click="mk.repeatMode = 2"
v-else-if="mk.repeatMode == 1"></button>
v-else-if="mk.repeatMode == 1" :title="$root.getLz('term.disableRepeatOne')"
v-b-tooltip.hover></button>
<button class="playback-button--small repeat active" @click="mk.repeatMode = 0"
v-else-if="mk.repeatMode == 2"></button>
v-else-if="mk.repeatMode == 2" :title="$root.getLz('term.disableRepeat')"
v-b-tooltip.hover></button>
</div>
</div>
<div class="app-chrome-playback-duration">
@ -98,7 +108,9 @@
<div class="app-chrome--right">
<div class="app-chrome-item volume">
<button class="volume-button--small volume" @click="muteButtonPressed()"
:class="{'active': this.cfg.audio.volume == 0}"></button>
:class="{'active': this.cfg.audio.volume == 0}"
:title="cfg.audio.muted ? $root.getLz('term.unmute') : $root.getLz('term.mute')"
v-b-tooltip.hover></button>
<input type="range" @wheel="volumeWheel" :step="cfg.audio.volumeStep" min="0" :max="cfg.audio.maxVolume"
v-model="mk.volume" v-if="typeof mk.volume != 'undefined'" @change="checkMuteChange()"
v-b-tooltip.hover :title="formatVolumeTooltip()">

43
src/renderer/views/app/chrome-top.ejs
View file

@ -14,17 +14,20 @@
<button class="app-mainmenu"
@blur="mainMenuVisibility(false)"
@click="mainMenuVisibility(true)"
:class="{active: chrome.menuOpened}"></button>
:class="{active: chrome.menuOpened}"
:aria-label="$root.getLz('term.quickNav')"></button>
</div>
<template v-if="getThemeDirective('appNavigation') != 'seperate'">
<div class="vdiv display--large" v-if="getThemeDirective('windowLayout') == 'twopanel'"></div>
<div class="app-chrome-item">
<button class="playback-button navigation" @click="navigateBack()">
<button class="playback-button navigation" @click="navigateBack()"
:title="$root.getLz('term.navigateBack')" v-b-tooltip.hover>
<%- include('../svg/chevron-left.svg') %>
</button>
</div>
<div class="app-chrome-item">
<button class="playback-button navigation" @click="navigateForward()">
<button class="playback-button navigation" @click="navigateForward()"
:title="$root.getLz('term.navigateForward')" v-b-tooltip.hover>
<%- include('../svg/chevron-right.svg') %>
</button>
</div>
@ -33,27 +36,36 @@
<template v-if="getThemeDirective('windowLayout') != 'twopanel'">
<div class="app-chrome-item display--large">
<button class="playback-button--small shuffle" v-if="mk.shuffleMode == 0"
@click="mk.shuffleMode = 1"></button>
@click="mk.shuffleMode = 1" :title="$root.getLz('term.enableShuffle')"
v-b-tooltip.hover></button>
<button class="playback-button--small shuffle active" v-else
@click="mk.shuffleMode = 0"></button>
@click="mk.shuffleMode = 0" :title="$root.getLz('term.disableShuffle')"
v-b-tooltip.hover></button>
</div>
<div class="app-chrome-item display--large">
<button class="playback-button previous" @click="prevButton()"></button>
<button class="playback-button previous" @click="prevButton()"
:title="$root.getLz('term.previous')" v-b-tooltip.hover></button>
</div>
<div class="app-chrome-item display--large">
<button class="playback-button pause" @click="mk.pause()" v-if="mk.isPlaying"></button>
<button class="playback-button play" @click="mk.play()" v-else></button>
<button class="playback-button pause" @click="mk.pause()" v-if="mk.isPlaying"
:title="$root.getLz('term.pause')" v-b-tooltip.hover></button>
<button class="playback-button play" @click="mk.play()" v-else
:title="$root.getLz('term.play')" v-b-tooltip.hover></button>
</div>
<div class="app-chrome-item display--large">
<button class="playback-button next" @click="skipToNextItem()"></button>
<button class="playback-button next" @click="skipToNextItem()"
:title="$root.getLz('term.next')" v-b-tooltip.hover></button>
</div>
<div class="app-chrome-item display--large">
<button class="playback-button--small repeat" v-if="mk.repeatMode == 0"
@click="mk.repeatMode = 1"></button>
@click="mk.repeatMode = 1" :title="$root.getLz('term.enableRepeatOne')"
v-b-tooltip.hover></button>
<button class="playback-button--small repeat repeatOne" @click="mk.repeatMode = 2"
v-else-if="mk.repeatMode == 1"></button>
v-else-if="mk.repeatMode == 1" :title="$root.getLz('term.disableRepeatOne')"
v-b-tooltip.hover></button>
<button class="playback-button--small repeat active" @click="mk.repeatMode = 0"
v-else-if="mk.repeatMode == 2"></button>
v-else-if="mk.repeatMode == 2" :title="$root.getLz('term.disableRepeat')"
v-b-tooltip.hover></button>
</div>
</template>
</div>
@ -113,7 +125,8 @@
</div>
<template v-if="mk.nowPlayingItem['attributes']['playParams']">
<div class="actions">
<button class="lcdMenu" @click="nowPlayingContextMenu">
<button class="lcdMenu" @click="nowPlayingContextMenu"
:title="$root.getLz('term.more')" v-b-tooltip.hover>
<div class="svg-icon"></div>
</button>
</div>
@ -131,7 +144,9 @@
<template v-if="getThemeDirective('windowLayout') != 'twopanel'">
<div class="app-chrome-item volume display--large">
<button class="volume-button--small volume" @click="muteButtonPressed()"
:class="{'active': this.cfg.audio.volume == 0}"></button>
:class="{'active': this.cfg.audio.volume == 0}"
:title="cfg.audio.muted ? $root.getLz('term.unmute') : $root.getLz('term.mute')"
v-b-tooltip.hover></button>
<input type="range" @wheel="volumeWheel" :step="cfg.audio.volumeStep" min="0" :max="cfg.audio.maxVolume"
v-model="mk.volume" v-if="typeof mk.volume != 'undefined'" @change="checkMuteChange()"
v-b-tooltip.hover :title="formatVolumeTooltip()">

32
src/renderer/views/app/sidebar.ejs
View file

@ -187,32 +187,44 @@
<div class="control-buttons">
<div class="app-chrome-item">
<button class="playback-button--small shuffle" v-if="mk.shuffleMode == 0"
@click="mk.shuffleMode = 1"></button>
<button class="playback-button--small shuffle active" v-else @click="mk.shuffleMode = 0"></button>
@click="mk.shuffleMode = 1" :title="$root.getLz('term.enableShuffle')"
v-b-tooltip.hover.righttop></button>
<button class="playback-button--small shuffle active" v-else
@click="mk.shuffleMode = 0" :title="$root.getLz('term.disableShuffle')"
v-b-tooltip.hover.righttop></button>
</div>
<div class="app-chrome-item">
<button class="playback-button previous" @click="prevButton()"></button>
<button class="playback-button previous" @click="prevButton()"
:title="$root.getLz('term.previous')" v-b-tooltip.hover></button>
</div>
<div class="app-chrome-item">
<button class="playback-button pause" @click="mk.pause()" v-if="mk.isPlaying"></button>
<button class="playback-button play" @click="mk.play()" v-else></button>
<button class="playback-button pause" @click="mk.pause()" v-if="mk.isPlaying"
:title="$root.getLz('term.pause')" v-b-tooltip.hover></button>
<button class="playback-button play" @click="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="skipToNextItem()"></button>
<button class="playback-button next" @click="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="mk.repeatMode == 0"
@click="mk.repeatMode = 1"></button>
@click="mk.repeatMode = 1" :title="$root.getLz('term.enableRepeatOne')"
v-b-tooltip.hover></button>
<button class="playback-button--small repeat repeatOne" @click="mk.repeatMode = 2"
v-else-if="mk.repeatMode == 1"></button>
v-else-if="mk.repeatMode == 1" :title="$root.getLz('term.disableRepeatOne')"
v-b-tooltip.hover></button>
<button class="playback-button--small repeat active" @click="mk.repeatMode = 0"
v-else-if="mk.repeatMode == 2"></button>
v-else-if="mk.repeatMode == 2" :title="$root.getLz('term.disableRepeat')"
v-b-tooltip.hover></button>
</div>
</div>
<div class="app-chrome-item volume">
<div class="input-container">
<button class="volume-button--small volume" @click="muteButtonPressed()"
:class="{'active': this.cfg.audio.volume == 0}"></button>
:class="{'active': this.cfg.audio.volume == 0}"
:title="cfg.audio.muted ? $root.getLz('term.unmute') : $root.getLz('term.mute')"
v-b-tooltip.hover></button>
<input type="range" class="" @wheel="volumeWheel" :step="cfg.audio.volumeStep" min="0"
:max="cfg.audio.maxVolume" v-model="mk.volume" v-if="typeof mk.volume != 'undefined'"
@change="checkMuteChange()" v-b-tooltip.hover

2
src/renderer/views/components/add-to-playlist.ejs
View file

@ -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"

2
src/renderer/views/components/airplay-modal.ejs
View file

@ -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"/>

2
src/renderer/views/components/audio-controls.ejs
View file

@ -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">

2
src/renderer/views/components/audio-playbackrate.ejs
View file

@ -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">

2
src/renderer/views/components/audio-settings.ejs
View file

@ -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"

2
src/renderer/views/components/castmenu.ejs
View file

@ -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>

2
src/renderer/views/components/cider-modal.ejs
View file

@ -4,7 +4,7 @@
<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"

2
src/renderer/views/components/equalizer.ejs
View file

@ -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')">

30
src/renderer/views/components/fullscreen.ejs
View file

@ -54,32 +54,42 @@
<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()">

2
src/renderer/views/components/inline-collection-list.ejs
View file

@ -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>

8
src/renderer/views/components/mediaitem-list-item.ejs
View file

@ -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()">

8
src/renderer/views/components/mediaitem-square.ejs
View file

@ -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

2
src/renderer/views/components/moreinfo-modal.ejs
View file

@ -4,7 +4,7 @@
<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">

2
src/renderer/views/components/plugin-menu.ejs
View file

@ -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">

2
src/renderer/views/components/qrcode-modal.ejs
View file

@ -3,7 +3,7 @@
<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"/>

6
src/renderer/views/components/queue.ejs
View file

@ -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'">

2
src/renderer/views/components/share-sheet.ejs
View file

@ -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"

2
src/renderer/views/components/spatial-properties.ejs
View file

@ -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'">

10
src/renderer/views/pages/artist.ejs
View file

@ -16,7 +16,7 @@
size="190" type="artists"></mediaitem-artwork>
<button class="overlay-play" @click="app.mk.setStationQueue({artist:'a-'+data.id}).then(()=>{
app.mk.play()
})">
})" :aria-label="app.getLz('term.play')">
<%- include("../svg/play.svg") %>
</button>
</div>
@ -26,11 +26,11 @@
>
<button class="artist-play" @click="app.mk.setStationQueue({artist:'a-'+data.id}).then(()=>{
app.mk.play()
})"><%- include("../svg/play.svg") %></button>
})" :aria-label="app.getLz('term.play')"><%- include("../svg/play.svg") %></button>
<h1>{{ data.attributes.name }}</h1>
</div>
</div>
<button class="more-btn-round" @click="artistMenu" style="pointer-events: all;">
<button class="more-btn-round" @click="artistMenu" style="pointer-events: all;" :aria-label="app.getLz('term.more')">
<div class="svg-icon"></div>
</button>
</div>
@ -43,13 +43,13 @@
<div class="col-auto flex-center">
<button class="artist-play" style="display:block;" @click="app.mk.setStationQueue({artist:'a-'+data.id}).then(()=>{
app.mk.play()
})"><%- include("../svg/play.svg") %></button>
})" :aria-label="app.getLz('term.play')"><%- include("../svg/play.svg") %></button>
</div>
<div class="col">
<h3>{{ data.attributes.name }}</h3>
</div>
<div class="col-auto flex-center">
<button class="more-btn-round" @click="artistMenu">
<button class="more-btn-round" @click="artistMenu" :aria-label="app.getLz('term.more')">
<div class="svg-icon"></div>
</button>
</div>

4
src/renderer/views/pages/cider-playlist.ejs
View file

@ -94,7 +94,7 @@
<img :class="(!inLibrary) ? 'md-ico-add' : 'md-ico-remove'">
{{app.getLz('term.confirm')}}
</button>
<button class="more-btn-round" style="float:right;" @click="menu">
<button class="more-btn-round" style="float:right;" @click="menu" :aria-label="app.getLz('term.more')">
<div class="svg-icon"></div>
</button>
</div>
@ -145,7 +145,7 @@
</div>
</div>
<div class="col-auto flex-center">
<button class="more-btn-round" style="float:right;" @click="menu">
<button class="more-btn-round" style="float:right;" @click="menu" :aria-label="app.getLz('term.more')">
<div class="svg-icon"></div>
</button>
</div>

2
src/renderer/views/pages/collection-list.ejs
View file

@ -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>

3
src/renderer/views/pages/library-albums.ejs
View file

@ -5,7 +5,8 @@
<h1 class="header-text">{{$root.getLz('term.albums')}}</h1>
</div>
<div class="col-auto">
<button v-if="library.albums.downloadState == 2" @click="$root.getLibraryAlbumsFull(true, 1)" class="reload-btn"><%- include('../svg/redo.svg') %></button>
<button v-if="library.albums.downloadState == 2" @click="$root.getLibraryAlbumsFull(true, 1)"
class="reload-btn" :aria-label="app.getLz('menubar.options.reload')"><%- include('../svg/redo.svg') %></button>
</div>
</div>
<div class="row">

2
src/renderer/views/pages/library-recentlyadded.ejs
View file

@ -6,7 +6,7 @@
</div>
<div class="col-auto">
<button v-if="library.albums.downloadState == 2" @click="getLibraryAlbumsFull(true, 0)"
class="reload-btn"><%- include('../svg/redo.svg') %></button>
class="reload-btn" :aria-label="app.getLz('menubar.options.reload')"><%- include('../svg/redo.svg') %></button>
</div>
</div>
<div class="row">

5
src/renderer/views/pages/library-songs.ejs
View file

@ -51,8 +51,9 @@
</div>
</div>
<div class="col-auto flex-center">
<button v-if="library.songs.downloadState == 2" @click="$root.getLibrarySongsFull(true)" class="reload-btn"><%- include('../svg/redo.svg') %></button>
<button v-else class="reload-btn" style="opacity: 0.8;pointer-events: none">
<button v-if="library.songs.downloadState == 2" @click="$root.getLibrarySongsFull(true)"
class="reload-btn" :aria-label="app.getLz('menubar.options.reload')"><%- include('../svg/redo.svg') %></button>
<button v-else class="reload-btn" style="opacity: 0.8;pointer-events: none" :aria-label="app.getLz('menubar.options.reload')">
<div class="spinner"></div>
</button>
</div>

4
src/renderer/views/pages/playlist-inline.ejs
View file

@ -101,7 +101,7 @@
<img :class="(!inLibrary) ? 'md-ico-add' : 'md-ico-remove'">
{{app.getLz('term.confirm')}}
</button>
<button class="more-btn-round" style="float:right;" @click="menu">
<button class="more-btn-round" style="float:right;" @click="menu" :aria-label="app.getLz('term.more')">
<div class="svg-icon"></div>
</button>
</div>
@ -145,7 +145,7 @@
</div>
</div>
<div class="col-auto flex-center">
<button class="more-btn-round" style="float:right;" @click="menu">
<button class="more-btn-round" style="float:right;" @click="menu" :aria-label="term.more">
<div class="svg-icon"></div>
</button>
</div>

2
src/renderer/views/pages/podcasts.ejs
View file

@ -68,7 +68,7 @@
<transition name="wpfade">
<div class="podcasts-details" v-if="selected.id != -1">
<div class="podcasts-details-header">
<button class="close-btn" @click="selected.id = -1"></button>
<button class="close-btn" @click="selected.id = -1" :aria-label="app.getLz('action.close')"></button>
</div>
<div class="podcast-artwork">
<mediaitem-artwork shadow="large" :url="selected.attributes.artwork.url" size="300"></mediaitem-artwork>

8
src/web-remote/views/components/mediaitem-square.ejs
View file

@ -14,9 +14,13 @@
:type="item.type"></mediaitem-artwork>
</div>
<button class="menu-btn" v-if="!nomenu.includes(item.type)"
@click="contextMenu"><%- include("../svg/more.svg") %></button>
@click="contextMenu" :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