fix(experimental/dialog): set aria-modal on dialog container (#16323)

Fixes the experimental dialog container not having `aria-modal`.
This commit is contained in:
Kristiyan Kostadinov
2019-06-19 07:25:07 +02:00
committed by Jeremy Elbourn
parent 9744b31c64
commit 7a04788cd3
2 changed files with 5 additions and 1 deletions
@@ -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
@@ -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();
});