Skip to content

Commit 7d314a8

Browse files
committed
fix(material/dialog): aria-modal not being set
Fixes that `aria-modal` wasn't being set on the dialog container. We had a host binding for it already, but the config didn't have an `ariaModal` property. This likely got broken when the dialog was changed to be based on top of the CDK dialog. Fixes #25676. (cherry picked from commit 9d6cc6f)
1 parent f1e554a commit 7d314a8

File tree

5 files changed

+9
-1
lines changed

5 files changed

+9
-1
lines changed

src/cdk/dialog/dialog-config.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -93,7 +93,7 @@ export class DialogConfig<D = unknown, R = unknown, C extends BasePortalOutlet =
9393
/** Dialog label applied via `aria-label` */
9494
ariaLabel?: string | null = null;
9595

96-
/** Whether this a modal dialog. Used to set the `aria-modal` attribute. */
96+
/** Whether this is a modal dialog. Used to set the `aria-modal` attribute. */
9797
ariaModal?: boolean = true;
9898

9999
/**

src/material-experimental/mdc-dialog/dialog.spec.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -115,6 +115,7 @@ describe('MDC-based MatDialog', () => {
115115
viewContainerFixture.detectChanges();
116116
let dialogContainerElement = overlayContainerElement.querySelector('mat-dialog-container')!;
117117
expect(dialogContainerElement.getAttribute('role')).toBe('dialog');
118+
expect(dialogContainerElement.getAttribute('aria-modal')).toBe('true');
118119
});
119120

120121
it('should open a dialog with a template', () => {
@@ -135,6 +136,7 @@ describe('MDC-based MatDialog', () => {
135136

136137
let dialogContainerElement = overlayContainerElement.querySelector('mat-dialog-container')!;
137138
expect(dialogContainerElement.getAttribute('role')).toBe('dialog');
139+
expect(dialogContainerElement.getAttribute('aria-modal')).toBe('true');
138140

139141
dialogRef.close();
140142
});

src/material/dialog/dialog-config.ts

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -104,6 +104,9 @@ export class MatDialogConfig<D = any> {
104104
/** Aria label to assign to the dialog element. */
105105
ariaLabel?: string | null = null;
106106

107+
/** Whether this is a modal dialog. Used to set the `aria-modal` attribute. */
108+
ariaModal?: boolean = true;
109+
107110
/**
108111
* Where the dialog should focus on open.
109112
* @breaking-change 14.0.0 Remove boolean option from autoFocus. Use string or

src/material/dialog/dialog.spec.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -119,6 +119,7 @@ describe('MatDialog', () => {
119119
viewContainerFixture.detectChanges();
120120
const dialogContainerElement = overlayContainerElement.querySelector('mat-dialog-container')!;
121121
expect(dialogContainerElement.getAttribute('role')).toBe('dialog');
122+
expect(dialogContainerElement.getAttribute('aria-modal')).toBe('true');
122123
});
123124

124125
it('should open a dialog with a template', () => {
@@ -139,6 +140,7 @@ describe('MatDialog', () => {
139140

140141
const dialogContainerElement = overlayContainerElement.querySelector('mat-dialog-container')!;
141142
expect(dialogContainerElement.getAttribute('role')).toBe('dialog');
143+
expect(dialogContainerElement.getAttribute('aria-modal')).toBe('true');
142144

143145
dialogRef.close();
144146
});

tools/public_api_guard/material/dialog.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -158,6 +158,7 @@ export class MatDialogConfig<D = any> {
158158
ariaDescribedBy?: string | null;
159159
ariaLabel?: string | null;
160160
ariaLabelledBy?: string | null;
161+
ariaModal?: boolean;
161162
autoFocus?: AutoFocusTarget | string | boolean;
162163
backdropClass?: string | string[];
163164
closeOnNavigation?: boolean;

0 commit comments

Comments
 (0)