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; +}