From 6c580bc41160f75dcf01e8d8081e895cb2ac4ea8 Mon Sep 17 00:00:00 2001
From: Agate <me@agate.blue>
Date: Tue, 4 Aug 2020 17:27:00 +0200
Subject: [PATCH] Added aria-landmarks on important pieces of content

---
 front/src/App.vue                     | 2 +-
 front/src/components/Footer.vue       | 5 ++++-
 front/src/components/Sidebar.vue      | 5 ++++-
 front/src/components/audio/Player.vue | 5 ++++-
 4 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/front/src/App.vue b/front/src/App.vue
index 702fd36b9..85c9391a5 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 d248c8988..794ffaa48 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 bf2ed255a..2a2a6e7a5 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 c2091141f..98219045e 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']">