mirror of https://github.com/elk-zone/elk.git
feat(a11y): focus trap for modal dialogs (#446)
This commit is contained in:
parent
8aa2b3b084
commit
134131902c
|
@ -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,
|
||||
}"
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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)"
|
||||
/>
|
||||
|
|
Loading…
Reference in New Issue