diff --git a/src/cdk/dialog/dialog-config.ts b/src/cdk/dialog/dialog-config.ts index ff63a19068a4..584f3762991f 100644 --- a/src/cdk/dialog/dialog-config.ts +++ b/src/cdk/dialog/dialog-config.ts @@ -87,8 +87,12 @@ export class DialogConfig { viewContainerFixture.detectChanges(); let dialogContainerElement = overlayContainerElement.querySelector('cdk-dialog-container')!; expect(dialogContainerElement.getAttribute('role')).toBe('dialog'); - expect(dialogContainerElement.getAttribute('aria-modal')).toBe('true'); + expect(dialogContainerElement.getAttribute('aria-modal')).toBe('false'); + }); + + it('should be able to set aria-modal', () => { + dialog.open(PizzaMsg, { + viewContainerRef: testViewContainerRef, + ariaModal: true, + }); + viewContainerFixture.detectChanges(); + + const container = overlayContainerElement.querySelector('cdk-dialog-container')!; + expect(container.getAttribute('aria-modal')).toBe('true'); }); it('should open a dialog with a template', () => { @@ -117,7 +128,7 @@ describe('Dialog', () => { let dialogContainerElement = overlayContainerElement.querySelector('cdk-dialog-container')!; expect(dialogContainerElement.getAttribute('role')).toBe('dialog'); - expect(dialogContainerElement.getAttribute('aria-modal')).toBe('true'); + expect(dialogContainerElement.getAttribute('aria-modal')).toBe('false'); dialogRef.close(); }); diff --git a/src/material/bottom-sheet/bottom-sheet-config.ts b/src/material/bottom-sheet/bottom-sheet-config.ts index ded882266ce6..6740e47bf4aa 100644 --- a/src/material/bottom-sheet/bottom-sheet-config.ts +++ b/src/material/bottom-sheet/bottom-sheet-config.ts @@ -44,8 +44,12 @@ export class MatBottomSheetConfig { /** Aria label to assign to the bottom sheet element. */ ariaLabel?: string | null = null; - /** Whether this is a modal bottom sheet. Used to set the `aria-modal` attribute. */ - ariaModal?: boolean = true; + /** + * Whether this is a modal dialog. Used to set the `aria-modal` attribute. Off by default, + * because it can interfere with other overlay-based components (e.g. `mat-select`) and because + * it is redundant since the dialog marks all outside content as `aria-hidden` anyway. + */ + ariaModal?: boolean = false; /** * Whether the bottom sheet should close when the user goes backwards/forwards in history. diff --git a/src/material/bottom-sheet/bottom-sheet.spec.ts b/src/material/bottom-sheet/bottom-sheet.spec.ts index 4f978f23767d..b632d66e7f99 100644 --- a/src/material/bottom-sheet/bottom-sheet.spec.ts +++ b/src/material/bottom-sheet/bottom-sheet.spec.ts @@ -153,7 +153,17 @@ describe('MatBottomSheet', () => { const containerElement = overlayContainerElement.querySelector('mat-bottom-sheet-container')!; expect(containerElement.getAttribute('role')).toBe('dialog'); - expect(containerElement.getAttribute('aria-modal')).toBe('true'); + expect(containerElement.getAttribute('aria-modal')).toBe('false'); + }); + + it('should be able to set aria-modal', () => { + bottomSheet.open(PizzaMsg, { + ariaModal: true, + }); + viewContainerFixture.detectChanges(); + + const container = overlayContainerElement.querySelector('mat-bottom-sheet-container')!; + expect(container.getAttribute('aria-modal')).toBe('true'); }); it('should close a bottom sheet via the escape key', fakeAsync(() => { diff --git a/src/material/dialog/dialog-config.ts b/src/material/dialog/dialog-config.ts index 3f50db03278e..66c106f15472 100644 --- a/src/material/dialog/dialog-config.ts +++ b/src/material/dialog/dialog-config.ts @@ -104,8 +104,12 @@ 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; + /** + * Whether this is a modal dialog. Used to set the `aria-modal` attribute. Off by default, + * because it can interfere with other overlay-based components (e.g. `mat-select`) and because + * it is redundant since the dialog marks all outside content as `aria-hidden` anyway. + */ + ariaModal?: boolean = false; /** * Where the dialog should focus on open. diff --git a/src/material/dialog/dialog.spec.ts b/src/material/dialog/dialog.spec.ts index 1aa69b524ff6..b3752a42af52 100644 --- a/src/material/dialog/dialog.spec.ts +++ b/src/material/dialog/dialog.spec.ts @@ -112,7 +112,18 @@ describe('MatDialog', () => { viewContainerFixture.detectChanges(); let dialogContainerElement = overlayContainerElement.querySelector('mat-dialog-container')!; expect(dialogContainerElement.getAttribute('role')).toBe('dialog'); - expect(dialogContainerElement.getAttribute('aria-modal')).toBe('true'); + expect(dialogContainerElement.getAttribute('aria-modal')).toBe('false'); + }); + + it('should be able to set aria-modal', () => { + dialog.open(PizzaMsg, { + viewContainerRef: testViewContainerRef, + ariaModal: true, + }); + viewContainerFixture.detectChanges(); + + const container = overlayContainerElement.querySelector('mat-dialog-container')!; + expect(container.getAttribute('aria-modal')).toBe('true'); }); it('should open a dialog with a template', () => { @@ -134,7 +145,7 @@ describe('MatDialog', () => { let dialogContainerElement = overlayContainerElement.querySelector('mat-dialog-container')!; expect(dialogContainerElement.getAttribute('role')).toBe('dialog'); - expect(dialogContainerElement.getAttribute('aria-modal')).toBe('true'); + expect(dialogContainerElement.getAttribute('aria-modal')).toBe('false'); dialogRef.close(); });