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

components/modal/ModalDialog.vue

@@ -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,
         }"

components/publish/PublishAttachment.vue

@@ -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>

components/publish/PublishWidget.vue

@@ -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)"
           />