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,7 +45,7 @@ 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, [ariaHidden: string | null, inert: string | null]>();
   private _scrollStrategy: () => ScrollStrategy;
 
   /** Keeps track of the currently-open dialogs. */
@@ -162,7 +163,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 +351,29 @@ 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) => {
-          if (previousValue) {
-            element.setAttribute('aria-hidden', previousValue);
+        this._inertElements.forEach((previousValue, element) => {
+          const [ariaHidden, inert] = previousValue;
+
+          // Note: this code is somewhat repetitive, but we want to use static strings inside
+          // the `setAttribute` calls so that we don't trip up some internal XSS checks.
+          if (ariaHidden) {
+            element.setAttribute('aria-hidden', ariaHidden);
           } else {
             element.removeAttribute('aria-hidden');
           }
-        });
 
-        this._ariaHiddenElements.clear();
+          if (_supportsInert()) {
+            if (inert) {
+              element.setAttribute('inert', inert);
+            } else {
+              element.removeAttribute('inert');
+            }
+          }
+        });
+        this._inertElements.clear();
 
         if (emitEvent) {
           this._getAfterAllClosed().next();
@@ -387,8 +399,17 @@ export class Dialog implements OnDestroy {
           sibling.nodeName !== 'STYLE' &&
           !sibling.hasAttribute('aria-live')
         ) {
-          this._ariaHiddenElements.set(sibling, sibling.getAttribute('aria-hidden'));
+          const ariaHidden = sibling.getAttribute('aria-hidden');
+          const inert = _supportsInert() ? sibling.getAttribute('inert') : null;
+
+          // TODO(crisbeto): ideally we'd set only either `aria-hidden` or `inert` here, but
+          // at the moment of writing, some internal checks don't consider `inert` elements as
+          // removed from the a11y tree which reveals a bunch of pre-existing breakages.
+          this._inertElements.set(sibling, [ariaHidden, inert]);
           sibling.setAttribute('aria-hidden', 'true');
+          if (_supportsInert()) {
+            sibling.setAttribute('inert', '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;