Skip to content
Permalink
Browse files
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)
  • Loading branch information
crisbeto committed Sep 26, 2022
1 parent f1e554a commit 7d314a87bfe2cd75a7569341c4339442a3ad2352
Show file tree
Hide file tree
Showing 5 changed files with 9 additions and 1 deletion.
@@ -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;

/**
@@ -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', () => {
@@ -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();
});
@@ -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
@@ -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();
});
@@ -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;

0 comments on commit 7d314a8

Please sign in to comment.