teutat3s/elk
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

fix(a11y): add more aria labels

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

2
components/account/AccountMoreButton.vue
View file

@ -37,7 +37,7 @@ const toggleBlockDomain = async () => {
<template>
<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 i-ri:more-2-fill />
</div>

2
components/help/HelpPreview.vue
View file

@ -40,7 +40,7 @@ const teams: Team[] = [
<template>
<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 />
</button>

2
components/modal/ModalDialog.vue
View file

@ -123,7 +123,7 @@ function onTransitionEnd() {
>
<slot />
</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 />
</button>
</div>

3
components/nav/NavFooter.vue
View file

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

2
components/nav/SelectFeatureFlags.vue
View file

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

2
components/nav/SelectLanguage.vue
View file

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

7
components/publish/PublishWidget.vue
View file

@ -203,7 +203,7 @@ const { isOverDropZone } = useDropZone(dropZoneRef, onDrop)
border="t base"
>
<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 />
</button>
</CommonTooltip>
@ -212,6 +212,7 @@ const { isOverDropZone } = useDropZone(dropZoneRef, onDrop)
<CommonTooltip placement="bottom" :content="$t('tooltip.toggle_code_block')">
<button
btn-action-icon
:aria-label="$t('tooltip.toggle_code_block')"
:class="editor.isActive('codeBlock') ? 'op100' : 'op50'"
@click="editor?.chain().focus().toggleCodeBlock().run()"
>
@ -223,7 +224,7 @@ const { isOverDropZone } = useDropZone(dropZoneRef, onDrop)
<div flex-auto />
<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-else i-ri:alarm-warning-line />
</button>
@ -231,7 +232,7 @@ const { isOverDropZone } = useDropZone(dropZoneRef, onDrop)
<CommonTooltip placement="bottom" :content="$t('tooltip.change_content_visibility')">
<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 i-ri:arrow-down-s-line text-sm text-secondary mr--1 />
</button>

1
components/status/StatusAttachment.vue
View file

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

1
components/tag/TagActionButton.vue
View file

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

1
components/user/UserSwitcher.vue
View file

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

1
layouts/default.vue
View file

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