fix: set role attribute on the CRUD edit dialog overlay (#7310) (#7319)

Co-authored-by: Serhii Kulykov <[email protected]>
vaadin · Apr 11, 2024 · daa7981 · daa7981
1 parent f86e0ec
commit daa7981
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 1 deletion.
diff --git a/packages/crud/src/vaadin-crud-dialog.js b/packages/crud/src/vaadin-crud-dialog.js
@@ -145,6 +145,7 @@ class CrudDialog extends DialogBaseMixin(OverlayClassMixin(ThemePropertyMixin(Po
         with-backdrop="[[!modeless]]"
         resizable$="[[resizable]]"
         fullscreen$="[[fullscreen]]"
+        role="dialog"
         focus-trap
       ></vaadin-crud-dialog-overlay>
     `;

diff --git a/packages/crud/test/a11y.test.js b/packages/crud/test/a11y.test.js
@@ -292,7 +292,7 @@ describe('a11y', () => {
     });
   });
 
-  describe('dialog aria-label', () => {
+  describe('dialog ARIA attributes', () => {
     let newButton, editButtons, dialog;
 
     beforeEach(async () => {
@@ -309,6 +309,12 @@ describe('a11y', () => {
       await nextRender();
     });
 
+    it('should set correct role attribute to the dialog overlay', async () => {
+      newButton.click();
+      await nextRender();
+      expect(dialog.$.overlay.getAttribute('role')).to.equal('dialog');
+    });
+
     it('should set correct aria-label to the new item dialog', async () => {
       newButton.click();
       await nextRender();