mirror of
https://github.com/versia-pub/frontend.git
synced 2026-03-13 19:49:16 +01:00
feat: ♿ Improve accessibility everywhere
This commit is contained in:
Jesse Wierzbinski
parent
192c7f83c3
commit
6e2401b67d
10 changed files with 41 additions and 33 deletions
|
|
@ -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" />
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
@{{
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue