From 6e2401b67d2daff98f185b5aac262645ea921c5a Mon Sep 17 00:00:00 2001
From: Jesse Wierzbinski <contact@cpluspatch.com>
Date: Sun, 9 Jun 2024 18:33:14 -1000
Subject: [PATCH] feat: :wheelchair: Improve accessibility everywhere

---
 README.md                                     |  2 +
 components/buttons/primary.vue                |  2 +-
 components/headers/greeting.vue               |  3 +-
 components/sidebars/collapsible-aside.vue     |  4 +-
 components/sidebars/navigation.vue            |  2 +-
 .../social-elements/notes/attachment.vue      | 43 ++++++++++---------
 components/social-elements/notes/header.vue   |  8 ++--
 components/social-elements/notes/note.vue     |  4 +-
 layouts/app.vue                               |  2 +-
 layouts/default.vue                           |  4 +-
 10 files changed, 41 insertions(+), 33 deletions(-)

diff --git a/README.md b/README.md
index 13328e5..28fbc22 100644
--- a/README.md
+++ b/README.md
@@ -22,6 +22,8 @@
 - [x] Note editing
 - [x] Alt text support everywhere
 - [x] Media uploads
+- [x] WCAG 2.2 AAA compliance
+  - Testing is automated and may not catch all issues, please report any accessibility issues you find.
 - [ ] Settings
 - [ ] Profile editing
 
diff --git a/components/buttons/primary.vue b/components/buttons/primary.vue
index d96e146..2d2d305 100644
--- a/components/buttons/primary.vue
+++ b/components/buttons/primary.vue
@@ -1,5 +1,5 @@
 <template>
-    <ButtonsBase :loading="loading" class="bg-pink-500 hover:bg-pink-400">
+    <ButtonsBase :loading="loading" class="bg-pink-600 hover:bg-pink-500">
         <slot />
     </ButtonsBase>
 </template>
diff --git a/components/headers/greeting.vue b/components/headers/greeting.vue
index 9113735..13f3931 100644
--- a/components/headers/greeting.vue
+++ b/components/headers/greeting.vue
@@ -4,7 +4,8 @@
             <div class="sm:flex sm:items-center sm:justify-between gap-3">
                 <div class="sm:flex sm:space-x-5 grow">
                     <AvatarsCentered :src="identity.account.avatar"
-                        class="mx-auto shrink-0 size-20 rounded overflow-hidden ring-1 ring-white/10" />
+                        class="mx-auto shrink-0 size-20 rounded overflow-hidden ring-1 ring-white/10"
+                        :alt="'Your avatar'" />
                     <div
                         class="mt-4 text-center flex flex-col justify-center sm:mt-0 sm:text-left bg-dark-800 py-2 px-4 rounded grow ring-1 ring-white/10">
                         <p class="text-sm font-medium text-gray-300">Welcome back,</p>
diff --git a/components/sidebars/collapsible-aside.vue b/components/sidebars/collapsible-aside.vue
index d15a1e5..99baf59 100644
--- a/components/sidebars/collapsible-aside.vue
+++ b/components/sidebars/collapsible-aside.vue
@@ -1,11 +1,11 @@
 <template>
-    <aside v-bind="$props" role="complementary"
+    <aside v-bind="$props" role="complementary" :aria-expanded="open ? 'true' : 'false'"
         :class="['flex max-h-dvh overflow-hidden duration-200', open ? enterClass : leaveClass, direction === 'left' ? 'flex-row' : 'flex-row-reverse']">
         <OverlayScrollbarsComponent :defer="true"
             class="bg-dark-900 ring-1 ring-white/10 h-full overflow-y-auto w-full">
             <slot />
         </OverlayScrollbarsComponent>
-        <button @click="open = !open"
+        <button @click="open = !open" aria-label="Toggle sidebar"
             class="h-full bg-dark-700 hover:bg-dark-400 hover:cursor-pointer duration-200 py-4 px-0.5 flex items-center justify-center w-4 shrink-0">
             <iconify-icon icon="tabler:chevron-right"
                 :class="['text-gray-200 duration-200', direction === 'left' ? open ? 'rotate-180' : 'rotate-0' : open ? 'rotate-0' : 'rotate-180']"
diff --git a/components/sidebars/navigation.vue b/components/sidebars/navigation.vue
index 8f90fbf..52d00f3 100644
--- a/components/sidebars/navigation.vue
+++ b/components/sidebars/navigation.vue
@@ -1,7 +1,7 @@
 <template>
     <aside
         class="fixed h-dvh z-10 md:flex hidden flex-col p-4 bg-dark-800 gap-10 max-w-20 hover:max-w-72 duration-200 group ring-1 ring-dark-500"
-        role="complementary">
+        aria-label="Navigation" role="complementary">
         <NuxtLink href="/">
             <img crossorigin="anonymous" class="size-11 rounded ring-1 ring-white/10 hover:scale-105 duration-200"
                 src="/logo.webp" alt="Lysand logo" />
diff --git a/components/social-elements/notes/attachment.vue b/components/social-elements/notes/attachment.vue
index 274f26e..74c18ef 100644
--- a/components/social-elements/notes/attachment.vue
+++ b/components/social-elements/notes/attachment.vue
@@ -1,26 +1,29 @@
 <template>
-    <div tabindex="0" aria-label="Open attachment in lightbox"
-        class="aspect-video w-full rounded ring-white/5 shadow overflow-hidden ring-1 hover:ring-2 duration-100 relative">
-        <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 ?? undefined" @click="openLightbox" @keydown="openLightbox" />
-        <video v-else-if="attachment.type === 'video'" class="object-contain w-full h-full rounded aspect-video"
-            controls :alt="attachment.description ?? undefined" :src="attachment.url">
-            Your browser does not support the video tag.
-        </video>
-        <a v-else class="bg-dark-800 w-full h-full rounded flex items-center justify-center" :href="attachment.url"
-            target="_blank" download>
-            <div class="flex flex-col items-center gap-2 text-center max-w-56 overflow-hidden text-ellipsis">
-                <iconify-icon icon="tabler:file" width="none" class="size-10 text-gray-300" />
-                <p class="text-gray-300 text-sm font-mono">{{ getFilename(attachment.url) }}</p>
-                <p class="text-gray-300 text-xs" v-if="attachment.meta?.length">{{
-            formatBytes(Number(attachment.meta?.length)) }}</p>
-            </div>
-        </a>
+    <div class="aspect-video relative">
+        <div tabindex="0" aria-label="Open attachment in lightbox" role="button"
+            class="w-full h-full rounded ring-white/5 shadow overflow-hidden ring-1 hover:ring-2 duration-100 relative">
+            <img v-if="attachment.type === 'image'"
+                class="object-cover w-full h-full rounded duration-150 hover:scale-[102%] ease-in-out"
+                :src="attachment.url" :alt="attachment.description ?? undefined" @click="openLightbox"
+                @keydown="openLightbox" />
+            <video v-else-if="attachment.type === 'video'" class="object-contain w-full h-full rounded aspect-video"
+                controls :alt="attachment.description ?? undefined" :src="attachment.url">
+                Your browser does not support the video tag.
+            </video>
+            <a v-else class="bg-dark-800 w-full h-full rounded flex items-center justify-center" :href="attachment.url"
+                target="_blank" download>
+                <div class="flex flex-col items-center gap-2 text-center max-w-56 overflow-hidden text-ellipsis">
+                    <iconify-icon icon="tabler:file" width="none" class="size-10 text-gray-300" />
+                    <p class="text-gray-300 text-sm font-mono">{{ getFilename(attachment.url) }}</p>
+                    <p class="text-gray-300 text-xs" v-if="attachment.meta?.length">{{
+                formatBytes(Number(attachment.meta?.length)) }}</p>
+                </div>
+            </a>
+        </div>
         <!-- Alt text viewer -->
         <Popover.Root :positioning="{
-            strategy: 'fixed',
-        }" v-if="attachment.description">
+                strategy: 'fixed',
+            }" v-if="attachment.description">
             <Popover.Trigger aria-hidden="true"
                 class="absolute top-2 right-2 p-1 bg-dark-800 ring-1 ring-white/5 text-white text-xs rounded size-8">
                 <iconify-icon icon="tabler:alt" width="none" class="size-6" />
diff --git a/components/social-elements/notes/header.vue b/components/social-elements/notes/header.vue
index 73828a6..0f62570 100644
--- a/components/social-elements/notes/header.vue
+++ b/components/social-elements/notes/header.vue
@@ -3,6 +3,7 @@
         <NuxtLink :href="accountUrl" class="shrink-0">
             <AvatarsCentered :src="note?.account.avatar" :alt="`${note?.account.acct}'s avatar`"
                 class="size-6 rounded ring-1 ring-white/5" />
+            <span class="sr-only">Account profile</span>
         </NuxtLink>
         <div class="flex flex-col items-start justify-around ml-4 grow overflow-hidden">
             <div class="flex flex-row text-sm items-center justify-between w-full">
@@ -12,7 +13,7 @@
         note?.account.display_name }}
                     </Skeleton>
                 </NuxtLink>
-                <NuxtLink :href="noteUrl" class="text-gray-400 ml-2 line-clamp-1 break-all shrink-0">
+                <NuxtLink :href="noteUrl" class="text-gray-300 ml-2 line-clamp-1 break-all shrink-0">
                     <Skeleton :enabled="!note" :min-width="50" :max-width="100" shape="rect">
                         {{ timeAgo }}
                     </Skeleton>
@@ -24,6 +25,7 @@
         <NuxtLink :href="accountUrl" class="shrink-0">
             <AvatarsCentered :src="note?.account.avatar" :alt="`${note?.account.acct}'s avatar`"
                 class="h-12 w-12 rounded ring-1 ring-white/5" />
+            <span class="sr-only">Account profile</span>
         </NuxtLink>
         <div class="flex flex-col items-start justify-around ml-4 grow overflow-hidden">
             <div class="flex flex-row items-center justify-between w-full">
@@ -33,14 +35,14 @@
         note?.account.display_name }}
                     </Skeleton>
                 </NuxtLink>
-                <NuxtLink :href="noteUrl" class="text-gray-400 text-sm ml-2 line-clamp-1 break-all shrink-0"
+                <NuxtLink :href="noteUrl" class="text-gray-300 text-sm ml-2 line-clamp-1 break-all shrink-0"
                     :alt="fullTime" :title="fullTime">
                     <Skeleton :enabled="!note" :min-width="50" :max-width="100" shape="rect">
                         {{ timeAgo }}
                     </Skeleton>
                 </NuxtLink>
             </div>
-            <span class="text-gray-400 text-sm line-clamp-1 break-all w-full group">
+            <span class="text-gray-300 text-sm line-clamp-1 break-all w-full group">
                 <Skeleton :enabled="!note" :min-width="130" :max-width="250" shape="rect">
                     <span class="group-hover:hidden">
                         @{{
diff --git a/components/social-elements/notes/note.vue b/components/social-elements/notes/note.vue
index 021465d..cc185f4 100644
--- a/components/social-elements/notes/note.vue
+++ b/components/social-elements/notes/note.vue
@@ -1,5 +1,5 @@
 <template>
-    <div
+    <article
         class="first:rounded-t last:rounded-b ring-1 relative ring-white/5 p-6 flex flex-col bg-dark-800 hover:bg-dark-700 duration-200">
         <!-- Overlay that blocks clicks for disabled notes -->
         <div v-if="disabled" class="absolute z-10 inset-0 hover:cursor-not-allowed">
@@ -144,7 +144,7 @@
                 </DropdownsAdaptiveDropdown>
             </div>
         </Skeleton>
-    </div>
+    </article>
 </template>
 
 <script lang="ts" setup>
diff --git a/layouts/app.vue b/layouts/app.vue
index 215a67f..64dc8f4 100644
--- a/layouts/app.vue
+++ b/layouts/app.vue
@@ -15,7 +15,7 @@
         </svg>
         <LazySidebarsNavigation />
         <div class="relative md:pl-20 min-h-dvh flex flex-row overflow-hidden justify-center xl:justify-between">
-            <OverlayScrollbarsComponent :defer="true" class="w-full max-h-dvh overflow-y-auto">
+            <OverlayScrollbarsComponent :defer="true" class="w-full max-h-dvh overflow-y-auto" :element="'main'">
                 <slot />
             </OverlayScrollbarsComponent>
             <ClientOnly>
diff --git a/layouts/default.vue b/layouts/default.vue
index c10cfa8..5b739bc 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -1,8 +1,8 @@
 <template>
-    <div class="from-dark-600 to-dark-900 bg-gradient-to-tl min-h-dvh pb-20 md:pb-0">
+    <main class="from-dark-600 to-dark-900 bg-gradient-to-tl min-h-dvh pb-20 md:pb-0">
         <LazySidebarsNavigation />
         <slot />
-    </div>
+    </main>
 </template>
 
 <script lang="ts" setup>