DevTools: Make Settings Blackboxing Pane Accessible

This change provides fixes for these issues:
Problem: The content title was heading role
Fix: Added heading role of level 1
Problem: Aria-label was missing in drop-downs
Fix: Added aria-label in drop-downs

Tested keyboard navigation
- navigate up/down drop-down items using arrow keys
- Checkbox is checked/unchecked using space bar
- Tab into/out (no tab traps)

Tested screen reader
- reads checkbox label
- reads items selected from the drop down list

Bug: 963183

Change-Id: Iaab2dd37323427215f765b3d7bbef885861c210f
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1605506
Commit-Queue: Chandani Shrestha <chshrest@microsoft.com>
Reviewed-by: Joel Einbinder <einbinder@chromium.org>
Cr-Commit-Position: refs/heads/master@{#660991}

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 Blackbox Patterns');
+    const header = this.contentElement.createChild('div', 'header');
+    header.textContent = ls`Framework Blackbox Patterns`;
+    UI.ARIAUtils.markAsHeading(header, 1);
     this.contentElement.createChild('div', 'blackbox-content-scripts')
         .appendChild(UI.SettingsUI.createSettingCheckbox(
             Common.UIString('Blackbox content scripts'), Common.moduleSetting('skipContentScripts'), true));
@@ -36,7 +38,6 @@ Settings.FrameworkBlackboxSettingsTab = class extends UI.VBox {
     this._setting.addChangeListener(this._settingUpdated, this);
 
     this.setDefaultFocusedElement(addPatternButton);
-    this.contentElement.tabIndex = 0;
   }
 
   /**
@@ -133,11 +134,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', ls`/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;
 

third_party/blink/web_tests/http/tests/devtools/a11y-axe-core/basic-a11y-test-expected.txt

@@ -7,6 +7,9 @@ aXe violations: []
 Tests accessibility in the sensors view using the axe-core linter.
 aXe violations: []
 
+Tests accessibility in the blackbox view using the axe-core linter.
+aXe violations: []
+
 Tests accessibility in the preferences view using the axe-core linter.
 aXe violations: []
 

third_party/blink/web_tests/http/tests/devtools/a11y-axe-core/basic-a11y-test.js

@@ -13,6 +13,7 @@
       // Sensors
       'sensors',
       // Settings
+      'blackbox',
       'preferences',
     ];