feat: ♿ Improve accessibility everywhere

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']"

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" />