diff --git a/front/src/App.vue b/front/src/App.vue index 702fd36b901b4aee2e1bc68f712f9dff3a7a50e3..85c9391a5128ed169b14038be67d75d8630295ea 100644 --- a/front/src/App.vue +++ b/front/src/App.vue @@ -15,7 +15,7 @@ <transition name="queue"> <queue @touch-progress="$refs.player.setCurrentTime($event)" v-if="$store.state.ui.queueFocused"></queue> </transition> - <router-view :class="{hidden: $store.state.ui.queueFocused}"></router-view> + <router-view role="main" :class="{hidden: $store.state.ui.queueFocused}"></router-view> <player ref="player"></player> <app-footer :class="{hidden: $store.state.ui.queueFocused}" diff --git a/front/src/components/Footer.vue b/front/src/components/Footer.vue index d248c8988a293c4463c3a3feabcc010fa0a4a9b9..794ffaa48699f85aed2ebc168f2ddcdd0b85c6b5 100644 --- a/front/src/components/Footer.vue +++ b/front/src/components/Footer.vue @@ -1,5 +1,8 @@ <template> - <footer id="footer" role="contentinfo" class="ui vertical footer segment"> + <footer id="footer" role="contentinfo" class="ui vertical footer segment" aria-labelledby="footer-label"> + <h1 id="footer-label" class="visually-hidden"> + <translate translate-context="*/*/*">Application footer</translate> + </h1> <div class="ui container"> <div class="ui stackable equal height stackable grid"> <section class="four wide column"> diff --git a/front/src/components/Sidebar.vue b/front/src/components/Sidebar.vue index bf2ed255a63eece27388f016ca79a0e19956f9f9..2a2a6e7a51b6b1239f69fc4b9e53e8222a7480f6 100644 --- a/front/src/components/Sidebar.vue +++ b/front/src/components/Sidebar.vue @@ -107,7 +107,10 @@ <translate translate-context="*/Signup/Link/Verb">Create an account</translate> </router-link> </div> - <nav class="secondary" role="navigation"> + <nav class="secondary" role="navigation" aria-labelledby="navigation-label"> + <h1 id="navigation-label" class="visually-hidden"> + <translate translate-context="*/*/*">Main navigation</translate> + </h1> <div class="ui small hidden divider"></div> <section :class="['ui', 'bottom', 'attached', {active: selectedTab === 'library'}, 'tab']" :aria-label="labels.mainMenu"> <nav class="ui vertical large fluid inverted menu" role="navigation" :aria-label="labels.mainMenu"> diff --git a/front/src/components/audio/Player.vue b/front/src/components/audio/Player.vue index c2091141f333b5d532e4bd200152df10a57f8234..98219045e5ae48f575f27c8d357fa933db732643 100644 --- a/front/src/components/audio/Player.vue +++ b/front/src/components/audio/Player.vue @@ -1,5 +1,8 @@ <template> - <section v-if="currentTrack" class="player-wrapper ui bottom-player component-player"> + <section role="complementary" v-if="currentTrack" class="player-wrapper ui bottom-player component-player" aria-labelledby="player-label"> + <h1 id="player-label" class="visually-hidden"> + <translate translate-context="*/*/*">Audio player and controls</translate> + </h1> <div class="ui inverted segment fixed-controls" @click.prevent.stop="toggleMobilePlayer"> <div :class="['ui', 'top attached', 'small', 'inverted', {'indicating': isLoadingAudio}, 'progress']">