DevTools: Make settings menu text heading level 1

- Made the "Settings" menu text a level 1 heading for screen readers
  to meet WCAG 1.3.1 Info and Relationships success criteria.
  See: https://www.w3.org/WAI/WCAG21/quickref/#info-and-relationships

- Added an axe-core accessibility test for the settings menu.

Screenshot: https://i.imgur.com/yhUG2D7.png

Bug: 963183
Change-Id: I0063aa33e99dedfdefb94e14905ed833cfc5fcb2
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1618279Reviewed-by: Erik Luo <luoe@chromium.org>
Commit-Queue: John Emau <johnemau@microsoft.com>
Cr-Commit-Position: refs/heads/master@{#666106}

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

@@ -41,9 +41,11 @@ Settings.SettingsScreen = class extends UI.VBox {
     this.contentElement.classList.add('vbox');
 
     const settingsLabelElement = createElement('div');
-    UI.createShadowRootWithCoreStyles(settingsLabelElement, 'settings/settingsScreen.css')
-        .createChild('div', 'settings-window-title')
-        .textContent = Common.UIString('Settings');
+    const settingsTitleElement = UI.createShadowRootWithCoreStyles(settingsLabelElement, 'settings/settingsScreen.css')
+                                     .createChild('div', 'settings-window-title');
+
+    UI.ARIAUtils.markAsHeading(settingsTitleElement, 1);
+    settingsTitleElement.textContent = ls`Settings`;
 
     this._tabbedLocation =
         UI.viewManager.createTabbedLocation(() => Settings.SettingsScreen._showSettingsScreen(), 'settings-view');
@@ -51,7 +53,7 @@ Settings.SettingsScreen = class extends UI.VBox {
     tabbedPane.leftToolbar().appendToolbarItem(new UI.ToolbarItem(settingsLabelElement));
     tabbedPane.setShrinkableTabs(false);
     tabbedPane.makeVerticalTabLayout();
-    const shortcutsView = new UI.SimpleView(Common.UIString('Shortcuts'));
+    const shortcutsView = new UI.SimpleView(ls`Shortcuts`);
     UI.shortcutsScreen.createShortcutsTabView().show(shortcutsView.element);
     this._tabbedLocation.appendView(shortcutsView);
     tabbedPane.show(this.contentElement);

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

+Tests accessibility in the settings menu using the axe-core linter.
+aXe violations: []
+
+

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

+// Copyright 2019 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+(async function() {
+  TestRunner.addResult(
+      'Tests accessibility in the settings menu using the axe-core linter.');
+
+  await TestRunner.loadModule('axe_core_test_runner');
+  await TestRunner.loadModule('settings');
+
+  await UI.actionRegistry.action('settings.show').execute();
+
+  const tabbedPane = runtime.sharedInstance(Settings.SettingsScreen)
+                         ._tabbedLocation.tabbedPane();
+
+  // force tabs to update
+  tabbedPane._innerUpdateTabElements();
+
+  await AxeCoreTestRunner.runValidation(
+      [tabbedPane._headerElement, tabbedPane._tabsElement]);
+  TestRunner.completeTest();
+})();