From f121eb777d332459b67e520dd89dafe4dedbecb1 Mon Sep 17 00:00:00 2001
From: Lazizbek Ergashev <lazerg2@gmail.com>
Date: Tue, 8 Sep 2026 03:18:48 +0500
Subject: [PATCH 1/2] Give modals a dialog role and accessible name

---
 resources/js/components/ui/Modal/Modal.vue    |  9 +++--
 resources/js/components/ui/Modal/Title.vue    |  6 ++-
 .../js/tests/components/ui/Modal.test.js      | 39 +++++++++++++++++++
 3 files changed, 50 insertions(+), 4 deletions(-)
 create mode 100644 resources/js/tests/components/ui/Modal.test.js

diff --git a/resources/js/components/ui/Modal/Modal.vue b/resources/js/components/ui/Modal/Modal.vue
index 62d2d701553..df8b807c93a 100644
--- a/resources/js/components/ui/Modal/Modal.vue
+++ b/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>
diff --git a/resources/js/components/ui/Modal/Title.vue b/resources/js/components/ui/Modal/Title.vue
index 0c6e9dc8e07..d8a29fc0374 100644
--- a/resources/js/components/ui/Modal/Title.vue
+++ b/resources/js/components/ui/Modal/Title.vue
@@ -1,11 +1,15 @@
 <script setup>
+import { inject } from 'vue';
+
 defineOptions({
     name: 'ModalTitle',
 });
+
+const titleId = inject('modalTitleId', undefined);
 </script>
 
 <template>
-    <div data-ui-modal-title>
+    <div :id="titleId" data-ui-modal-title>
         <slot />
     </div>
 </template>
diff --git a/resources/js/tests/components/ui/Modal.test.js b/resources/js/tests/components/ui/Modal.test.js
new file mode 100644
index 00000000000..7bcc026c68e
--- /dev/null
+++ b/resources/js/tests/components/ui/Modal.test.js
@@ -0,0 +1,39 @@
+import { mount } from '@vue/test-utils';
+import { expect, test } from 'vitest';
+import { h, nextTick } from 'vue';
+import { portals } from '@api';
+import { Modal, ModalTitle } from '@/components/ui';
+
+async function openModal(options = {}) {
+    const wrapper = mount(Modal, { props: { open: true }, ...options });
+
+    const target = document.createElement('div');
+    target.id = `portal-target-${portals.all()[portals.all().length - 1].id}`;
+    document.body.appendChild(target);
+
+    await nextTick();
+    await nextTick();
+    await nextTick();
+
+    return wrapper;
+}
+
+test('content is a dialog labelled by its title', async () => {
+    await openModal({ props: { open: true, 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, () => 'Delete Entry') },
+    });
+
+    const content = document.querySelector('[data-ui-modal-content]');
+
+    expect(document.getElementById(content.getAttribute('aria-labelledby')).textContent).toContain('Delete Entry');
+});

From 8394debdc15c1db840c79060c4f0b07876cbd352 Mon Sep 17 00:00:00 2001
From: Lazizbek Ergashev <lazerg2@gmail.com>
Date: Tue, 8 Sep 2026 03:23:59 +0500
Subject: [PATCH 2/2] Clean up the modal DOM between tests

---
 resources/js/components/ui/Modal/Modal.vue    |  2 +-
 resources/js/components/ui/Modal/Title.vue    |  2 +-
 .../js/tests/components/ui/Modal.test.js      | 34 ++++++++++++-------
 3 files changed, 23 insertions(+), 15 deletions(-)

diff --git a/resources/js/components/ui/Modal/Modal.vue b/resources/js/components/ui/Modal/Modal.vue
index df8b807c93a..cf87867a034 100644
--- a/resources/js/components/ui/Modal/Modal.vue
+++ b/resources/js/components/ui/Modal/Modal.vue
@@ -65,7 +65,7 @@ const escBinding = ref(null);
 const instance = getCurrentInstance();
 const hasModalTitleComponent = hasComponent('ModalTitle');
 const titleId = useId();
-const labelledBy = computed(() => (hasModalTitleComponent.value || props.title) ? titleId : undefined);
+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);
diff --git a/resources/js/components/ui/Modal/Title.vue b/resources/js/components/ui/Modal/Title.vue
index d8a29fc0374..c12941effca 100644
--- a/resources/js/components/ui/Modal/Title.vue
+++ b/resources/js/components/ui/Modal/Title.vue
@@ -5,7 +5,7 @@ defineOptions({
     name: 'ModalTitle',
 });
 
-const titleId = inject('modalTitleId', undefined);
+const titleId = inject('modalTitleId', null);
 </script>
 
 <template>
diff --git a/resources/js/tests/components/ui/Modal.test.js b/resources/js/tests/components/ui/Modal.test.js
index 7bcc026c68e..bd15f86961e 100644
--- a/resources/js/tests/components/ui/Modal.test.js
+++ b/resources/js/tests/components/ui/Modal.test.js
@@ -1,25 +1,27 @@
-import { mount } from '@vue/test-utils';
-import { expect, test } from 'vitest';
-import { h, nextTick } from 'vue';
+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(options = {}) {
-    const wrapper = mount(Modal, { props: { open: true }, ...options });
+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 nextTick();
-    await nextTick();
-    await nextTick();
+    await flushPromises();
 
     return wrapper;
 }
 
+afterEach(() => {
+    document.body.innerHTML = '';
+});
+
 test('content is a dialog labelled by its title', async () => {
-    await openModal({ props: { open: true, title: 'Delete Entry' } });
+    await openModal({ title: 'Delete Entry' });
 
     const content = document.querySelector('[data-ui-modal-content]');
 
@@ -29,11 +31,17 @@ test('content is a dialog labelled by its title', async () => {
 });
 
 test('content is labelled by the modal title component', async () => {
-    await openModal({
-        slots: { default: h(ModalTitle, () => 'Delete Entry') },
-    });
+    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('Delete Entry');
+    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);
 });