Added aria-landmarks on important pieces of content

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

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

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

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