fix: ♿ Improve accessibility of entire site

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

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>

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, {