feat(a11y): focus trap for modal dialogs (#446)

zio/stable
Joaquín Sánchez 2022-12-16 20:55:31 +01:00 committed by GitHub
parent 8aa2b3b084
commit 134131902c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 34 additions and 5 deletions

View File

@ -1,4 +1,5 @@
<script lang="ts" setup>
import { useFocusTrap } from '@vueuse/integrations/useFocusTrap'
import { useDeactivated } from '~/composables/lifecycle'
export interface Props {
@ -32,6 +33,11 @@ export interface Props {
* @default false
*/
keepAlive?: boolean
/**
* The aria-labelledby id for the dialog.
*/
dialogLabelledBy?: string
}
const props = withDefaults(defineProps<Props>(), {
@ -42,7 +48,7 @@ const props = withDefaults(defineProps<Props>(), {
})
const emits = defineEmits<{
/** v-model dislog visibility */
/** v-model dialog visibility */
(event: 'update:modelValue', value: boolean): void
}>()
@ -55,6 +61,13 @@ const route = useRoute()
const elDialogMain = ref<HTMLDivElement>()
const elDialogRoot = ref<HTMLDivElement>()
const { activate } = useFocusTrap(elDialogRoot, {
immediate: true,
allowOutsideClick: true,
clickOutsideDeactivates: true,
escapeDeactivates: true,
})
defineExpose({
elDialogRoot,
elDialogMain,
@ -102,6 +115,11 @@ const isVShow = computed(() => {
const bindTypeToAny = ($attrs: any) => $attrs as any
const trapFocusDialog = () => {
if (isVShow.value)
nextTick().then(() => activate())
}
useEventListener('keydown', (e: KeyboardEvent) => {
if (!visible.value)
return
@ -119,13 +137,15 @@ export default {
</script>
<template>
<SafeTeleport to="#teleport-end">
<SafeTeleport to="#teleport-end" @transitionend="trapFocusDialog">
<!-- Dialog component -->
<Transition name="dialog-visible">
<div
v-if="isVIf"
v-show="isVShow"
ref="elDialogRoot"
aria-modal="true"
:aria-labelledby="dialogLabelledBy"
:style="{
'z-index': zIndex,
}"

View File

@ -5,6 +5,7 @@ const props = withDefaults(defineProps<{
attachment: Attachment
alt?: string
removable?: boolean
dialogLabelledBy?: string
}>(), {
removable: true,
})
@ -38,10 +39,15 @@ const description = ref(props.attachment.description ?? '')
Edit
</button>
</div>
<ModalDialog v-model="isEditDialogOpen" py-6 px-6 max-w-300>
<ModalDialog
v-model="isEditDialogOpen"
:dialog-labelled-by="dialogLabelledBy"
py-6
px-6 max-w-300
>
<div flex gap-5>
<div flex flex-col gap-2 justify-between>
<h1 font-bold>
<h1 id="edit-attachment" font-bold>
Description
</h1>
<div flex flex-col gap-2>

View File

@ -10,6 +10,7 @@ const {
initial = getDefaultDraft() as never /* Bug of vue-core */,
expanded: _expanded = false,
placeholder,
dialogLabelledBy,
} = defineProps<{
draftKey: string
initial?: () => Draft
@ -17,6 +18,7 @@ const {
inReplyToId?: string
inReplyToVisibility?: StatusVisibility
expanded?: boolean
dialogLabelledBy?: string
}>()
const emit = defineEmits(['published'])
@ -168,7 +170,7 @@ defineExpose({
<div v-if="currentUser" flex="~ col gap-4" py4 px2 sm:px4>
<template v-if="draft.editingStatus">
<div flex="~ col gap-1">
<div text-secondary self-center>
<div id="state-editing" text-secondary self-center>
{{ $t('state.editing') }}
</div>
<StatusCard :status="draft.editingStatus" :actions="false" :hover="false" px-0 />
@ -217,6 +219,7 @@ defineExpose({
<PublishAttachment
v-for="(att, idx) in draft.attachments" :key="att.id"
:attachment="att"
:dialog-labelled-by="dialogLabelledBy ?? (draft.editingStatus ? 'state-editing' : null)"
@remove="removeAttachment(idx)"
@set-description="setDescription(att, $event)"
/>