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);