fix: 🐛 Improve accessibility linter warnings

components/notes/actions.vue

@@ -1,22 +1,22 @@
 <template>
     <div class="flex flex-row w-full items-stretch justify-around text-sm *:max-w-28 *:w-full *:text-muted-foreground">
-        <Button variant="ghost" @click="emit('reply')">
+        <Button variant="ghost" @click="emit('reply')" title="Reply">
             <Reply class="size-5 text-primary" />
             {{ numberFormat(replyCount) }}
         </Button>
-        <Button variant="ghost" @click="liked ? unlike() : like()">
+        <Button variant="ghost" @click="liked ? unlike() : like()" :title="liked ? 'Unlike' : 'Like'">
             <Heart class="size-5 text-primary" />
             {{ numberFormat(likeCount) }}
         </Button>
-        <Button variant="ghost" @click="reblogged ? unreblog() : reblog()">
+        <Button variant="ghost" @click="reblogged ? unreblog() : reblog()" :title="reblogged ? 'Unreblog' : 'Reblog'">
             <Repeat class="size-5 text-primary" />
             {{ numberFormat(reblogCount) }}
         </Button>
-        <Button variant="ghost" @click="emit('quote')">
+        <Button variant="ghost" @click="emit('quote')" title="Quote">
             <Quote class="size-5 text-primary" />
         </Button>
         <Menu :api-note-string="apiNoteString" :url="url" :remote-url="remoteUrl" :is-remote="isRemote" :author-id="authorId" @edit="emit('edit')" :note-id="noteId" @delete="emit('delete')">
-            <Button variant="ghost">
+            <Button variant="ghost" title="Actions">
                 <Ellipsis class="size-5 text-primary" />
             </Button>
         </Menu>

components/notes/attachment.vue

@@ -19,7 +19,7 @@
             <Popover v-if="attachment.description">
                 <div class="absolute top-0 right-0 p-2">
                     <PopoverTrigger :as-child="true">
-                        <Button variant="outline" size="icon" class="[&_svg]:size-6">
+                        <Button variant="outline" size="icon" class="[&_svg]:size-6" title="View alt text">
                             <Captions />
                         </Button>
                     </PopoverTrigger>

components/notifications/notification.vue

@@ -1,6 +1,6 @@
 <template>
     <Card>
-        <Collapsible :default-open="true">
+        <Collapsible :default-open="true" v-slot="{ open }">
             <Tooltip>
                 <TooltipTrigger :as-child="true">
                     <CardHeader v-if="notification.account"
@@ -11,7 +11,7 @@
                             notification.account.display_name
                         }}</span>
                         <CollapsibleTrigger :as-child="true">
-                            <Button variant="ghost" size="icon" class="ml-auto [&_svg]:data-[state=open]:-rotate-180">
+                            <Button variant="ghost" size="icon" class="ml-auto [&_svg]:data-[state=open]:-rotate-180" :title="open ? 'Collapse' : 'Expand'">
                                 <ChevronDown class="duration-200" />
                             </Button>
                         </CollapsibleTrigger>

components/profiles/avatar.vue

@@ -3,7 +3,7 @@
         <AvatarFallback v-if="name">
             {{ getInitials(name) }}
         </AvatarFallback>
-        <AvatarImage v-if="src" :src="src" />
+        <AvatarImage v-if="src" :src="src" :alt="`${name}'s avatar`" />
     </Avatar>
 </template>
 

components/ui/sidebar/Sidebar.vue

@@ -27,14 +27,14 @@ const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
 </script>
 
 <template>
-  <div
+  <aside
     v-if="collapsible === 'none'"
     :class="cn('flex h-full w-[--sidebar-width] flex-col bg-sidebar text-sidebar-foreground', props.class)"
     v-bind="$attrs"
     data-component="sidebar"
   >
     <slot />
-  </div>
+  </aside>
 
   <Sheet v-else-if="isMobile" :open="openMobile" v-bind="$attrs" @update:open="setOpenMobile">
     <SheetContent
@@ -45,6 +45,7 @@ const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
       :style="{
         '--sidebar-width': SIDEBAR_WIDTH_MOBILE,
       }"
+      as="aside"
     >
       <div class="flex h-full w-full flex-col">
         <slot />
@@ -52,7 +53,7 @@ const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
     </SheetContent>
   </Sheet>
 
-  <div
+  <aside
     v-else class="group peer hidden md:block"
     :data-state="state"
     :data-collapsible="state === 'collapsed' ? collapsible : ''"
@@ -92,5 +93,5 @@ const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
         <slot />
       </div>
     </div>
-  </div>
+  </aside>
 </template>