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