elk-zone · userquin · Apr 5, 2024 · Apr 5, 2024 · Apr 5, 2024
diff --git a/components/main/MainContent.vue b/components/main/MainContent.vue
@@ -6,6 +6,8 @@ defineProps<{
   back?: boolean
   /** Do not applying overflow hidden to let use floatable components in title */
   noOverflowHidden?: boolean
+  /** Add the skip content link: it is the translation key */
+  skipContent?: string
 }>()
 
 const container = ref()
@@ -26,6 +28,9 @@ const containerClass = computed(() => {
 
 <template>
   <div ref="container" :class="containerClass">
+    <SkipContentLink v-if="skipContent">
+      {{ $t(skipContent) }}
+    </SkipContentLink>
     <div
       sticky top-0 z10
       pt="[env(safe-area-inset-top,0)]"

diff --git a/components/skip/SkipContent.ts b/components/skip/SkipContent.ts
@@ -0,0 +1,14 @@
+// @unocss-include
+import { accessKeys } from '~/constants/access-keys'
+
+export default defineComponent({
+  setup() {
+    const { t } = useI18n()
+    return () => h('a', {
+      id: 'skip-navigation',
+      class: 'sr-only',
+      href: '#skip-content',
+      accesskey: accessKeys.SkipContent,
+    }, t(`a11y.skip_navigation`))
+  },
+})
diff --git a/components/skip/SkipContentLink.vue b/components/skip/SkipContentLink.vue
@@ -0,0 +1,5 @@
+<template>
+  <NuxtLink id="skip-content" sr-only>
+    <slot />
+  </NuxtLink>
+</template>
diff --git a/constants/access-keys.ts b/constants/access-keys.ts
@@ -0,0 +1,6 @@
+export const accessKeys = {
+  Home: 'S',
+  SkipContent: '1',
+  Search: '2',
+  Shortcuts: '3',
+} as const
diff --git a/layouts/default.vue b/layouts/default.vue
@@ -16,6 +16,7 @@ const isGrayscale = usePreferences('grayscaleMode')
 
 <template>
   <div h-full :data-mode="isHydrated && isGrayscale ? 'grayscale' : ''" data-tauri-drag-region>
+    <SkipContent />
     <main flex w-full mxa lg:max-w-80rem class="native:grid native:sm:grid-cols-[auto_1fr] native:lg:grid-cols-[auto_minmax(600px,2fr)_1fr]">
       <aside class="native:w-auto w-1/8 md:w-1/6 lg:w-1/5 xl:w-1/4 zen-hide" hidden sm:flex justify-end xl:me-4 native:me-0 relative>
         <div sticky top-0 w-20 xl:w-100 h-100dvh flex="~ col" lt-xl-items-center>

diff --git a/locales/en.json b/locales/en.json
@@ -4,7 +4,8 @@
     "loading_titled_page": "Loading {0} page, please wait",
     "locale_changed": "Language changed to {0}",
     "locale_changing": "Changing language, please wait",
-    "route_loaded": "Page {0} loaded"
+    "route_loaded": "Page {0} loaded",
+    "skip_navigation": "Skip navigation"
   },
   "account": {
     "authorize": "Authorize to follow",

diff --git a/locales/es.json b/locales/es.json
@@ -4,7 +4,8 @@
     "loading_titled_page": "Cargando página {0}, espera por favor",
     "locale_changed": "Idioma cambiado a {0}",
     "locale_changing": "Cambiando idioma, espera por favor",
-    "route_loaded": "Página {0} cargada"
+    "route_loaded": "Página {0} cargada",
+    "skip_navigation": "Saltar navegación"
   },
   "account": {
     "authorize": "Autorizar seguimiento",

diff --git a/pages/blocks.vue b/pages/blocks.vue
@@ -11,7 +11,7 @@ useHydratedHead({
 </script>
 
 <template>
-  <MainContent back>
+  <MainContent back skip-content="nav.blocked_users">
     <template #title>
       <span timeline-title-style>{{ $t('nav.blocked_users') }}</span>
     </template>

diff --git a/pages/bookmarks.vue b/pages/bookmarks.vue
@@ -11,7 +11,7 @@ useHydratedHead({
 </script>
 
 <template>
-  <MainContent>
+  <MainContent skip-content="nav.bookmarks">
     <template #title>
       <NuxtLink to="/bookmarks" timeline-title-style flex items-center gap-2 @click="$scrollToTop">
         <div i-ri:bookmark-line />

diff --git a/pages/conversations.vue b/pages/conversations.vue
@@ -11,7 +11,7 @@ useHydratedHead({
 </script>
 
 <template>
-  <MainContent>
+  <MainContent skip-content="nav.conversations">
     <template #title>
       <NuxtLink to="/conversations" timeline-title-style flex items-center gap-2 @click="$scrollToTop">
         <div i-ri:at-line />

diff --git a/pages/domain_blocks.vue b/pages/domain_blocks.vue
@@ -11,7 +11,7 @@ useHydratedHead({
 </script>
 
 <template>
-  <MainContent back>
+  <MainContent back skip-content="nav.blocked_domains">
     <template #title>
       <span timeline-title-style>{{ $t('nav.blocked_domains') }}</span>
     </template>

diff --git a/pages/favourites.vue b/pages/favourites.vue
@@ -12,7 +12,7 @@ useHydratedHead({
 </script>
 
 <template>
-  <MainContent>
+  <MainContent skip-content="nav.favourites">
     <template #title>
       <NuxtLink to="/favourites" timeline-title-style flex items-center gap-2 @click="$scrollToTop">
         <div :class="useStarFavoriteIcon ? 'i-ri:star-line' : 'i-ri:heart-3-line'" />

diff --git a/pages/hashtags.vue b/pages/hashtags.vue
@@ -16,7 +16,7 @@ useHydratedHead({
 </script>
 
 <template>
-  <MainContent>
+  <MainContent skip-content="nav.hashtags">
     <template #title>
       <NuxtLink to="/hashtags" timeline-title-style flex items-center gap-2 @click="$scrollToTop">
         <div class="i-ri:hashtag" />

diff --git a/pages/home.vue b/pages/home.vue
@@ -16,7 +16,7 @@ useHydratedHead({
 </script>
 
 <template>
-  <MainContent>
+  <MainContent skip-content="nav.home">
     <template #title>
       <NuxtLink to="/home" timeline-title-style flex items-center gap-2 @click="$scrollToTop">
         <div i-ri:home-5-line />

diff --git a/pages/mutes.vue b/pages/mutes.vue
@@ -11,7 +11,7 @@ useHydratedHead({
 </script>
 
 <template>
-  <MainContent back>
+  <MainContent back skip-content="nav.muted_users">
     <template #title>
       <span timeline-title-style>{{ $t('nav.muted_users') }}</span>
     </template>

diff --git a/pages/notifications.vue b/pages/notifications.vue
@@ -65,10 +65,14 @@ const moreOptions = computed<CommonRouteTabMoreOption>(() => ({
   tooltip: filterText.value,
   match: !!filter.value,
 }))
+const skipContent = computed(() => {
+  const name = route.params.filter
+  return name ? `tab.notifications_${name}` : 'tab.notifications_all'
+})
 </script>
 
 <template>
-  <MainContent>
+  <MainContent :skip-content="skipContent">
     <template #title>
       <NuxtLink to="/notifications" timeline-title-style flex items-center gap-2 @click="$scrollToTop">
         <div i-ri:notification-4-line />

diff --git a/pages/pinned.vue b/pages/pinned.vue
@@ -11,7 +11,7 @@ useHydratedHead({
 </script>
 
 <template>
-  <MainContent>
+  <MainContent skip-content="account.pinned">
     <template #title>
       <NuxtLink to="/public/pinned" timeline-title-style flex items-center gap-2 @click="$scrollToTop">
         <div i-ri:pushpin-line />

diff --git a/pages/settings.vue b/pages/settings.vue
@@ -18,7 +18,7 @@ const isRootPath = computed(() => route.name === 'settings')
   <div>
     <div min-h-screen flex>
       <div border="e base" :class="isRootPath ? 'block lg:flex-none flex-1' : 'hidden lg:block'">
-        <MainContent>
+        <MainContent :skip-content="isRootPath ? 'nav.settings' : undefined">
           <template #title>
             <div timeline-title-style flex items-center gap-2 @click="$scrollToTop">
               <div i-ri:settings-3-line />

diff --git a/pages/settings/about/index.vue b/pages/settings/about/index.vue
@@ -17,7 +17,7 @@ function handleShowCommit() {
 </script>
 
 <template>
-  <MainContent back-on-small-screen>
+  <MainContent back-on-small-screen skip-content="settings.about.label">
     <template #title>
       <div text-lg font-bold flex items-center gap-2 @click="$scrollToTop">
         <span>{{ $t('settings.about.label') }}</span>

diff --git a/pages/settings/interface/index.vue b/pages/settings/interface/index.vue
@@ -7,7 +7,7 @@ useHydratedHead({
 </script>
 
 <template>
-  <MainContent back-on-small-screen>
+  <MainContent back-on-small-screen skip-content="settings.interface.label">
     <template #title>
       <div text-lg font-bold flex items-center gap-2 @click="$scrollToTop">
         <span>{{ $t('settings.interface.label') }}</span>

diff --git a/pages/settings/language/index.vue b/pages/settings/language/index.vue
@@ -15,7 +15,7 @@ const status = computed(() => {
 </script>
 
 <template>
-  <MainContent back-on-small-screen>
+  <MainContent back-on-small-screen skip-content="settings.language.label">
     <template #title>
       <div text-lg font-bold flex items-center gap-2 @click="$scrollToTop">
         <span>{{ $t('settings.language.label') }}</span>

diff --git a/pages/settings/notifications/index.vue b/pages/settings/notifications/index.vue
@@ -12,7 +12,7 @@ useHydratedHead({
 </script>
 
 <template>
-  <MainContent back-on-small-screen>
+  <MainContent back-on-small-screen skip-content="settings.notifications.label">
     <template #title>
       <div text-lg font-bold flex items-center gap-2 @click="$scrollToTop">
         <span>{{ $t('settings.notifications.label') }}</span>

diff --git a/pages/settings/notifications/notifications.vue b/pages/settings/notifications/notifications.vue
@@ -11,7 +11,7 @@ useHydratedHead({
 </script>
 
 <template>
-  <MainContent back>
+  <MainContent back skip-content="settings.notifications.notifications.label">
     <template #title>
       <div text-lg font-bold flex items-center gap-2 @click="$scrollToTop">
         <div i-ri:test-tube-line />

diff --git a/pages/settings/notifications/push-notifications.vue b/pages/settings/notifications/push-notifications.vue
@@ -14,7 +14,7 @@ useHydratedHead({
 </script>
 
 <template>
-  <MainContent back>
+  <MainContent back skip-content="settings.notifications.push_notifications.label">
     <template #title>
       <div text-lg font-bold flex items-center gap-2 @click="$scrollToTop">
         <span>{{ $t('settings.notifications.push_notifications.label') }}</span>

diff --git a/pages/settings/preferences/index.vue b/pages/settings/preferences/index.vue
@@ -9,7 +9,7 @@ const userSettings = useUserSettings()
 </script>
 
 <template>
-  <MainContent back-on-small-screen>
+  <MainContent back-on-small-screen skip-content="settings.preferences.label">
     <template #title>
       <h1 text-lg font-bold flex items-center gap-2 @click="$scrollToTop">
         {{ $t('settings.preferences.label') }}

diff --git a/pages/settings/profile/appearance.vue b/pages/settings/profile/appearance.vue
@@ -103,7 +103,7 @@ onReactivated(refreshInfo)
 </script>
 
 <template>
-  <MainContent back>
+  <MainContent back skip-content="settings.profile.appearance.title">
     <template #title>
       <div text-lg font-bold flex items-center gap-2 @click="$scrollToTop">
         <span>{{ $t('settings.profile.appearance.title') }}</span>

diff --git a/pages/settings/profile/featured-tags.vue b/pages/settings/profile/featured-tags.vue
@@ -11,7 +11,7 @@ useHydratedHead({
 </script>
 
 <template>
-  <MainContent back>
+  <MainContent back skip-content="settings.profile.featured_tags.label">
     <template #title>
       <div text-lg font-bold flex items-center gap-2 @click="$scrollToTop">
         <div i-ri:test-tube-line />

diff --git a/pages/settings/profile/index.vue b/pages/settings/profile/index.vue
@@ -11,7 +11,7 @@ useHydratedHead({
 </script>
 
 <template>
-  <MainContent back-on-small-screen>
+  <MainContent back-on-small-screen skip-content="settings.profile.label">
     <template #title>
       <div text-lg font-bold flex items-center gap-2 @click="$scrollToTop">
         <span>{{ $t('settings.profile.label') }}</span>

diff --git a/pages/settings/users/index.vue b/pages/settings/users/index.vue
@@ -66,7 +66,7 @@ async function importTokens() {
 </script>
 
 <template>
-  <MainContent back-on-small-screen>
+  <MainContent back-on-small-screen skip-content="settings.users.label">
     <template #title>
       <div text-lg font-bold flex items-center gap-2 @click="$scrollToTop">
         <span>{{ $t('settings.users.label') }}</span>