versia-pub/frontend
2
0
Fork 0
mirror of https://github.com/versia-pub/frontend.git synced 2025-12-06 08:28:20 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

fix: 🐛 Improve accessibility linter warnings

Browse source
This commit is contained in:
Jesse Wierzbinski 2024-12-07 18:16:58 +01:00
parent a207dea817
commit fc888aa530
No known key found for this signature in database
5 changed files with 14 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
components/notes/actions.vue
View file

@ -1,22 +1,22 @@
<template> <template>
<div class="flex flex-row w-full items-stretch justify-around text-sm *:max-w-28 *:w-full *:text-muted-foreground"> <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" /> <Reply class="size-5 text-primary" />
{{ numberFormat(replyCount) }} {{ numberFormat(replyCount) }}
</Button> </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" /> <Heart class="size-5 text-primary" />
{{ numberFormat(likeCount) }} {{ numberFormat(likeCount) }}
</Button> </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" /> <Repeat class="size-5 text-primary" />
{{ numberFormat(reblogCount) }} {{ numberFormat(reblogCount) }}
</Button> </Button>
<Button variant="ghost" @click="emit('quote')"> <Button variant="ghost" @click="emit('quote')" title="Quote">
<Quote class="size-5 text-primary" /> <Quote class="size-5 text-primary" />
</Button> </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')"> <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" /> <Ellipsis class="size-5 text-primary" />
</Button> </Button>
</Menu> </Menu>

2
components/notes/attachment.vue
View file

@ -19,7 +19,7 @@
<Popover v-if="attachment.description"> <Popover v-if="attachment.description">
<div class="absolute top-0 right-0 p-2"> <div class="absolute top-0 right-0 p-2">
<PopoverTrigger :as-child="true"> <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 /> <Captions />
</Button> </Button>
</PopoverTrigger> </PopoverTrigger>

4
components/notifications/notification.vue
View file

@ -1,6 +1,6 @@
<template> <template>
<Card> <Card>
<Collapsible :default-open="true"> <Collapsible :default-open="true" v-slot="{ open }">
<Tooltip> <Tooltip>
<TooltipTrigger :as-child="true"> <TooltipTrigger :as-child="true">
<CardHeader v-if="notification.account" <CardHeader v-if="notification.account"
@ -11,7 +11,7 @@
notification.account.display_name notification.account.display_name
}}</span> }}</span>
<CollapsibleTrigger :as-child="true"> <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" /> <ChevronDown class="duration-200" />
</Button> </Button>
</CollapsibleTrigger> </CollapsibleTrigger>

2
components/profiles/avatar.vue
View file

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

9
components/ui/sidebar/Sidebar.vue
View file

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