YunoHost/yunohost-portal
1
0
Fork 0
mirror of https://github.com/YunoHost/yunohost-portal.git synced 2024-09-03 20:06:23 +02:00
Code Issues Projects Releases Packages Wiki Activity

a11y: reset focus on skip links container + add skip link to footer

Browse source
This commit is contained in:
axolotle 2023-11-22 15:48:25 +01:00
parent d83330256b
commit 0f55168f25
3 changed files with 22 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
layouts/default.vue
View file

@ -5,7 +5,6 @@ const { t } = useI18n()
const isLoggedIn = useIsLoggedIn() const isLoggedIn = useIsLoggedIn()
const settings = await useSettings() const settings = await useSettings()
const user = await useUser<User | null>() const user = await useUser<User | null>()
const skipLink: Ref<HTMLLinkElement | null> = ref(null)
const footerLinks = [ const footerLinks = [
{ text: t('footerlink_edit'), to: '/edit' }, { text: t('footerlink_edit'), to: '/edit' },
@ -39,14 +38,17 @@ async function logout() {
<template> <template>
<div class="container mx-auto p-10 min-h-screen flex flex-col"> <div class="container mx-auto p-10 min-h-screen flex flex-col">
<header class="py-2"> <header class="py-2">
<div class="h-10 -mt-10"> <div id="focus-reset" class="h-10 -mt-10 focus-target" tabindex="-1">
<a class="link sr-only focus:not-sr-only" href="#main-target">
{{ $t('skip_link.main_content') }}
</a>
<a <a
id="skip-link" v-if="isLoggedIn"
ref="skipLink"
class="link sr-only focus:not-sr-only" class="link sr-only focus:not-sr-only"
href="#main-target" href="#main-footer"
>{{ $t('skip_to_main_content') }}</a
> >
{{ $t('skip_link.footer') }}
</a>
</div> </div>
<slot name="header"> <slot name="header">
@ -85,7 +87,7 @@ async function logout() {
<slot /> <slot />
</main> </main>
<footer class="mt-auto"> <footer id="main-footer" class="mt-auto focus-target" tabindex="-1">
<slot name="footer"> <slot name="footer">
<nav <nav
class="flex pt-2 flex-col border-t border-gray-500 flex-wrap text-center sm:space-x-5 sm:flex-row sm:inline-flex" class="flex pt-2 flex-col border-t border-gray-500 flex-wrap text-center sm:space-x-5 sm:flex-row sm:inline-flex"
@ -109,4 +111,12 @@ async function logout() {
header .logo { header .logo {
width: 100px; width: 100px;
} }
.focus-target:not(:focus-visible) {
outline: none;
}
#focus-reset {
outline: none;
}
</style> </style>

5
locales/en.json
View file

@ -39,7 +39,10 @@
"possibly_invalid_username": "Username is possibly invalid", "possibly_invalid_username": "Username is possibly invalid",
"remove": "Remove", "remove": "Remove",
"save": "Save", "save": "Save",
"skip_to_main_content": "Skip to main content", "skip_link": {
"main_content": "Skip to main content",
"footer": "Skip to footer"
},
"theme": "Theme", "theme": "Theme",
"username": "Username", "username": "Username",
"v": { "v": {

2
middleware/a11y.global.ts
View file

@ -2,7 +2,7 @@ export default defineNuxtRouteMiddleware((to) => {
if (!to.hash) { if (!to.hash) {
// Auto select skip link on route change // Auto select skip link on route change
nextTick(() => { nextTick(() => {
document.getElementById('skip-link')?.focus() document.getElementById('focus-reset')?.focus()
}) })
} }
}) })