feat: add overlayRole property to customize dialog role (#7582)

vaadin · Jul 25, 2024 · 9509e0d · 9509e0d
1 parent 4d80c5c
commit 9509e0d
Show file tree

Hide file tree

Showing 7 changed files with 39 additions and 2 deletions.
diff --git a/packages/dialog/src/vaadin-dialog-base-mixin.d.ts b/packages/dialog/src/vaadin-dialog-base-mixin.d.ts
@@ -31,4 +31,11 @@ export declare class DialogBaseMixinClass {
    * Set to true to remove backdrop and allow click events on background elements.
    */
   modeless: boolean;
+
+  /**
+   * The `role` attribute value to be set on the overlay. Defaults to "dialog".
+   *
+   * @attr {string} overlay-role
+   */
+  overlayRole: string;
 }
diff --git a/packages/dialog/src/vaadin-dialog-base-mixin.js b/packages/dialog/src/vaadin-dialog-base-mixin.js
@@ -49,6 +49,16 @@ export const DialogBaseMixin = (superClass) =>
           type: Boolean,
           value: false,
         },
+
+        /**
+         * The `role` attribute value to be set on the overlay. Defaults to "dialog".
+         *
+         * @attr {string} overlay-role
+         */
+        overlayRole: {
+          type: String,
+          value: 'dialog',
+        },
       };
     }
 

diff --git a/packages/dialog/src/vaadin-dialog.js b/packages/dialog/src/vaadin-dialog.js
@@ -104,7 +104,7 @@ class Dialog extends DialogDraggableMixin(
 
       <vaadin-dialog-overlay
         id="overlay"
-        role="dialog"
+        role$="[[overlayRole]]"
         header-title="[[headerTitle]]"
         on-opened-changed="_onOverlayOpened"
         on-mousedown="_bringOverlayToFront"

diff --git a/packages/dialog/src/vaadin-lit-dialog.js b/packages/dialog/src/vaadin-lit-dialog.js
@@ -72,7 +72,7 @@ class Dialog extends DialogDraggableMixin(
     return html`
       <vaadin-dialog-overlay
         id="overlay"
-        role="dialog"
+        role="${this.overlayRole}"
         .owner="${this}"
         .opened="${this.opened}"
         .headerTitle="${this.headerTitle}"

diff --git a/packages/dialog/test/dom/__snapshots__/dialog.test.snap.js b/packages/dialog/test/dom/__snapshots__/dialog.test.snap.js
@@ -59,3 +59,17 @@ snapshots["vaadin-dialog overlay class"] =
 `;
 /* end snapshot vaadin-dialog overlay class */
 
+snapshots["vaadin-dialog overlay role"] = 
+`<vaadin-dialog-overlay
+  focus-trap=""
+  id="overlay"
+  opened=""
+  restore-focus-on-close=""
+  role="alertdialog"
+  with-backdrop=""
+>
+  content
+</vaadin-dialog-overlay>
+`;
+/* end snapshot vaadin-dialog overlay role */
+
diff --git a/packages/dialog/test/dom/dialog.test.js b/packages/dialog/test/dom/dialog.test.js
@@ -40,4 +40,9 @@ describe('vaadin-dialog', () => {
     dialog.overlayClass = 'custom dialog-overlay';
     await expect(overlay).dom.to.equalSnapshot(SNAPSHOT_CONFIG);
   });
+
+  it('overlay role', async () => {
+    dialog.overlayRole = 'alertdialog';
+    await expect(overlay).dom.to.equalSnapshot(SNAPSHOT_CONFIG);
+  });
 });
diff --git a/packages/dialog/test/typings/dialog.types.ts b/packages/dialog/test/typings/dialog.types.ts
@@ -47,6 +47,7 @@ assertType<boolean>(dialog.resizable);
 assertType<boolean>(dialog.noCloseOnEsc);
 assertType<boolean>(dialog.noCloseOnOutsideClick);
 assertType<string>(dialog.overlayClass);
+assertType<string>(dialog.overlayRole);
 assertType<string | null | undefined>(dialog.headerTitle);
 assertType<DialogRenderer | null | undefined>(dialog.renderer);
 assertType<DialogRenderer | null | undefined>(dialog.headerRenderer);