fix(ui,a11y): focus lost when navigating using the keyboard (tab) (#2766)
parent
25fb7c1c97
commit
e53f651fbb
|
@ -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">
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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">
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -13,6 +13,7 @@ defineProps<Props>()
|
|||
v-if="isHydrated"
|
||||
v-bind="$attrs"
|
||||
auto-hide
|
||||
no-auto-focus
|
||||
>
|
||||
<slot />
|
||||
<template #popper>
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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"
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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 }}
|
||||
|
|
|
@ -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)"
|
||||
|
|
|
@ -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"
|
||||
|
|
Loading…
Reference in New Issue