diff --git a/packages/dialog/src/vaadin-dialog-base-mixin.d.ts b/packages/dialog/src/vaadin-dialog-base-mixin.d.ts index 3ab1bff3da..45b4d49e24 100644 --- 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 index c413b8b4ee..65eac26d54 100644 --- 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 index 94456d0008..c022da82f1 100644 --- a/packages/dialog/src/vaadin-dialog.js +++ b/packages/dialog/src/vaadin-dialog.js @@ -104,7 +104,7 @@ class Dialog extends DialogDraggableMixin( + content + +`; +/* end snapshot vaadin-dialog overlay role */ + diff --git a/packages/dialog/test/dom/dialog.test.js b/packages/dialog/test/dom/dialog.test.js index bdec99a779..b749b5c120 100644 --- 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 index 8afdb7b531..0f8ab36c6f 100644 --- a/packages/dialog/test/typings/dialog.types.ts +++ b/packages/dialog/test/typings/dialog.types.ts @@ -47,6 +47,7 @@ assertType(dialog.resizable); assertType(dialog.noCloseOnEsc); assertType(dialog.noCloseOnOutsideClick); assertType(dialog.overlayClass); +assertType(dialog.overlayRole); assertType(dialog.headerTitle); assertType(dialog.renderer); assertType(dialog.headerRenderer);