fix: ♿ Improve accessibility of entire site

versia-pub · Apr 26, 2024 · 7b8a02d · 7b8a02d
1 parent c29cae2
commit 7b8a02d
Show file tree

Hide file tree

Showing 10 changed files with 29 additions and 25 deletions.
diff --git a/components/social-elements/instance/Presentation.vue b/components/social-elements/instance/Presentation.vue
@@ -3,7 +3,7 @@
         <div
             class="aspect-video shrink-0 w-full rounded ring-white/5 bg-dark-800 shadow overflow-hidden ring-1 hover:ring-2 duration-100">
             <img class="object-cover w-full h-full duration-150 hover:scale-[102%] ease-in-out" v-if="instance?.banner"
-                :src="instance.banner" />
+                alt="Instance banner" :src="instance.banner" />
         </div>
 
         <div class="prose prose-invert prose-sm">

diff --git a/components/social-elements/notes/attachment.vue b/components/social-elements/notes/attachment.vue
@@ -1,7 +1,7 @@
 <template>
-    <div @click="lightbox = true"
+    <div @click="lightbox = true" tabindex="0" aria-label="Open attachment in lightbox" @keydown="lightbox = true"
         class="aspect-video w-full rounded ring-white/5 shadow overflow-hidden ring-1 hover:ring-2 duration-100">
-        <img v-if="attachment.type === 'image'"
+        <img v-if="attachment.type === 'image'" tabindex="-1"
             class="object-cover w-full h-full rounded duration-150 hover:scale-[102%] ease-in-out" :src="attachment.url"
             :alt="attachment.description ?? ''" :title="attachment.description ?? ''" />
         <video v-else-if="attachment.type === 'video'" class="object-cover w-full h-full rounded" controls

diff --git a/components/social-elements/notes/mention.vue b/components/social-elements/notes/mention.vue
@@ -2,7 +2,7 @@
     <a :href="`/@${account.acct}`"
         class="shrink break-all rounded bg-pink-700/80 text-pink-200 px-2 py-1 not-prose font-semibold cursor-pointer [&:not(:last-child)]:mr-1 duration-200 hover:bg-pink-600/30">
         <img class="h-[1em] w-[1em] rounded ring-1 ring-white/5 inline align-middle mb-1 mr-1" :src="account.avatar"
-            alt="" />
+            :alt="`${account.acct}'s avatar'`" />
         {{ account.display_name }}
     </a>
 </template>

diff --git a/components/social-elements/notes/note.vue b/components/social-elements/notes/note.vue
@@ -4,7 +4,8 @@
         <div class="flex flex-row">
             <Skeleton :enabled="isLoading" shape="rect" class="!h-12 w-12">
                 <NuxtLink :href="accountUrl">
-                    <img class="h-12 w-12 rounded ring-1 ring-white/5" :src="note?.account.avatar" alt="" />
+                    <img class="h-12 w-12 rounded ring-1 ring-white/5" :src="note?.account.avatar"
+                        :alt="`${note?.account.acct}'s avatar`" />
                 </NuxtLink>
             </Skeleton>
             <div class="flex flex-col items-start justify-around ml-4 grow overflow-hidden">
@@ -64,6 +65,7 @@
                 <template #button>
                     <HeadlessMenuButton>
                         <Icon name="tabler:dots" class="h-5 w-5 text-gray-200" aria-hidden="true" />
+                        <span class="sr-only">Open menu</span>
                     </HeadlessMenuButton>
                 </template>
 
@@ -104,10 +106,10 @@ const mentions = await useResolveMentions(props.note?.mentions ?? [], client);
 const content =
     props.note && process.client
         ? await useParsedContent(
-              props.note.content,
-              props.note.emojis,
-              mentions.value,
-          )
+            props.note.content,
+            props.note.emojis,
+            mentions.value,
+        )
         : "";
 const numberFormat = (number = 0) =>
     new Intl.NumberFormat(undefined, {

diff --git a/components/social-elements/users/Account.vue b/components/social-elements/users/Account.vue
@@ -3,14 +3,16 @@
         <div class="w-full rounded ring-1 ring-white/10 pb-10">
             <Skeleton :enabled="skeleton" class="!w-full !h-full !aspect-[8/3]">
                 <div class="w-full aspect-[8/3] border-b border-white/10 bg-dark-700">
-                    <img v-if="account?.header" :src="account.header" class="object-cover w-full h-full" />
+                    <img v-if="account?.header" :src="account.header" class="object-cover w-full h-full"
+                        :alt="`${account.acct}'s header image'`" />
                 </div>
             </Skeleton>
 
             <div class="flex items-start justify-between px-4 py-3">
                 <div class="h-32 w-32 -mt-[4.5rem] z-10 bg-dark-700 rounded overflow-hidden">
                     <Skeleton :enabled="skeleton" class="!h-full !w-full">
-                        <img class="cursor-pointer bg-dark-700 ring-1 ring-white/10" :src="account?.avatar" />
+                        <img class="cursor-pointer bg-dark-700 ring-1 ring-white/10" :src="account?.avatar"
+                            :alt="`${account?.acct}'s avatar'`" />
                     </Skeleton>
                 </div>
                 <ButtonsSecondary v-if="account">Edit Profile</ButtonsSecondary>

diff --git a/components/social-elements/users/SmallCard.vue b/components/social-elements/users/SmallCard.vue
@@ -2,7 +2,8 @@
     <NuxtLink :href="accountUrl" class="flex flex-row">
         <Skeleton :enabled="skeleton" shape="rect" class="!h-12 w-12">
             <div>
-                <img class="h-12 w-12 rounded ring-1 ring-white/5" :src="account?.avatar" alt="" />
+                <img class="h-12 w-12 rounded ring-1 ring-white/5" :src="account?.avatar"
+                    :alt="`${account?.acct}'s avatar'`" />
             </div>
         </Skeleton>
         <div class="flex flex-col items-start justify-around ml-4 grow overflow-hidden">

diff --git a/pages/about/apps.vue b/pages/about/apps.vue
@@ -8,7 +8,7 @@
             <li v-for="client of useConfig().RECOMMENDED_CLIENTS" :key="client.name" class="w-full">
                 <a :href="client.link" target="_blank"
                     class="rounded-sm ring-2 ring-white/10 px-4 py-2 w-full flex flex-row gap-3 items-center">
-                    <img :src="client.icon" :alt="client.name" class="h-10 w-10" />
+                    <img :src="client.icon" class="h-10 w-10" :alt="`${client.name}'s logo'`" />
                     <div class="flex flex-col justify-between items-start">
                         <h2 class="text-gray-100 font-semibold">{{ client.name }}</h2>
                         <span class="underline text-pink-700">{{ client.link }}</span>

diff --git a/pages/oauth/authorize.vue b/pages/oauth/authorize.vue
@@ -32,7 +32,7 @@
                             <a v-for="provider of oauthProviders" :key="provider.id"
                                 :href="`/oauth/authorize-external?issuer=${provider.id}&redirect_uri=${redirect_uri}&response_type=${response_type}&clientId=${client_id}&scope=${scope}`">
                                 <ButtonsSecondary class="flex flex-row w-full items-center justify-center gap-3">
-                                    <img :src="provider.icon" :alt="provider.name" class="w-6 h-6" />
+                                    <img :src="provider.icon" :alt="`${provider.name}'s logo'`" class="w-6 h-6" />
                                     <div class="flex flex-col gap-0 justify-center">
                                         <h3 class="font-bold">{{ provider.name }}</h3>
                                     </div>
@@ -57,7 +57,7 @@
                     <li v-for="client of useConfig().RECOMMENDED_CLIENTS" :key="client.name" class="w-full">
                         <a :href="client.link" target="_blank"
                             class="rounded-sm ring-2 ring-white/10 px-4 py-2 w-full flex flex-row gap-3 items-center">
-                            <img :src="client.icon" :alt="client.name" class="h-10 w-10" />
+                            <img :src="client.icon" :alt="`${client.name}'s logo'`" class="h-10 w-10" />
                             <div class="flex flex-col justify-between items-start">
                                 <h2 class="font-bold text-gray-100">{{ client.name }}</h2>
                                 <span class="underline text-pink-700">{{ client.link }}</span>

diff --git a/pages/oauth/consent.vue b/pages/oauth/consent.vue
@@ -68,7 +68,7 @@
                     <li v-for="client of useConfig().RECOMMENDED_CLIENTS" :key="client.name" class="w-full">
                         <a :href="client.link" target="_blank"
                             class="rounded-sm ring-2 ring-white/10 px-4 py-2 w-full flex flex-row gap-3 items-center">
-                            <img :src="client.icon" :alt="client.name" class="h-10 w-10" />
+                            <img :src="client.icon" :alt="`${client.name}'s logo'`" class="h-10 w-10" />
                             <div class="flex flex-col justify-between items-start">
                                 <h2 class="font-bold text-gray-100">{{ client.name }}</h2>
                                 <span class="underline text-pink-700">{{ client.link }}</span>

diff --git a/pages/register/index.vue b/pages/register/index.vue
@@ -133,15 +133,14 @@ const register = (result: {
     reason: string;
 }) => {
     isLoading.value = true;
-    client
-        .registerAccount(
-            result.username,
-            result.email,
-            result.password,
-            true,
-            "en",
-            result.reason || "Empty reason",
-        )
+    client?.registerAccount(
+        result.username,
+        result.email,
+        result.password,
+        true,
+        "en",
+        result.reason || "Empty reason",
+    )
         .then(async (res) => {
             navigateTo("/register/success");
         })