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, 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,13 @@ 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);
-          } else {
-            element.removeAttribute('aria-hidden');
-          }
-        });
-
-        this._ariaHiddenElements.clear();
+        this._inertElements.forEach((previousValue, element) =>
+          toggleInertAttribute(element, previousValue),
+        );
+        this._inertElements.clear();
 
         if (emitEvent) {
           this._getAfterAllClosed().next();
@@ -387,8 +383,11 @@ 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(_supportsInert() ? 'inert' : 'aria-hidden'),
+          );
+          toggleInertAttribute(sibling, 'true');
         }
       }
     }
@@ -400,6 +399,22 @@ export class Dialog implements OnDestroy {
   }
 }
 
+/** Toggles the `inert`/`aria-hidden` attribute on an element. */
+function toggleInertAttribute(element: Element, value: string | null): void {
+  const supportsInert = _supportsInert();
+
+  // Note: this logic is somewhat repetitive, but it's written this way so that we pass static
+  // strings into `setAttribute`. There's some internal security checks that disallow variables
+  // to be passed due to the potential of XSS attacks.
+  if (!value) {
+    element.removeAttribute(supportsInert ? 'inert' : 'aria-hidden');
+  } else if (supportsInert) {
+    element.setAttribute('inert', value);
+  } else {
+    element.setAttribute('aria-hidden', value);
+  }
+}
+
 /**
  * Executes a callback against all elements in an array while iterating in reverse.
  * Useful if the array is being modified as it is being iterated.

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;