From eaacb02baf8efaa9a559559b35261b447a813527 Mon Sep 17 00:00:00 2001
From: James Perretta <jameslp@umich.edu>
Date: Fri, 13 Dec 2024 16:03:54 -0500
Subject: [PATCH] Accessibility fixes for the modal component: - ESC to close -
 closing-x tab-navigable, enter to trigger   - Added aria label for closing-x
 - Added dialog role

---
 src/components/modal.vue            | 11 ++++++++---
 tests/test_components/test_modal.ts | 26 ++++++++++++++++++++++++++
 2 files changed, 34 insertions(+), 3 deletions(-)

diff --git a/src/components/modal.vue b/src/components/modal.vue
index 54f24ae97..79de711e0 100644
--- a/src/components/modal.vue
+++ b/src/components/modal.vue
@@ -1,14 +1,19 @@
 <template>
   <transition name="modal">
     <div class="modal-mask"
-         @click.self="() => {click_outside_to_close ? $emit('close') : null}">
+         @click.self="() => {click_outside_to_close ? $emit('close') : null}"
+         @keyup.esc="$emit('close')">
       <div class="modal-container"
            :class="size"
-           :style="custom_width ? {width: custom_width} : ''">
+           :style="custom_width ? {width: custom_width} : ''"
+           role="dialog">
         <slot></slot>
         <div v-if="include_closing_x"
                 class="close-button"
-                @click="$emit('close')">
+                @click="$emit('close')"
+                @keyup.enter="$emit('close')"
+                tabindex="0"
+                aria-label="close-dialog">
           &#10005;
         </div>
       </div>
diff --git a/tests/test_components/test_modal.ts b/tests/test_components/test_modal.ts
index 4cd5b2709..ae0dc7f64 100644
--- a/tests/test_components/test_modal.ts
+++ b/tests/test_components/test_modal.ts
@@ -39,6 +39,32 @@ describe('Modal.vue', () => {
         expect(wrapper.findComponent({ref: 'modal'}).exists()).toBe(false);
     });
 
+    test('Close modal with ESC key', async () => {
+        const component = {
+            template:  `<modal ref="modal"
+                               v-if="show_modal"
+                               @close="show_modal = false">
+                            <input type="text" data-testid="input" />
+                        </modal>`,
+            components: {
+                'modal': Modal
+            },
+            data: () => {
+                return {
+                    show_modal: false
+                };
+            }
+        };
+
+        const wrapper = mount(component);
+        await wrapper.setData({show_modal: true});
+        expect(wrapper.findComponent({ref: 'modal'}).exists()).toBe(true);
+
+        await wrapper.find('[data-testid=input]').trigger('keyup.esc');
+
+        expect(wrapper.findComponent({ref: 'modal'}).exists()).toBe(false);
+    });
+
     test('Ensure content is only displayed if external boolean is true', async () => {
         const component = {
             template:  `<modal ref="modal"