DevTools: aXe core linting for main Elements tools

This change adds aXe Core linting to the following components of
the main Elements tool:

 - DOM tree
 - Breadcrumbs
 - Styles pane
 - Computed Styles pane

Change-Id: I247d9a4d4883db936f09c4d252a0558e63295edf
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1566689
Commit-Queue: Robert Paveza <Rob.Paveza@microsoft.com>
Reviewed-by: Joel Einbinder <einbinder@chromium.org>
Cr-Commit-Position: refs/heads/master@{#652424}

third_party/blink/renderer/devtools/front_end/elements_test_runner/ElementsTestRunner.js

@@ -525,6 +525,15 @@ ElementsTestRunner.showEventListenersWidget = function() {
   return UI.viewManager.showView('elements.eventListeners');
 };
 
+/**
+ * @return {Promise}
+ */
+ElementsTestRunner.showComputedStyles = function() {
+  UI.panels.elements.sidebarPaneView.tabbedPane().selectTab('Computed', true);
+  return ElementsTestRunner.computedStyleWidget().doUpdate();
+};
+
+
 ElementsTestRunner.expandAndDumpSelectedElementEventListeners = function(callback, force) {
   ElementsTestRunner.expandAndDumpEventListeners(
       ElementsTestRunner.eventListenersWidget()._eventListenersView, callback, force);

third_party/blink/web_tests/http/tests/devtools/a11y-axe-core/elements/main-tool-test-expected.txt

+
+Running: testElementsDomTree
+Tests accessibility in the DOM tree using the axe-core linter
+aXe violations: []
+
+
+Running: testElementsDomBreadcrumbs
+Tests accessibility in the DOM breadcrumbs using the axe-core linter
+aXe violations: []
+
+
+Running: testElementsStylesPane
+Tests accessibility of the Styles pane using the axe-core linter
+aXe violations: []
+
+
+Running: testElementsComputedStylesPane
+Tests accessibility in the Computed Styles pane using the axe-core linter
+aXe violations: []
+
+

third_party/blink/web_tests/http/tests/devtools/a11y-axe-core/elements/main-tool-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 () {
+    // axe-core issue #1444 -- role="tree" requires children with role="treeitem",
+    // but it is reasonable to have trees with no leaves.
+    const NO_REQUIRED_CHILDREN_RULESET = {
+      'aria-required-children': {
+        enabled: false,
+      },
+    };
+    const DEFAULT_RULESET = { };
+    await TestRunner.loadModule('axe_core_test_runner');
+    await TestRunner.loadModule('elements_test_runner');
+    const tests = [
+      testElementsDomTree,
+      testElementsDomBreadcrumbs,
+      testElementsStylesPane,
+      testElementsComputedStylesPane,
+    ];
+
+    async function testElementsDomTree(next) {
+      TestRunner.addResult('Tests accessibility in the DOM tree using the axe-core linter');
+      const view = 'elements';
+      await UI.viewManager.showView(view);
+      const widget = await UI.viewManager.view(view).widget();
+      const element = widget.element.querySelector('#elements-content');
+
+      await AxeCoreTestRunner.runValidation(element, NO_REQUIRED_CHILDREN_RULESET);
+      next();
+    }
+
+    async function testElementsDomBreadcrumbs(next) {
+      TestRunner.addResult('Tests accessibility in the DOM breadcrumbs using the axe-core linter');
+      const view = 'elements';
+      await UI.viewManager.showView(view);
+      const widget = await UI.viewManager.view(view).widget();
+      const element = widget.element.querySelector('#elements-crumbs');
+
+      await AxeCoreTestRunner.runValidation(element, DEFAULT_RULESET);
+      next();
+    }
+
+    async function testElementsStylesPane(next) {
+      TestRunner.addResult('Tests accessibility of the Styles pane using the axe-core linter');
+      await UI.viewManager.showView('elements');
+      const panel = self.runtime.sharedInstance(Elements.ElementsPanel);
+      const element = panel._stylesWidget.element;
+
+      await AxeCoreTestRunner.runValidation(element, NO_REQUIRED_CHILDREN_RULESET);
+      next();
+    }
+
+    async function testElementsComputedStylesPane(next) {
+      TestRunner.addResult('Tests accessibility in the Computed Styles pane using the axe-core linter');
+      await UI.viewManager.showView('elements');
+      await ElementsTestRunner.showComputedStyles();
+      const panel = self.runtime.sharedInstance(Elements.ElementsPanel);
+      const element = panel._computedStyleWidget.element;
+
+      await AxeCoreTestRunner.runValidation(element, DEFAULT_RULESET);
+      next();
+    }
+
+    TestRunner.runTestSuite(tests);
+  })();
\ No newline at end of file