MirrorMirror
/
funkwhale
mirror of https://dev.funkwhale.audio/funkwhale/funkwhale.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Fix #610: Use role=button instead of empty links for player controls

This commit is contained in:
Eliot Berriot 2019-01-14 17:22:08 +01:00
parent b453769a32
commit dd8aa7e7cd
No known key found for this signature in database
GPG Key ID: DD6965E2476E5C27
2 changed files with 37 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
changes/changelog.d/610.bugfix Normal file
View File

@ -0,0 +1 @@
Use role=button instead of empty links for player controls (#610)

72
front/src/components/audio/Player.vue
View File

@ -73,71 +73,71 @@
</p>
</div>
<div class="two wide column controls ui grid">
<a
href
<span
role="button"
:title="labels.previousTrack"
:aria-label="labels.previousTrack"
class="two wide column control"
@click.prevent.stop="previous"
:disabled="emptyQueue">
<i :class="['ui', 'backward step', {'disabled': emptyQueue}, 'secondary', 'icon']"></i>
</a>
<a
href
</span>
<span
role="button"
v-if="!playing"
:title="labels.play"
:aria-label="labels.play"
@click.prevent.stop="togglePlay"
class="two wide column control">
<i :class="['ui', 'play', {'disabled': !currentTrack}, 'secondary', 'icon']"></i>
</a>
<a
href
</span>
<span
role="button"
v-else
:title="labels.pause"
:aria-label="labels.pause"
@click.prevent.stop="togglePlay"
class="two wide column control">
<i :class="['ui', 'pause', {'disabled': !currentTrack}, 'secondary', 'icon']"></i>
</a>
<a
href
</span>
<span
role="button"
:title="labels.next"
:aria-label="labels.next"
class="two wide column control"
@click.prevent.stop="next"
:disabled="!hasNext">
<i :class="['ui', {'disabled': !hasNext}, 'forward step', 'secondary', 'icon']" ></i>
</a>
</span>
<div
class="wide column control volume-control"
v-on:mouseover="showVolume = true"
v-on:mouseleave="showVolume = false"
v-bind:class="{ active : showVolume }">
<a
href
<span
role="button"
v-if="volume === 0"
:title="labels.unmute"
:aria-label="labels.unmute"
@click.prevent.stop="unmute">
<i class="volume off secondary icon"></i>
</a>
<a
href
</span>
<span
role="button"
v-else-if="volume < 0.5"
:title="labels.mute"
:aria-label="labels.mute"
@click.prevent.stop="mute">
<i class="volume down secondary icon"></i>
</a>
<a
href
</span>
<span
role="button"
v-else
:title="labels.mute"
:aria-label="labels.mute"
@click.prevent.stop="mute">
<i class="volume up secondary icon"></i>
</a>
</span>
<input
type="range"
step="0.05"
@ -147,17 +147,17 @@
v-if="showVolume" />
</div>
<div class="two wide column control looping" v-if="!showVolume">
<a
href
<span
role="button"
v-if="looping === 0"
:title="labels.loopingDisabled"
:aria-label="labels.loopingDisabled"
@click.prevent.stop="$store.commit('player/looping', 1)"
:disabled="!currentTrack">
<i :class="['ui', {'disabled': !currentTrack}, 'step', 'repeat', 'secondary', 'icon']"></i>
</a>
<a
href
</span>
<span
role="button"
@click.prevent.stop="$store.commit('player/looping', 2)"
:title="labels.loopingSingle"
:aria-label="labels.loopingSingle"
@ -167,9 +167,9 @@
class="repeat secondary icon">
<span class="ui circular tiny orange label">1</span>
</i>
</a>
<a
href
</span>
<span
role="button"
:title="labels.loopingWhole"
:aria-label="labels.loopingWhole"
v-if="looping === 2"
@ -178,10 +178,10 @@
<i
class="repeat orange secondary icon">
</i>
</a>
</span>
</div>
<a
href
<span
role="button"
:disabled="queue.tracks.length === 0"
:title="labels.shuffle"
:aria-label="labels.shuffle"
@ -190,10 +190,10 @@
class="two wide column control">
<div v-if="isShuffling" class="ui inline shuffling inverted tiny active loader"></div>
<i v-else :class="['ui', 'random', 'secondary', {'disabled': queue.tracks.length === 0}, 'icon']" ></i>
</a>
</span>
<div class="one wide column" v-if="!showVolume"></div>
<a
href
<span
role="button"
:disabled="queue.tracks.length === 0"
:title="labels.clear"
:aria-label="labels.clear"
@ -201,7 +201,7 @@
@click.prevent.stop="clean()"
class="two wide column control">
<i :class="['ui', 'trash', 'secondary', {'disabled': queue.tracks.length === 0}, 'icon']" ></i>
</a>
</span>
</div>
<GlobalEvents
@keydown.space.prevent.exact="togglePlay"