Skip to content

Commit

Permalink
fix(material/dialog): aria-modal not being set
Browse files Browse the repository at this point in the history
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)
  • Loading branch information
crisbeto committed Sep 26, 2022
1 parent f1e554a commit 7d314a8
Show file tree
Hide file tree
Showing 5 changed files with 9 additions and 1 deletion.
2 changes: 1 addition & 1 deletion src/cdk/dialog/dialog-config.ts
Expand Up @@ -93,7 +93,7 @@ export class DialogConfig<D = unknown, R = unknown, C extends BasePortalOutlet =
/** Dialog label applied via `aria-label` */
ariaLabel?: string | null = null;

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

/**
Expand Down
2 changes: 2 additions & 0 deletions src/material-experimental/mdc-dialog/dialog.spec.ts
Expand Up @@ -115,6 +115,7 @@ describe('MDC-based MatDialog', () => {
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', () => {
Expand All @@ -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();
});
Expand Down
3 changes: 3 additions & 0 deletions src/material/dialog/dialog-config.ts
Expand Up @@ -104,6 +104,9 @@ export class MatDialogConfig<D = any> {
/** 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
Expand Down
2 changes: 2 additions & 0 deletions src/material/dialog/dialog.spec.ts
Expand Up @@ -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', () => {
Expand All @@ -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();
});
Expand Down
1 change: 1 addition & 0 deletions tools/public_api_guard/material/dialog.md
Expand Up @@ -158,6 +158,7 @@ export class MatDialogConfig<D = any> {
ariaDescribedBy?: string | null;
ariaLabel?: string | null;
ariaLabelledBy?: string | null;
ariaModal?: boolean;
autoFocus?: AutoFocusTarget | string | boolean;
backdropClass?: string | string[];
closeOnNavigation?: boolean;
Expand Down

0 comments on commit 7d314a8

Please sign in to comment.