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

View File

@ -5,6 +5,7 @@ const props = withDefaults(defineProps<{
attachment: Attachment attachment: Attachment
alt?: string alt?: string
removable?: boolean removable?: boolean
dialogLabelledBy?: string
}>(), { }>(), {
removable: true, removable: true,
}) })
@ -38,10 +39,15 @@ const description = ref(props.attachment.description ?? '')
Edit Edit
</button> </button>
</div> </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 gap-5>
<div flex flex-col gap-2 justify-between> <div flex flex-col gap-2 justify-between>
<h1 font-bold> <h1 id="edit-attachment" font-bold>
Description Description
</h1> </h1>
<div flex flex-col gap-2> <div flex flex-col gap-2>

View File

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