diff --git a/src/cdk-experimental/dialog/dialog-container.ts b/src/cdk-experimental/dialog/dialog-container.ts index 4049e123492..d264023ce4b 100644 --- a/src/cdk-experimental/dialog/dialog-container.ts +++ b/src/cdk-experimental/dialog/dialog-container.ts @@ -82,7 +82,7 @@ export class CdkDialogContainer extends BasePortalOutlet implements OnDestroy { /** The class that traps and manages focus within the dialog. */ private _focusTrap = this._focusTrapFactory.create(this._elementRef.nativeElement, false); - // @HostBinding is used in the class as it is expected to be extended. Since @Component decorator + // @HostBinding is used in the class as it is expected to be extended. Since @Component decorator // metadata is not inherited by child classes, instead the host binding data is defined in a way // that can be inherited. // tslint:disable:no-host-decorator-in-concrete @@ -93,6 +93,8 @@ export class CdkDialogContainer extends BasePortalOutlet implements OnDestroy { @HostBinding('attr.role') get _role() { return this._config.role; } + @HostBinding('attr.aria-modal') _ariaModal = true; + @HostBinding('attr.tabindex') get _tabindex() { return -1; } // tslint:disable:no-host-decorator-in-concrete diff --git a/src/cdk-experimental/dialog/dialog.spec.ts b/src/cdk-experimental/dialog/dialog.spec.ts index 3ebca125f07..479e320cc7e 100644 --- a/src/cdk-experimental/dialog/dialog.spec.ts +++ b/src/cdk-experimental/dialog/dialog.spec.ts @@ -79,6 +79,7 @@ describe('Dialog', () => { viewContainerFixture.detectChanges(); let dialogContainerElement = overlayContainerElement.querySelector('cdk-dialog-container')!; expect(dialogContainerElement.getAttribute('role')).toBe('dialog'); + expect(dialogContainerElement.getAttribute('aria-modal')).toBe('true'); }); it('should open a dialog with a template', () => { @@ -100,6 +101,7 @@ describe('Dialog', () => { let dialogContainerElement = overlayContainerElement.querySelector('cdk-dialog-container')!; expect(dialogContainerElement.getAttribute('role')).toBe('dialog'); + expect(dialogContainerElement.getAttribute('aria-modal')).toBe('true'); dialogRef.close(); });