fix(cdk/dialog): use inert to block content outside of dialog

Currently we're setting `aria-hidden` on all elements outside of a dialog in order to prevent assistive technology from interacting with it. These changes switch to using the `inert` attribute when supported which resolves some long-standing issues like tabbing directly into the dialog from the address bar.

Author: crisbeto

src/cdk/dialog/dialog.ts

@@ -23,6 +23,7 @@ import {of as observableOf, Observable, Subject, defer} from 'rxjs';
 import {DialogRef} from './dialog-ref';
 import {DialogConfig} from './dialog-config';
 import {Directionality} from '@angular/cdk/bidi';
+import {_supportsInert} from '@angular/cdk/platform';
 import {
   ComponentType,
   Overlay,
@@ -44,8 +45,9 @@ export class Dialog implements OnDestroy {
   private _openDialogsAtThisLevel: DialogRef<any, any>[] = [];
   private readonly _afterAllClosedAtThisLevel = new Subject<void>();
   private readonly _afterOpenedAtThisLevel = new Subject<DialogRef>();
-  private _ariaHiddenElements = new Map<Element, string | null>();
+  private _inertElements = new Map<Element, string | null>();
   private _scrollStrategy: () => ScrollStrategy;
+  private _inertAttribute = _supportsInert() ? 'inert' : 'aria-hidden';
 
   /** Keeps track of the currently-open dialogs. */
   get openDialogs(): readonly DialogRef<any, any>[] {
@@ -162,7 +164,7 @@ export class Dialog implements OnDestroy {
   ngOnDestroy() {
     // Make one pass over all the dialogs that need to be untracked, but should not be closed. We
     // want to stop tracking the open dialog even if it hasn't been closed, because the tracking
-    // determines when `aria-hidden` is removed from elements outside the dialog.
+    // determines when `inert` is removed from elements outside the dialog.
     reverseForEach(this._openDialogsAtThisLevel, dialog => {
       // Check for `false` specifically since we want `undefined` to be interpreted as `true`.
       if (dialog.config.closeOnDestroy === false) {
@@ -350,18 +352,18 @@ export class Dialog implements OnDestroy {
     if (index > -1) {
       (this.openDialogs as DialogRef<R, C>[]).splice(index, 1);
 
-      // If all the dialogs were closed, remove/restore the `aria-hidden`
+      // If all the dialogs were closed, remove/restore the inert attribute
       // to a the siblings and emit to the `afterAllClosed` stream.
       if (!this.openDialogs.length) {
-        this._ariaHiddenElements.forEach((previousValue, element) => {
+        this._inertElements.forEach((previousValue, element) => {
           if (previousValue) {
-            element.setAttribute('aria-hidden', previousValue);
+            element.setAttribute(this._inertAttribute, previousValue);
           } else {
-            element.removeAttribute('aria-hidden');
+            element.removeAttribute(this._inertAttribute);
           }
         });
 
-        this._ariaHiddenElements.clear();
+        this._inertElements.clear();
 
         if (emitEvent) {
           this._getAfterAllClosed().next();
@@ -387,8 +389,8 @@ export class Dialog implements OnDestroy {
           sibling.nodeName !== 'STYLE' &&
           !sibling.hasAttribute('aria-live')
         ) {
-          this._ariaHiddenElements.set(sibling, sibling.getAttribute('aria-hidden'));
-          sibling.setAttribute('aria-hidden', 'true');
+          this._inertElements.set(sibling, sibling.getAttribute(this._inertAttribute));
+          sibling.setAttribute(this._inertAttribute, 'true');
         }
       }
     }

src/cdk/platform/features/inert.ts

@@ -0,0 +1,19 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+let supportsInert: boolean | undefined;
+
+/** Returns whether the browser supports the `inert` attribute. */
+export function _supportsInert(): boolean {
+  if (typeof supportsInert === 'boolean') {
+    return supportsInert;
+  }
+
+  supportsInert = typeof document !== 'undefined' && !!document.body && 'inert' in document.body;
+  return supportsInert;
+}

src/cdk/platform/public-api.ts

@@ -13,3 +13,4 @@ export * from './features/passive-listeners';
 export * from './features/scrolling';
 export * from './features/shadow-dom';
 export * from './features/test-environment';
+export * from './features/inert';

tools/public_api_guard/cdk/platform.md

@@ -62,6 +62,9 @@ export const enum RtlScrollAxisType {
     NORMAL = 0
 }
 
+// @public
+export function _supportsInert(): boolean;
+
 // @public
 export function supportsPassiveEventListeners(): boolean;