zio/elk
2
0
Fork 0
Code Releases 2 Packages 1 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
Download patch file Download diff file Expand all files Collapse all files

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