diff --git a/src/cdk/dialog/dialog-config.ts b/src/cdk/dialog/dialog-config.ts index 9a37f05ee947..8451c86833af 100644 --- a/src/cdk/dialog/dialog-config.ts +++ b/src/cdk/dialog/dialog-config.ts @@ -93,7 +93,7 @@ export class DialogConfig { viewContainerFixture.detectChanges(); let dialogContainerElement = overlayContainerElement.querySelector('mat-dialog-container')!; expect(dialogContainerElement.getAttribute('role')).toBe('dialog'); + expect(dialogContainerElement.getAttribute('aria-modal')).toBe('true'); }); it('should open a dialog with a template', () => { @@ -135,6 +136,7 @@ describe('MDC-based MatDialog', () => { let dialogContainerElement = overlayContainerElement.querySelector('mat-dialog-container')!; expect(dialogContainerElement.getAttribute('role')).toBe('dialog'); + expect(dialogContainerElement.getAttribute('aria-modal')).toBe('true'); dialogRef.close(); }); diff --git a/src/material/dialog/dialog-config.ts b/src/material/dialog/dialog-config.ts index b0709eb26466..f21ad64efb15 100644 --- a/src/material/dialog/dialog-config.ts +++ b/src/material/dialog/dialog-config.ts @@ -104,6 +104,9 @@ export class MatDialogConfig { /** Aria label to assign to the dialog element. */ ariaLabel?: string | null = null; + /** Whether this is a modal dialog. Used to set the `aria-modal` attribute. */ + ariaModal?: boolean = true; + /** * Where the dialog should focus on open. * @breaking-change 14.0.0 Remove boolean option from autoFocus. Use string or diff --git a/src/material/dialog/dialog.spec.ts b/src/material/dialog/dialog.spec.ts index 428dd3b6f3af..dfc98c89a4ee 100644 --- a/src/material/dialog/dialog.spec.ts +++ b/src/material/dialog/dialog.spec.ts @@ -119,6 +119,7 @@ describe('MatDialog', () => { viewContainerFixture.detectChanges(); const dialogContainerElement = overlayContainerElement.querySelector('mat-dialog-container')!; expect(dialogContainerElement.getAttribute('role')).toBe('dialog'); + expect(dialogContainerElement.getAttribute('aria-modal')).toBe('true'); }); it('should open a dialog with a template', () => { @@ -139,6 +140,7 @@ describe('MatDialog', () => { const dialogContainerElement = overlayContainerElement.querySelector('mat-dialog-container')!; expect(dialogContainerElement.getAttribute('role')).toBe('dialog'); + expect(dialogContainerElement.getAttribute('aria-modal')).toBe('true'); dialogRef.close(); }); diff --git a/tools/public_api_guard/material/dialog.md b/tools/public_api_guard/material/dialog.md index cfdcc6202998..c7ee4cb3fb29 100644 --- a/tools/public_api_guard/material/dialog.md +++ b/tools/public_api_guard/material/dialog.md @@ -158,6 +158,7 @@ export class MatDialogConfig { ariaDescribedBy?: string | null; ariaLabel?: string | null; ariaLabelledBy?: string | null; + ariaModal?: boolean; autoFocus?: AutoFocusTarget | string | boolean; backdropClass?: string | string[]; closeOnNavigation?: boolean;