fix(Dialog): add aria-modal attribute for wider compatibility

liip · Jun 8, 2022 · 9e02396 · 9e02396
1 parent 2f682e7
commit 9e02396
Show file tree

Hide file tree

Showing 2 changed files with 3 additions and 2 deletions.
diff --git a/packages/chusho/lib/components/CDialog/CDialog.spec.js b/packages/chusho/lib/components/CDialog/CDialog.spec.js
@@ -22,7 +22,7 @@ describe('CDialog', () => {
     expect(wrapper.html()).toBe(`<!--teleport start-->
 <!--teleport end-->`);
     expect(document.querySelector('#chusho-dialogs-portal').innerHTML).toBe(
-      '<div tabindex="-1"><div role="dialog"></div></div>'
+      '<div tabindex="-1"><div role="dialog" aria-modal="true"></div></div>'
     );
   });
 
@@ -53,7 +53,7 @@ describe('CDialog', () => {
     });
 
     expect(document.querySelector('#chusho-dialogs-portal').innerHTML).toBe(
-      '<div class="overlay-custom overlay" tabindex="-1"><div class="dialog-custom dialog" role="dialog"></div></div>'
+      '<div class="overlay-custom overlay" tabindex="-1"><div class="dialog-custom dialog" role="dialog" aria-modal="true"></div></div>'
     );
   });
 

diff --git a/packages/chusho/lib/components/CDialog/CDialog.ts b/packages/chusho/lib/components/CDialog/CDialog.ts
@@ -192,6 +192,7 @@ export default defineComponent({
 
         const dialogProps = mergeProps(this.$attrs, {
           role: 'dialog',
+          'aria-modal': 'true',
           ref: 'dialogElement',
           ...generateConfigClass(this.config?.class, this.$props),
         });