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

layouts/default.vue

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

locales/en.json

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

middleware/a11y.global.ts

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