feat(a11y): focus trap for modal dialogs (#446)
parent
8aa2b3b084
commit
134131902c
|
@ -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,
|
||||||
}"
|
}"
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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)"
|
||||||
/>
|
/>
|
||||||
|
|
Loading…
Reference in New Issue