[6.x] Give modals a dialog role and accessible name

resources/js/components/ui/Modal/Modal.vue

@@ -1,7 +1,7 @@
 <script setup>
 import { cva } from 'cva';
 import { hasComponent } from '@/composables/has-component.js';
-import { computed, getCurrentInstance, nextTick, onBeforeUnmount, onMounted, provide, ref, useAttrs, useSlots, watch } from 'vue';
+import { computed, getCurrentInstance, nextTick, onBeforeUnmount, onMounted, provide, ref, useAttrs, useId, useSlots, watch } from 'vue';
 import Icon from '../Icon/Icon.vue';
 import Heading from '../Heading.vue';
 import { portals, keys } from '@api';
@@ -64,6 +64,8 @@ const escBinding = ref(null);
 
 const instance = getCurrentInstance();
 const hasModalTitleComponent = hasComponent('ModalTitle');
+const titleId = useId();
+const labelledBy = computed(() => hasModalTitleComponent.value || props.title ? titleId : undefined);
 const isUsingOpenProp = computed(() => instance?.vnode.props?.hasOwnProperty('open'));
 const portal = computed(() => modal.value ? `#portal-target-${modal.value.id}` : null);
 const isTopPortal = computed(() => portals.all()[portals.all().length - 1].id === modal.value.id);
@@ -164,6 +166,7 @@ defineExpose({
 });
 
 provide('closeModal', close);
+provide('modalTitleId', titleId);
 </script>
 
 <template>
@@ -190,9 +193,9 @@ provide('closeModal', close);
                 leave-from-class="opacity-100 scale-100"
                 leave-to-class="opacity-0 scale-95"
             >
-                <div ref="modalContent" v-if="visible" v-bind="restAttrs" :class="[modalClasses, attrs.class]" data-ui-modal-content>
+                <div ref="modalContent" v-if="visible" role="dialog" aria-modal="true" :aria-labelledby="labelledBy" v-bind="restAttrs" :class="[modalClasses, attrs.class]" data-ui-modal-content>
                     <div class="relative space-y-3 rounded-xl overflow-auto max-h-[60vh] border border-gray-400/60 bg-white p-4 shadow-[0_1px_16px_-2px_rgba(63,63,71,0.2)] dark:border-none dark:bg-gray-800 dark:shadow-[0_1px_16px_-2px_rgba(0,0,0,.5)] dark:inset-shadow-2xs dark:inset-shadow-white/10">
-                        <div v-if="!hasModalTitleComponent && (title || icon)" data-ui-modal-title class="flex items-center gap-2">
+                        <div v-if="!hasModalTitleComponent && (title || icon)" :id="titleId" data-ui-modal-title class="flex items-center gap-2">
                             <Icon :name="icon" v-if="icon" class="size-4" />
                             <Heading :text="title" size="lg" class="font-semibold text-gray-950 dark:text-gray-100" />
                         </div>

resources/js/components/ui/Modal/Title.vue

@@ -1,11 +1,15 @@
 <script setup>
+import { inject } from 'vue';
+
 defineOptions({
     name: 'ModalTitle',
 });
+
+const titleId = inject('modalTitleId', null);
 </script>
 
 <template>
-    <div data-ui-modal-title>
+    <div :id="titleId" data-ui-modal-title>
         <slot />
     </div>
 </template>

resources/js/tests/components/ui/Modal.test.js

@@ -0,0 +1,47 @@
+import { flushPromises, mount } from '@vue/test-utils';
+import { afterEach, expect, test } from 'vitest';
+import { h } from 'vue';
+import { portals } from '@api';
+import { Modal, ModalTitle } from '@/components/ui';
+
+async function openModal(props = {}, options = {}) {
+    const wrapper = mount(Modal, { props: { open: true, ...props }, ...options });
+
+    const target = document.createElement('div');
+    target.id = `portal-target-${portals.all()[portals.all().length - 1].id}`;
+    document.body.appendChild(target);
+
+    await flushPromises();
+
+    return wrapper;
+}
+
+afterEach(() => {
+    document.body.innerHTML = '';
+});
+
+test('content is a dialog labelled by its title', async () => {
+    await openModal({ title: 'Delete Entry' });
+
+    const content = document.querySelector('[data-ui-modal-content]');
+
+    expect(content.getAttribute('role')).toBe('dialog');
+    expect(content.getAttribute('aria-modal')).toBe('true');
+    expect(document.getElementById(content.getAttribute('aria-labelledby')).textContent).toContain('Delete Entry');
+});
+
+test('content is labelled by the modal title component', async () => {
+    await openModal({}, { slots: { default: h(ModalTitle, () => 'Remove Page') } });
+
+    const content = document.querySelector('[data-ui-modal-content]');
+
+    expect(document.getElementById(content.getAttribute('aria-labelledby')).textContent).toContain('Remove Page');
+});
+
+test('content has no accessible name when there is no title', async () => {
+    await openModal();
+
+    const content = document.querySelector('[data-ui-modal-content]');
+
+    expect(content.hasAttribute('aria-labelledby')).toBe(false);
+});