DevTools: Make Preferences Settings Pane Accessible

Preferences pane had following accessibility issues and is fixed as follows:
- The top heading was in h3.

Fix: Updated h3 to h1
- Subcategories was missing heading role of h2 and group roles for subcategories was missing
Fix: Added role heading of level 2
Fix: Added role group to each sub categories
- Label for drop-downs were not linked with select element so, screen reader wasn't reading out for drop-downs.
Fix: Added 'for' attribute in label with id value of drop-down select element
Change-Id: I64d433522c814b8f65ced29958524ac175d987ac

Bug: 963183

Video showing Preferences pane after this change https://imgur.com/caUMd46

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

third_party/blink/renderer/devtools/front_end/emulation/DevicesSettingsTab.js

@@ -13,7 +13,7 @@ Emulation.DevicesSettingsTab = class extends UI.VBox {
     this.registerRequiredCSS('emulation/devicesSettingsTab.css');
 
     const header = this.element.createChild('header');
-    header.createChild('h3').createTextChild(Common.UIString('Emulated Devices'));
+    header.createChild('h1').createTextChild(ls`Emulated Devices`);
     this.containerElement = this.element.createChild('div', 'settings-container-wrapper')
                                 .createChild('div', 'settings-tab settings-content settings-container');
 

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

@@ -117,7 +117,7 @@ Settings.SettingsTab = class extends UI.VBox {
     if (id)
       this.element.id = id;
     const header = this.element.createChild('header');
-    header.createChild('h3').createTextChild(name);
+    header.createChild('h1').createTextChild(name);
     this.containerElement = this.element.createChild('div', 'settings-container-wrapper')
                                 .createChild('div', 'settings-tab settings-content settings-container');
   }
@@ -128,8 +128,15 @@ Settings.SettingsTab = class extends UI.VBox {
    */
   _appendSection(name) {
     const block = this.containerElement.createChild('div', 'settings-block');
-    if (name)
-      block.createChild('div', 'settings-section-title').textContent = name;
+    if (name) {
+      UI.ARIAUtils.markAsGroup(block);
+      const title = block.createChild('div', 'settings-section-title');
+      title.textContent = name;
+      UI.ARIAUtils.markAsHeading(title, 2);
+      const sectionTitleId = UI.ARIAUtils.nextId('settings-section-title');
+      title.setAttribute('id', sectionTitleId);
+      block.setAttribute('aria-labelledby', sectionTitleId);
+    }
     return block;
   }
 };

third_party/blink/renderer/devtools/front_end/settings/settingsScreen.css

@@ -183,7 +183,7 @@ fieldset {
     margin-left: 0;
 }
 
-.settings-tab-container header > h3 {
+.settings-tab-container header > h1 {
     font-size: 18px;
     font-weight: normal;
     margin: 0;

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

@@ -61,8 +61,12 @@ UI.SettingsUI.createSettingCheckbox = function(name, setting, omitParagraphEleme
  */
 UI.SettingsUI.createSettingSelect = function(name, options, setting) {
   const p = createElement('p');
-  p.createChild('label').textContent = name;
+  const label = p.createChild('label');
+  label.textContent = name;
   const select = p.createChild('select', 'chrome-select');
+  const selectId = UI.ARIAUtils.nextId('chrome-select');
+  select.setAttribute('id', selectId);
+  label.setAttribute('for', selectId);
 
   for (let i = 0; i < options.length; ++i) {
     // The "raw" flag indicates text is non-i18n-izable.
@@ -117,7 +121,11 @@ UI.SettingsUI.bindCheckbox = function(input, setting) {
 UI.SettingsUI.createCustomSetting = function(name, element) {
   const p = createElement('p');
   const fieldsetElement = p.createChild('fieldset');
-  fieldsetElement.createChild('label').textContent = name;
+  const label = fieldsetElement.createChild('label');
+  label.textContent = name;
+  const elementId = UI.ARIAUtils.nextId('setting-element');
+  element.setAttribute('id', elementId);
+  label.setAttribute('for', elementId);
   fieldsetElement.appendChild(element);
   return p;
 };

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

@@ -225,7 +225,7 @@ UI.ShortcutsScreen = class {
     const widget = new UI.Widget();
 
     widget.element.className = 'settings-tab-container';  // Override
-    widget.element.createChild('header').createChild('h3').createTextChild(Common.UIString('Shortcuts'));
+    widget.element.createChild('header').createChild('h1').createTextChild(ls`Shortcuts`);
     const scrollPane = widget.element.createChild('div', 'settings-container-wrapper');
     const container = scrollPane.createChild('div');
     container.className = 'settings-content settings-container';

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

@@ -7,4 +7,7 @@ aXe violations: []
 Tests accessibility in the sensors 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

@@ -12,6 +12,8 @@
       'performance.monitor',
       // Sensors
       'sensors',
+      // Settings
+      'preferences',
     ];