add skip link

components/PageTitle.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+const props = defineProps<{
+  text?: string
+}>()
+</script>
+
+<template>
+  <h2 id="main-target" tabindex="-1" class="text-4xl font-bold mb-3">
+    <slot name="default">
+      {{ text }}
+    </slot>
+  </h2>
+</template>

layouts/default.vue

@@ -2,7 +2,7 @@
 const { t } = useI18n()
 const isLoggedIn = useIsLoggedIn()
 const { userData: me } = await useUserInfo()
-
+const skipLink: Ref<HTMLLinkElement | null> = ref(null)
 const colorMode = useColorMode()
 const themes = [
   'system',
@@ -68,6 +68,16 @@ async function logout() {
 <template>
   <div class="container mx-auto p-10 min-h-screen flex flex-col">
     <header class="py-10">
+      <div class="h-10 -mt-10">
+        <a
+          id="skip-link"
+          ref="skipLink"
+          class="link sr-only focus:not-sr-only"
+          href="#main-target"
+          >{{ $t('skip_to_main_content') }}</a
+        >
+      </div>
+
       <slot name="header">
         <div class="flex flex-row flex-wrap items-center min-w-full">
           <NuxtLink to="/">

locales/en-US.json

@@ -1,4 +1,5 @@
 {
+  "app_list": "App list",
   "back_to_apps": "Go back to app list",
   "portal": "YunoHost Portal",
   "information": "Your info",
@@ -50,5 +51,6 @@
   "footerlink_edit": "Edit my profile",
   "footerlink_documentation": "Documentation",
   "footerlink_support": "Support",
-  "footerlink_administration": "Administration"
+  "footerlink_administration": "Administration",
+  "skip_to_main_content": "Skip to main content",
 }

middleware/a11y.global.ts

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

pages/edit.vue

@@ -42,10 +42,12 @@ const onSubmit = handleSubmit(async (form) => {
 </script>
 
 <template>
-  <!-- {{ initialValues }} -->
+  <div>
-  <form novalidate @submit="onSubmit">
+    <PageTitle :text="$t('footerlink_edit')" />
-    <div class="flex justify-between">
+
-      <div class="w-1/3">
+    <form novalidate class="my-10" @submit="onSubmit">
+      <div class="sm:flex sm:justify-between">
+        <div class="sm:w-1/3">
           <FormField name="username" :label="$t('username')" class="mb-3">
             <TextInput
               name="username"
@@ -67,8 +69,12 @@ const onSubmit = handleSubmit(async (form) => {
           </FormField>
         </div>
 
-      <div class="basis-1/2">
+        <div class="basis-1/2 mt-10 sm:mt-0">
-        <FormField name="mailalias" :label="$t('mail_addresses')" class="mb-10">
+          <FormField
+            name="mailalias"
+            :label="$t('mail_addresses')"
+            class="mb-10"
+          >
             <TextInputList
               name="mailalias"
               type="text"
@@ -93,7 +99,8 @@ const onSubmit = handleSubmit(async (form) => {
         <NuxtLink to="/" class="btn ml-auto mr-2">
           {{ $t('cancel') }}
         </NuxtLink>
-      <YButton :text="$t('ok')" type="submit" variant="success" />
+        <YButton :text="$t('save')" type="submit" variant="success" />
       </div>
     </form>
+  </div>
 </template>

pages/index.vue

@@ -25,7 +25,7 @@ const me = computed(() => {
     // ['bg-purple-500', 'text-purple-100'],
     // ['bg-rose-500', 'text-rose-100'],
   ]
-  if (!userData.value) return
+
   return {
     ...userData.value,
     apps: Object.entries(userData.value.apps).map(([id, app]) => {
@@ -41,8 +41,10 @@ const me = computed(() => {
 </script>
 
 <template>
-  <div v-if="me">
+  <div>
-    <div id="apps" class="py-10">
+    <PageTitle :text="$t('app_list')" />
+
+    <div id="apps" class="my-10">
       <div v-if="!me.apps.length" class="w-2/3">
         <em>{{ t('no_apps') }}</em>
       </div>

pages/password.vue

@@ -31,7 +31,10 @@ const onSubmit = handleSubmit(async (form) => {
 </script>
 
 <template>
-  <form novalidate @submit="onSubmit">
+  <div>
+    <PageTitle :text="$t('change_password')" />
+
+    <form novalidate class="my-10" @submit="onSubmit">
       <!-- FIXME replace with accessible component -->
       <div role="alert" class="alert alert-warning mb-10">
         <Icon name="mdi:warning-outline" size="2em" />
@@ -78,4 +81,5 @@ const onSubmit = handleSubmit(async (form) => {
         <YButton :text="$t('ok')" type="submit" variant="success" />
       </div>
     </form>
+  </div>
 </template>