Reland of "DevTools: Make Settings Blackboxing Pane Accessible"

Reland of "DevTools: Make Settings Blackboxing Pane Accessible"

Initially, the change https://chromium-review.googlesource.com/c/chromium/src/+/1605506 was reverted in order to
revert "DevTools: Make Preferences Settings Pane Accessible" crrev.com/c/1618170.
Both of the original changes had added axe tests for it in basic-a11y-test.js which was timing out in Ubuntu build 14.04.
The change here only makes blackboxing pane accessible and doesn't add test in basic-a11y-test.js.
Test for it will be added in a seperate PR.
Original change: https://chromium-review.googlesource.com/c/chromium/src/+/1605506
Reverted change: https://chromium-review.googlesource.com/c/chromium/src/+/1618026

Change-Id: I51f80cfec544118d6173ca8fafd1b3eff50de6b1
Bug: 963183
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1636728
Commit-Queue: Chandani Shrestha <chshrest@microsoft.com>
Reviewed-by: Erik Luo <luoe@chromium.org>
Cr-Commit-Position: refs/heads/master@{#665690}

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

@@ -12,7 +12,9 @@ Settings.FrameworkBlackboxSettingsTab = class extends UI.VBox {
     super(true);
     this.registerRequiredCSS('settings/frameworkBlackboxSettingsTab.css');
 
-    this.contentElement.createChild('div', 'header').textContent = Common.UIString('Framework Blackboxing');
+    const header = this.contentElement.createChild('div', 'header');
+    header.textContent = ls`Framework Blackboxing`;
+    UI.ARIAUtils.markAsHeading(header, 1);
     this.contentElement.createChild('div', 'intro').textContent =
         ls`Debugger will skip through the scripts and will not stop on exceptions thrown by them.`;
 
@@ -40,7 +42,6 @@ Settings.FrameworkBlackboxSettingsTab = class extends UI.VBox {
     this._setting.addChangeListener(this._settingUpdated, this);
 
     this.setDefaultFocusedElement(addPatternButton);
-    this.contentElement.tabIndex = 0;
   }
 
   /**
@@ -138,11 +139,13 @@ Settings.FrameworkBlackboxSettingsTab = class extends UI.VBox {
     titles.createChild('div', 'blackbox-behavior').textContent = Common.UIString('Behavior');
 
     const fields = content.createChild('div', 'blackbox-edit-row');
-    fields.createChild('div', 'blackbox-pattern')
-        .appendChild(editor.createInput('pattern', 'text', '/framework\\.js$', patternValidator.bind(this)));
+    const pattern = editor.createInput('pattern', 'text', '/framework\\.js$', patternValidator.bind(this));
+    UI.ARIAUtils.setAccessibleName(pattern, ls`Pattern`);
+    fields.createChild('div', 'blackbox-pattern').appendChild(pattern);
     fields.createChild('div', 'blackbox-separator blackbox-separator-invisible');
-    fields.createChild('div', 'blackbox-behavior')
-        .appendChild(editor.createSelect('behavior', [this._blackboxLabel, this._disabledLabel], behaviorValidator));
+    const behavior = editor.createSelect('behavior', [this._blackboxLabel, this._disabledLabel], behaviorValidator);
+    UI.ARIAUtils.setAccessibleName(behavior, ls`Behavior`);
+    fields.createChild('div', 'blackbox-behavior').appendChild(behavior);
 
     return editor;