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

fix(ui,a11y): focus lost when navigating using the keyboard (tab) (#2766)

Browse source
This commit is contained in:
Joaquín Sánchez 2024-04-06 05:58:50 +02:00 committed by GitHub
parent 25fb7c1c97
commit e53f651fbb
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
14 changed files with 31 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
components/account/AccountBotIndicator.vue
View file

@ -11,7 +11,7 @@ defineProps<{
text-secondary-light
>
<slot name="prepend" />
<CommonTooltip no-auto-focus :content="$t('account.bot')" :disabled="showLabel">
<CommonTooltip :content="$t('account.bot')" :disabled="showLabel">
<div i-mdi:robot-outline />
</CommonTooltip>
<div v-if="showLabel">

4
components/account/AccountFollowRequestButton.vue
View file

@ -38,7 +38,7 @@ async function rejectFollowRequest() {
<template>
<div flex gap-4>
<template v-if="relationship?.requestedBy">
<CommonTooltip :content="$t('account.authorize')" no-auto-focus>
<CommonTooltip :content="$t('account.authorize')">
<button
type="button"
rounded-full text-sm p2 border-1
@ -48,7 +48,7 @@ async function rejectFollowRequest() {
<span block text-current i-ri:check-fill />
</button>
</CommonTooltip>
<CommonTooltip :content="$t('account.reject')" no-auto-focus>
<CommonTooltip :content="$t('account.reject')">
<button
type="button"
rounded-full text-sm p2 border-1

2
components/account/AccountHeader.vue
View file

@ -196,7 +196,7 @@ async function copyAccountName() {
<div flex items-center gap-1>
<AccountHandle :account="account" overflow-unset line-clamp-unset />
<CommonTooltip placement="bottom" :content="$t('account.copy_account_name')" no-auto-focus flex>
<CommonTooltip placement="bottom" :content="$t('account.copy_account_name')" flex>
<button text-secondary-light text-sm :class="isCopied ? 'i-ri:check-fill text-green' : 'i-ri:file-copy-line'" @click="copyAccountName">
<span sr-only>{{ $t('account.copy_account_name') }}</span>
</button>

1
components/account/AccountHoverWrapper.vue
View file

@ -58,6 +58,7 @@ const userSettings = useUserSettings()
:delay="{ show: 500, hide: 100 }"
v-bind="$attrs"
:close-on-content-click="false"
no-auto-focus
>
<slot />
<template #popper>

2
components/account/AccountLockIndicator.vue
View file

@ -13,7 +13,7 @@ const { t } = useI18n()
text-secondary-light
>
<slot name="prepend" />
<CommonTooltip no-auto-focus content="Lock" :disabled="showLabel">
<CommonTooltip content="Lock" :disabled="showLabel">
<div i-ri:lock-line />
</CommonTooltip>
<div v-if="showLabel">

1
components/account/TagHoverWrapper.vue
View file

@ -33,6 +33,7 @@ const userSettings = useUserSettings()
:delay="{ show: 500, hide: 100 }"
v-bind="$attrs"
:close-on-content-click="false"
no-auto-focus
>
<slot />
<template #popper>

2
components/common/CommonRouteTabs.vue
View file

@ -46,7 +46,7 @@ useCommands(() => command
</template>
<template v-if="isHydrated && moreOptions?.options?.length">
<CommonDropdown placement="bottom" flex cursor-pointer mx-1.25rem>
<CommonTooltip placement="top" no-auto-focus :content="moreOptions.tooltip || t('action.more')">
<CommonTooltip placement="top" :content="moreOptions.tooltip || t('action.more')">
<button
cursor-pointer
flex

1
components/common/CommonTooltip.vue
View file

@ -13,6 +13,7 @@ defineProps<Props>()
v-if="isHydrated"
v-bind="$attrs"
auto-hide
no-auto-focus
>
<slot />
<template #popper>

1
components/list/Account.vue
View file

@ -39,7 +39,6 @@ async function edit() {
<CommonTooltip
:content="isRemoved ? $t('list.add_account') : $t('list.remove_account')"
:hover="isRemoved ? 'text-green' : 'text-red'"
no-auto-focus
>
<button
text-sm p2 border-1 transition-colors

10
components/list/ListEntry.vue
View file

@ -113,7 +113,7 @@ onDeactivated(cancelEdit)
bg-base border="~ base" h10 m2 ps-1 pe-4 rounded-3 w-full flex="~ row"
items-center relative focus-within:box-shadow-outline gap-3
>
<CommonTooltip v-if="isEditing" :content="$t('list.cancel_edit')" no-auto-focus>
<CommonTooltip v-if="isEditing" :content="$t('list.cancel_edit')">
<button
type="button"
rounded-full text-sm p2 transition-colors
@ -136,7 +136,7 @@ onDeactivated(cancelEdit)
{{ form.title }}
</NuxtLink>
<div mr4 flex gap2>
<CommonTooltip v-if="isEditing" :content="$t('list.save')" no-auto-focus>
<CommonTooltip v-if="isEditing" :content="$t('list.save')">
<button
type="submit"
text-sm p2 border-1 transition-colors
@ -152,7 +152,7 @@ onDeactivated(cancelEdit)
</template>
</button>
</CommonTooltip>
<CommonTooltip v-else :content="$t('list.edit')" no-auto-focus>
<CommonTooltip v-else :content="$t('list.edit')">
<button
ref="editBtn"
type="button"
@ -164,7 +164,7 @@ onDeactivated(cancelEdit)
<span block text-current i-ri:edit-2-line class="rtl-flip" />
</button>
</CommonTooltip>
<CommonTooltip :content="$t('list.delete')" no-auto-focus>
<CommonTooltip :content="$t('list.delete')">
<button
type="button"
text-sm p2 border-1 transition-colors
@ -192,7 +192,7 @@ onDeactivated(cancelEdit)
<div aria-hidden="true" i-ri:error-warning-fill />
<p>{{ $t(`list.${isEditing ? 'edit_error' : 'delete_error'}`) }}</p>
</div>
<CommonTooltip placement="bottom" :content="$t('list.clear_error')" no-auto-focus>
<CommonTooltip placement="bottom" :content="$t('list.clear_error')">
<button
flex rounded-4 p1 hover:bg-active cursor-pointer transition-100 :aria-label="$t('list.clear_error')"
@click="clearError"

18
components/publish/PublishWidget.vue
View file

@ -389,26 +389,26 @@ onDeactivated(() => {
</button>
</PublishEmojiPicker>
<CommonTooltip v-if="draft.params.poll === undefined" placement="top" :content="$t('tooltip.add_media')" no-auto-focus>
<CommonTooltip v-if="draft.params.poll === undefined" placement="top" :content="$t('tooltip.add_media')">
<button btn-action-icon :aria-label="$t('tooltip.add_media')" @click="pickAttachments">
<div i-ri:image-add-line />
</button>
</CommonTooltip>
<template v-if="draft.attachments.length === 0">
<CommonTooltip v-if="!draft.params.poll" placement="top" :content="$t('polls.create')" no-auto-focus>
<CommonTooltip v-if="!draft.params.poll" placement="top" :content="$t('polls.create')">
<button btn-action-icon :aria-label="$t('polls.create')" @click="draft.params.poll = { options: [''], expiresIn: expiresInOptions[expiresInDefaultOptionIndex].seconds }">
<div i-ri:chat-poll-line />
</button>
</CommonTooltip>
<div v-else rounded-full b-1 border-dark flex="~ row" gap-1>
<CommonTooltip placement="top" :content="$t('polls.cancel')" no-auto-focus>
<CommonTooltip placement="top" :content="$t('polls.cancel')">
<button btn-action-icon b-r border-dark :aria-label="$t('polls.cancel')" @click="draft.params.poll = undefined">
<div i-ri:close-line />
</button>
</CommonTooltip>
<CommonDropdown placement="top">
<CommonTooltip placement="top" :content="$t('polls.settings')" no-auto-focus>
<CommonTooltip placement="top" :content="$t('polls.settings')">
<button :aria-label="$t('polls.settings')" btn-action-icon w-12>
<div i-ri:list-settings-line />
<div i-ri:arrow-down-s-line text-sm text-secondary me--1 />
@ -422,7 +422,7 @@ onDeactivated(() => {
</template>
</CommonDropdown>
<CommonDropdown placement="bottom">
<CommonTooltip placement="top" :content="$t('polls.expiration')" no-auto-focus>
<CommonTooltip placement="top" :content="$t('polls.expiration')">
<button :aria-label="$t('polls.expiration')" btn-action-icon w-12>
<div i-ri:hourglass-line />
<div i-ri:arrow-down-s-line text-sm text-secondary me--1 />
@ -447,7 +447,7 @@ onDeactivated(() => {
<PublishCharacterCounter :max="characterLimit" :length="characterCount" />
<CommonTooltip placement="top" :content="$t('tooltip.change_language')" no-auto-focus>
<CommonTooltip placement="top" :content="$t('tooltip.change_language')">
<CommonDropdown placement="bottom" auto-boundary-max-size>
<button btn-action-icon :aria-label="$t('tooltip.change_language')" w-max mr1>
<span v-if="postLanguageDisplay" text-secondary text-sm ml1>{{ postLanguageDisplay }}</span>
@ -461,7 +461,7 @@ onDeactivated(() => {
</CommonDropdown>
</CommonTooltip>
<CommonTooltip placement="top" :content="$t('tooltip.add_content_warning')" no-auto-focus>
<CommonTooltip placement="top" :content="$t('tooltip.add_content_warning')">
<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 />
@ -477,7 +477,7 @@ onDeactivated(() => {
</template>
</PublishVisibilityPicker>
<CommonTooltip v-if="failedMessages.length > 0" id="publish-failed-tooltip" placement="top" :content="$t('tooltip.publish_failed')" no-auto-focus>
<CommonTooltip v-if="failedMessages.length > 0" id="publish-failed-tooltip" placement="top" :content="$t('tooltip.publish_failed')">
<button
btn-danger rounded-3 text-sm w-full flex="~ gap1" items-center md:w-fit aria-describedby="publish-failed-tooltip"
>
@ -488,7 +488,7 @@ onDeactivated(() => {
</button>
</CommonTooltip>
<CommonTooltip v-else id="publish-tooltip" placement="top" :content="$t('tooltip.add_publishable_content')" :disabled="!(isPublishDisabled || isExceedingCharacterLimit)" no-auto-focus>
<CommonTooltip v-else id="publish-tooltip" placement="top" :content="$t('tooltip.add_publishable_content')" :disabled="!(isPublishDisabled || isExceedingCharacterLimit)">
<button
btn-solid rounded-3 text-sm w-full flex="~ gap1" items-center
md:w-fit

2
components/status/StatusCard.vue
View file

@ -160,7 +160,7 @@ const forceShow = ref(false)
<div flex="~ gap1" items-center>
<StatusVisibilityIndicator v-if="status.visibility !== 'public'" :status="status" />
<div flex>
<CommonTooltip :content="createdAt" no-auto-focus>
<CommonTooltip :content="createdAt">
<NuxtLink :title="status.createdAt" :href="statusRoute.href" @click.prevent="go($event)">
<time text-sm ws-nowrap hover:underline :datetime="status.createdAt">
{{ timeago }}

2
pages/[[server]]/lists.vue
View file

@ -129,7 +129,7 @@ onDeactivated(() => clearError(false))
<div aria-hidden="true" i-ri:error-warning-fill />
<p>{{ $t('list.error') }}</p>
</div>
<CommonTooltip placement="bottom" :content="$t('list.clear_error')" no-auto-focus>
<CommonTooltip placement="bottom" :content="$t('list.clear_error')">
<button
flex rounded-4 p1 hover:bg-active cursor-pointer transition-100 :aria-label="$t('list.clear_error')"
@click="clearError(true)"

6
tests/nuxt/__snapshots__/content-rich.test.ts.snap
View file

@ -185,6 +185,7 @@ exports[`content-rich > hashtag adds bdi 1`] = `
placement="bottom-start"
class="inline-block"
close-on-content-click="false"
no-auto-focus
><a
class="mention hashtag"
rel="nofollow noopener noreferrer"
@ -206,6 +207,7 @@ exports[`content-rich > hashtag doesn't add 2 bdi 1`] = `
placement="bottom-start"
class="inline-block"
close-on-content-click="false"
no-auto-focus
><a
class="mention hashtag"
rel="nofollow noopener noreferrer"
@ -328,6 +330,7 @@ exports[`content-rich > root p includes dir="auto" attr when mixed content 1`] =
placement="bottom-start"
class="inline-block"
close-on-content-click="false"
no-auto-focus
><a
class="mention hashtag"
rel="nofollow noopener noreferrer"
@ -341,6 +344,7 @@ exports[`content-rich > root p includes dir="auto" attr when mixed content 1`] =
placement="bottom-start"
class="inline-block"
close-on-content-click="false"
no-auto-focus
><a
class="mention hashtag"
rel="nofollow noopener noreferrer"
@ -388,6 +392,7 @@ exports[`content-rich > root p includes dir="auto" attr when mixed content 1`] =
placement="bottom-start"
class="inline-block"
close-on-content-click="false"
no-auto-focus
><a
class="mention hashtag"
rel="nofollow noopener noreferrer"
@ -401,6 +406,7 @@ exports[`content-rich > root p includes dir="auto" attr when mixed content 1`] =
placement="bottom-start"
class="inline-block"
close-on-content-click="false"
no-auto-focus
><a
class="mention hashtag"
rel="nofollow noopener noreferrer"