From 844faf7faac361ffb15149a2eb5a1109b2ad1d85 Mon Sep 17 00:00:00 2001
From: Dragory <2606411+Dragory@users.noreply.github.com>
Date: Sun, 13 Dec 2020 22:33:25 +0200
Subject: [PATCH] docs: accessibility improvements

---
 dashboard/src/components/Expandable.vue        |  2 +-
 dashboard/src/components/docs/DocsLayout.vue   | 18 +++++++++++++-----
 dashboard/src/components/docs/Introduction.vue |  2 +-
 dashboard/src/style/docs.pcss                  |  4 ++++
 4 files changed, 19 insertions(+), 7 deletions(-)

diff --git a/dashboard/src/components/Expandable.vue b/dashboard/src/components/Expandable.vue
index e594688c..4f0a39f4 100644
--- a/dashboard/src/components/Expandable.vue
+++ b/dashboard/src/components/Expandable.vue
@@ -8,7 +8,7 @@
          v-on:keydown.space="$event.preventDefault()"
          v-on:keyup.space="toggle"
          tabindex="0">
-      <chevron-down class="icon" v-bind:class="{'icon-open': isOpen}" />
+      <chevron-down decorative class="icon" v-bind:class="{'icon-open': isOpen}" />
       <span class="title-text"><slot name="title"></slot></span>
     </div>
     <div class="content border-t border-gray-700" ref="content">
diff --git a/dashboard/src/components/docs/DocsLayout.vue b/dashboard/src/components/docs/DocsLayout.vue
index 2c895240..5561d883 100644
--- a/dashboard/src/components/docs/DocsLayout.vue
+++ b/dashboard/src/components/docs/DocsLayout.vue
@@ -18,7 +18,7 @@
           class="py-1 px-2 rounded hover:bg-gray-700 hidden lg:block">
           Go to dashboard
         </router-link>
-        <button class="link-button text-2xl leading-zero lg:hidden" v-on:click="toggleMobileMenu()">
+        <button class="link-button text-2xl leading-zero lg:hidden" v-on:click="toggleMobileMenu()" aria-hidden="true">
           <Menu />
         </button>
       </div>
@@ -27,21 +27,21 @@
     <!-- Content wrapper -->
     <div class="flex flex-wrap items-start mt-8">
       <!-- Sidebar -->
-      <nav class="docs-sidebar px-4 pt-2 pb-3 mr-8 mb-4 border border-gray-700 rounded bg-gray-800 shadow-md flex-full lg:flex-none lg:block" v-bind:class="{ hidden: !mobileMenuOpen }">
+      <nav class="docs-sidebar px-4 pt-2 pb-3 mr-8 mb-4 border border-gray-700 rounded bg-gray-800 shadow-md flex-full lg:flex-none lg:block" v-bind:class="{ closed: !mobileMenuOpen }">
         <div role="none" v-for="(group, index) in menu">
           <h1 class="font-bold" :aria-owns="'menu-group-' + index" :class="{'mt-4': index !== 0}">{{ group.label }}</h1>
           <ul v-bind:id="'menu-group-' + index" role="group" class="list-none pl-2">
             <li role="none" v-for="item in group.items">
-              <router-link role="menuitem" :to="item.to" class="text-gray-300 hover:text-gray-500" v-on:click.native="mobileMenuOpen = false">{{ item.label }}</router-link>
+              <router-link role="menuitem" :to="item.to" class="text-gray-300 hover:text-gray-500" v-on:click.native="onChooseMenuItem()">{{ item.label }}</router-link>
             </li>
           </ul>
         </div>
       </nav>
 
       <!-- Content -->
-      <div class="docs-content main-content flex-flexible overflow-x-hidden">
+      <main class="docs-content main-content flex-flexible overflow-x-hidden">
         <router-view :key="$route.fullPath"></router-view>
-      </div>
+      </main>
     </div>
   </div>
 </template>
@@ -132,6 +132,14 @@
       toggleMobileMenu() {
         this.mobileMenuOpen = !this.mobileMenuOpen;
       },
+
+      onChooseMenuItem() {
+        if (document.activeElement instanceof HTMLElement) {
+          document.activeElement.blur();
+        }
+
+        this.mobileMenuOpen = false;
+      },
     },
 
     computed: {
diff --git a/dashboard/src/components/docs/Introduction.vue b/dashboard/src/components/docs/Introduction.vue
index 04f9026a..344e6f2e 100644
--- a/dashboard/src/components/docs/Introduction.vue
+++ b/dashboard/src/components/docs/Introduction.vue
@@ -7,7 +7,7 @@
 
     <!-- WIP bar -->
     <div class="px-3 py-2 rounded bg-gray-800 shadow-md inline-block">
-      <alert class="inline-icon mr-1 text-yellow-300" />
+      <alert class="inline-icon mr-1 text-yellow-300" title="Note!" />
       This documentation is a work in progress.
     </div>
 
diff --git a/dashboard/src/style/docs.pcss b/dashboard/src/style/docs.pcss
index 5303cb75..2bb3e17f 100644
--- a/dashboard/src/style/docs.pcss
+++ b/dashboard/src/style/docs.pcss
@@ -2,4 +2,8 @@
   & .router-link-active {
     @apply underline;
   }
+
+  &.closed:not(:focus-within) {
+    @apply sr-only;
+  }
 }