DevTools: mark content hidden by modals with aria-hidden

Currently, the settings modal does not set aria-hidden on the main
devtools content when it is opened. As a result, screen reader users
who use the "Form fields" list in NVDA or similar functionality in
other tools will be presented with a list of form controls that are
visually hidden. This change adds a field to UI.Dialog that determines
whether the dialog should mark all of its siblings with aria-hidden when
it is shown.

Before: https://i.imgur.com/7kV9dgE.jpg
After: https://i.imgur.com/AyNJQCQ.jpg

Change-Id: I131144a6e551cb2387f7db2fd5a67c5526051f71
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1620777
Commit-Queue: Jack Lynch <jalyn@microsoft.com>
Reviewed-by: Joel Einbinder <einbinder@chromium.org>
Cr-Commit-Position: refs/heads/master@{#666447}

third_party/blink/renderer/devtools/front_end/settings/SettingsScreen.js

@@ -71,7 +71,7 @@ Settings.SettingsScreen = class extends UI.VBox {
         /** @type {!Settings.SettingsScreen} */ (self.runtime.sharedInstance(Settings.SettingsScreen));
     if (settingsScreen.isShowing())
       return;
-    const dialog = new UI.Dialog();
+    const dialog = new UI.Dialog(/* modal=*/ true);
     dialog.addCloseButton();
     settingsScreen.show(dialog.contentElement);
     dialog.show();

third_party/blink/renderer/devtools/front_end/ui/ARIAUtils.js

@@ -19,6 +19,16 @@ UI.ARIAUtils.markAsCheckbox = function(element) {
   element.setAttribute('role', 'checkbox');
 };
 
+/**
+ * @param {!Element} element
+ * @param {boolean=} modal
+ */
+UI.ARIAUtils.markAsDialog = function(element, modal) {
+  element.setAttribute('role', 'dialog');
+  if (modal)
+    element.setAttribute('aria-modal', 'true');
+};
+
 /**
  * @param {!Element} element
  */

third_party/blink/renderer/devtools/front_end/ui/Dialog.js

@@ -29,7 +29,10 @@
  */
 
 UI.Dialog = class extends UI.GlassPane {
-  constructor() {
+  /**
+   * @param {boolean=} modal
+   */
+  constructor(modal) {
     super();
     this.registerRequiredCSS('ui/dialog.css');
     this.contentElement.tabIndex = 0;
@@ -41,6 +44,7 @@ UI.Dialog = class extends UI.GlassPane {
       this.hide();
       event.consume(true);
     });
+    UI.ARIAUtils.markAsDialog(this.contentElement, modal);
     /** @type {!Map<!HTMLElement, number>} */
     this._tabIndexMap = new Map();
     /** @type {?UI.WidgetFocusRestorer} */