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

Fixes the experimental dialog container not having `aria-modal`.

Author: crisbeto

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
 

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();
   });