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

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"