StyAndCo/zappyzep
3
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

docs: more accessibility tweaks

Browse source
This commit is contained in:
Dragory 2020-12-13 23:18:19 +02:00
parent 0b9defc5d3
commit 6ecc5b69a1
No known key found for this signature in database
GPG key ID: 5F387BA66DF8AAC1
2 changed files with 8 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
dashboard/src/components/docs/DocsLayout.vue
View file

@ -24,6 +24,8 @@
</div> </div>
</nav> </nav>
<a class="sr-only-when-not-focused text-center block py-2" href="#main-anchor">Skip to main content</a>
<!-- Content wrapper --> <!-- Content wrapper -->
<div class="flex flex-wrap items-start mt-8"> <div class="flex flex-wrap items-start mt-8">
<!-- Sidebar --> <!-- Sidebar -->
@ -40,6 +42,7 @@
<!-- Content --> <!-- Content -->
<main class="docs-content main-content flex-flexible overflow-x-hidden"> <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> <router-view :key="$route.fullPath"></router-view>
</main> </main>
</div> </div>
@ -134,11 +137,8 @@
}, },
onChooseMenuItem() { onChooseMenuItem() {
if (document.activeElement instanceof HTMLElement) {
document.activeElement.blur();
}
this.mobileMenuOpen = false; this.mobileMenuOpen = false;
this.$refs['main-anchor'].focus();
}, },
}, },

4
dashboard/src/style/components.pcss
View file

@ -32,3 +32,7 @@
.inline-icon { .inline-icon {
top: 0.125rem; top: 0.125rem;
} }
.sr-only-when-not-focused:not(:focus-within) {
@apply sr-only;
}