fix(a11y): add more aria labels

This commit is contained in:
Daniel Roe 2022-11-29 21:24:26 +00:00
parent 9ad79d5f37
commit 59e365591d
No known key found for this signature in database
GPG key ID: 22D5008E4F5D9B55
11 changed files with 15 additions and 9 deletions

View file

@ -37,7 +37,7 @@ const toggleBlockDomain = async () => {
<template> <template>
<CommonDropdown :eager-mount="command"> <CommonDropdown :eager-mount="command">
<button flex gap-1 items-center w-full rounded op75 hover="op100 text-purple" group> <button flex gap-1 items-center w-full rounded op75 hover="op100 text-purple" group aria-label="More actions">
<div rounded-5 p2 group-hover="bg-purple/10"> <div rounded-5 p2 group-hover="bg-purple/10">
<div i-ri:more-2-fill /> <div i-ri:more-2-fill />
</div> </div>

View file

@ -40,7 +40,7 @@ const teams: Team[] = [
<template> <template>
<div p8 flex="~ col gap-4" relative max-h-screen of-auto> <div p8 flex="~ col gap-4" relative max-h-screen of-auto>
<button btn-action-icon absolute top-0 right-0 m1 @click="emit('close')"> <button btn-action-icon absolute top-0 right-0 m1 aria-label="Close" @click="emit('close')">
<div i-ri:close-fill /> <div i-ri:close-fill />
</button> </button>

View file

@ -123,7 +123,7 @@ function onTransitionEnd() {
> >
<slot /> <slot />
</div> </div>
<button v-if="type === 'preview'" btn-action-icon bg="black/20" hover:bg="black/40" dark:bg="white/10" dark:hover:bg="white/20" absolute top-0 right-0 m1 @click="close"> <button v-if="type === 'preview'" btn-action-icon bg="black/20" aria-label="Close" hover:bg="black/40" dark:bg="white/10" dark:hover:bg="white/20" absolute top-0 right-0 m1 @click="close">
<div i-ri:close-fill text-white /> <div i-ri:close-fill text-white />
</button> </button>
</div> </div>

View file

@ -8,13 +8,14 @@ const buildTimeAgo = useTimeAgo(buildTime)
<footer p4 text-sm text-secondary-light flex="~ col"> <footer p4 text-sm text-secondary-light flex="~ col">
<div flex="~ gap2" items-center mb4> <div flex="~ gap2" items-center mb4>
<CommonTooltip :content="t('nav_footer.toggle_theme')"> <CommonTooltip :content="t('nav_footer.toggle_theme')">
<button flex i-ri:sun-line dark:i-ri:moon-line text-lg @click="toggleDark()" /> <button flex i-ri:sun-line dark:i-ri:moon-line text-lg :aria-label="t('nav_footer.toggle_theme')" @click="toggleDark()" />
</CommonTooltip> </CommonTooltip>
<CommonTooltip :content="t('nav_footer.zen_mode')"> <CommonTooltip :content="t('nav_footer.zen_mode')">
<button <button
flex flex
text-lg text-lg
:class="isZenMode ? 'i-ri:layout-right-2-line' : 'i-ri:layout-right-line'" :class="isZenMode ? 'i-ri:layout-right-2-line' : 'i-ri:layout-right-line'"
:aria-label="t('nav_footer.zen_mode')"
@click="toggleZenMode()" @click="toggleZenMode()"
/> />
</CommonTooltip> </CommonTooltip>

View file

@ -7,7 +7,7 @@ const featureFlags = useFeatureFlags()
<template> <template>
<CommonTooltip :content="t('nav_footer.select_feature_flags')"> <CommonTooltip :content="t('nav_footer.select_feature_flags')">
<CommonDropdown> <CommonDropdown>
<button flex> <button flex :aria-label="t('nav_footer.select_feature_flags')">
<div i-ri:flag-line text-lg /> <div i-ri:flag-line text-lg />
</button> </button>

View file

@ -15,7 +15,7 @@ const handleLocale = async (locale: string) => {
<template> <template>
<CommonTooltip :content="t('nav_footer.select_language')"> <CommonTooltip :content="t('nav_footer.select_language')">
<CommonDropdown> <CommonDropdown>
<button flex> <button flex :aria-label="t('nav_footer.select_language')">
<div i-ri:earth-line text-lg /> <div i-ri:earth-line text-lg />
</button> </button>

View file

@ -203,7 +203,7 @@ const { isOverDropZone } = useDropZone(dropZoneRef, onDrop)
border="t base" border="t base"
> >
<CommonTooltip placement="bottom" :content="$t('tooltip.add_media')"> <CommonTooltip placement="bottom" :content="$t('tooltip.add_media')">
<button btn-action-icon @click="pickAttachments"> <button btn-action-icon :aria-label="$t('tooltip.add_media')" @click="pickAttachments">
<div i-ri:image-add-line /> <div i-ri:image-add-line />
</button> </button>
</CommonTooltip> </CommonTooltip>
@ -212,6 +212,7 @@ const { isOverDropZone } = useDropZone(dropZoneRef, onDrop)
<CommonTooltip placement="bottom" :content="$t('tooltip.toggle_code_block')"> <CommonTooltip placement="bottom" :content="$t('tooltip.toggle_code_block')">
<button <button
btn-action-icon btn-action-icon
:aria-label="$t('tooltip.toggle_code_block')"
:class="editor.isActive('codeBlock') ? 'op100' : 'op50'" :class="editor.isActive('codeBlock') ? 'op100' : 'op50'"
@click="editor?.chain().focus().toggleCodeBlock().run()" @click="editor?.chain().focus().toggleCodeBlock().run()"
> >
@ -223,7 +224,7 @@ const { isOverDropZone } = useDropZone(dropZoneRef, onDrop)
<div flex-auto /> <div flex-auto />
<CommonTooltip placement="bottom" :content="$t('tooltip.add_content_warning')"> <CommonTooltip placement="bottom" :content="$t('tooltip.add_content_warning')">
<button btn-action-icon @click="toggleSensitive"> <button btn-action-icon :aria-label="$t('tooltip.add_content_warning')" @click="toggleSensitive">
<div v-if="draft.params.sensitive" i-ri:alarm-warning-fill text-orange /> <div v-if="draft.params.sensitive" i-ri:alarm-warning-fill text-orange />
<div v-else i-ri:alarm-warning-line /> <div v-else i-ri:alarm-warning-line />
</button> </button>
@ -231,7 +232,7 @@ const { isOverDropZone } = useDropZone(dropZoneRef, onDrop)
<CommonTooltip placement="bottom" :content="$t('tooltip.change_content_visibility')"> <CommonTooltip placement="bottom" :content="$t('tooltip.change_content_visibility')">
<CommonDropdown> <CommonDropdown>
<button btn-action-icon w-12> <button :aria-label="$t('tooltip.change_content_visibility')" btn-action-icon w-12>
<div :class="currentVisibility.icon" /> <div :class="currentVisibility.icon" />
<div i-ri:arrow-down-s-line text-sm text-secondary mr--1 /> <div i-ri:arrow-down-s-line text-sm text-secondary mr--1 />
</button> </button>

View file

@ -61,6 +61,7 @@ const aspectRatio = computed(() => {
focus:outline-none focus:outline-none
focus:ring="2 primary inset" focus:ring="2 primary inset"
rounded-lg rounded-lg
aria-label="Open image preview dialog"
@click="openImagePreviewDialog({ @click="openImagePreviewDialog({
src, src,
alt: attachment.description!, alt: attachment.description!,

View file

@ -25,6 +25,7 @@ const toggleFollowTag = async () => {
<button <button
rounded group focus:outline-none rounded group focus:outline-none
hover:text-primary focus-visible:text-primary hover:text-primary focus-visible:text-primary
:aria-label="tag.following ? `Unfollow ${tag.name} tag` : `Follow ${tag.name} tag`"
@click="toggleFollowTag()" @click="toggleFollowTag()"
> >
<CommonTooltip placement="bottom" :content="tag.following ? 'Unfollow' : 'Follow'"> <CommonTooltip placement="bottom" :content="tag.following ? 'Unfollow' : 'Follow'">

View file

@ -24,6 +24,7 @@ const switchUser = (user: UserLogin) => {
<button <button
flex rounded px4 py3 text-left flex rounded px4 py3 text-left
hover:bg-active cursor-pointer transition-100 hover:bg-active cursor-pointer transition-100
aria-label="Switch user"
@click="switchUser(user)" @click="switchUser(user)"
> >
<AccountInfo :account="user.account" /> <AccountInfo :account="user.account" />

View file

@ -30,6 +30,7 @@
m5 p2 rounded-full text-start w-full m5 p2 rounded-full text-start w-full
hover:bg-active cursor-pointer transition-100 hover:bg-active cursor-pointer transition-100
class="md:(w-7.5/10 rounded-5)" class="md:(w-7.5/10 rounded-5)"
aria-label="Switch account"
> >
<AccountInfo :account="currentUser.account" md:flex="col" md:break-words /> <AccountInfo :account="currentUser.account" md:flex="col" md:break-words />
</button> </button>