From 6ecc5b69a1a036ca94b28c9bf1c81b9fc7f27edd Mon Sep 17 00:00:00 2001
From: Dragory <2606411+Dragory@users.noreply.github.com>
Date: Sun, 13 Dec 2020 23:18:19 +0200
Subject: [PATCH] docs: more accessibility tweaks

---
 dashboard/src/components/docs/DocsLayout.vue | 8 ++++----
 dashboard/src/style/components.pcss          | 4 ++++
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/dashboard/src/components/docs/DocsLayout.vue b/dashboard/src/components/docs/DocsLayout.vue
index 5561d883..38ce4ea1 100644
--- a/dashboard/src/components/docs/DocsLayout.vue
+++ b/dashboard/src/components/docs/DocsLayout.vue
@@ -24,6 +24,8 @@
       </div>
     </nav>
 
+    <a class="sr-only-when-not-focused text-center block py-2" href="#main-anchor">Skip to main content</a>
+
     <!-- Content wrapper -->
     <div class="flex flex-wrap items-start mt-8">
       <!-- Sidebar -->
@@ -40,6 +42,7 @@
 
       <!-- Content -->
       <main class="docs-content main-content flex-flexible overflow-x-hidden">
+        <a id="main-anchor" ref="main-anchor"></a>
         <router-view :key="$route.fullPath"></router-view>
       </main>
     </div>
@@ -134,11 +137,8 @@
       },
 
       onChooseMenuItem() {
-        if (document.activeElement instanceof HTMLElement) {
-          document.activeElement.blur();
-        }
-
         this.mobileMenuOpen = false;
+        this.$refs['main-anchor'].focus();
       },
     },
 
diff --git a/dashboard/src/style/components.pcss b/dashboard/src/style/components.pcss
index b7891181..1655cfa9 100644
--- a/dashboard/src/style/components.pcss
+++ b/dashboard/src/style/components.pcss
@@ -32,3 +32,7 @@
 .inline-icon {
   top: 0.125rem;
 }
+
+.sr-only-when-not-focused:not(:focus-within) {
+  @apply sr-only;
+}