DevTools: Update a11y DOM Breakpoint web_tests for axe-core roll

This change updates DevTools a11y DOM Breakpoint tests to
help facilitate the upcoming axe-core roll to V3.3.2.

axe-core v3.3.2 will now return an error if the element passed
in to axe.run are not attached to the document. This change
is to ensure that we show the DOM Breakpoings view in both
the elements and sources panel, thus ensuring its attached to
the document.

This change also updates the -expected file to account for
a change still in review which adds the relevant labels.

Change-Id: Ic5bb21e5a1b38beeb7abcbec19408aee5f83db14
Bug: 984817
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1810240Reviewed-by: Yang Guo <yangguo@chromium.org>
Commit-Queue: Mike Jackson <mjackson@microsoft.com>
Cr-Commit-Position: refs/heads/master@{#698000}

third_party/blink/web_tests/http/tests/devtools/a11y-axe-core/elements/dom-breakpoints-a11y-test.js

@@ -4,33 +4,26 @@
 (async function() {
   TestRunner.addResult(
       'Tests accessibility in DOM breakpoints using the axe-core linter.');
+
   await TestRunner.loadModule('axe_core_test_runner');
   await TestRunner.loadModule('elements_test_runner');
   await TestRunner.showPanel('elements');
-  await UI.viewManager.showView('elements.domBreakpoints');
+  UI.panels.elements.sidebarPaneView.tabbedPane().selectTab('elements.domBreakpoints', true);
 
   await TestRunner.navigatePromise(
       '../../sources/debugger-breakpoints/resources/dom-breakpoints.html');
-  await ElementsTestRunner.nodeWithId('rootElement', domBpTest);
 
-  async function domBpTest(node) {
-    if (!node) {
-      TestRunner.addResult('Could not locate node with id rootElement.');
-      TestRunner.completeTest();
-      return;
-    }
+  const rootElement = await ElementsTestRunner.nodeWithIdPromise('rootElement');
 
-    // Add Dom breakpoints and then test
-    TestRunner.domDebuggerModel.setDOMBreakpoint(
-        node, SDK.DOMDebuggerModel.DOMBreakpoint.Type.SubtreeModified);
-    TestRunner.domDebuggerModel.setDOMBreakpoint(
-        node, SDK.DOMDebuggerModel.DOMBreakpoint.Type.AttributeModified);
-    TestRunner.addResult(
-        'Test DOM breakpoint container with multiple breakpoints.');
-    const view = 'elements.domBreakpoints';
-    const widget = await UI.viewManager.view(view).widget();
-    await AxeCoreTestRunner.runValidation(widget.element);
+  // Add Dom breakpoints and then test
+  TestRunner.domDebuggerModel.setDOMBreakpoint(
+    rootElement, SDK.DOMDebuggerModel.DOMBreakpoint.Type.SubtreeModified);
+  TestRunner.domDebuggerModel.setDOMBreakpoint(
+    rootElement, SDK.DOMDebuggerModel.DOMBreakpoint.Type.AttributeModified);
+  TestRunner.addResult(
+      'Test DOM breakpoint container with multiple breakpoints.');
 
-    TestRunner.completeTest();
-  }
+  const widget = UI.panels.elements.sidebarPaneView.tabbedPane().visibleView;
+  await AxeCoreTestRunner.runValidation(widget.element);
+  TestRunner.completeTest();
 })();

third_party/blink/web_tests/http/tests/devtools/a11y-axe-core/sources/dom-breakpoints-pane-a11y-test-expected.txt

 Testing accessibility in the DOM breakpoints pane.
 Setting DOM breakpoints.
+DOM breakpoints container text content: DOM BreakpointsSubtree modifiedNode removedNo breakpoints
 DOM breakpoints pane text content: Subtree modifiedNode removedNo breakpoints
 Running the axe-core linter on the DOM breakpoints pane.
-aXe violations: []
+aXe violations: [
+  {
+    "ruleDescription": "Ensures every form element has a label",
+    "helpUrl": "https://dequeuniversity.com/rules/axe/3.0/label?application=axeAPI",
+    "ruleId": "label",
+    "impact": "critical",
+    "failedNodes": [
+      {
+        "target": [
+          [
+            "div:nth-child(7) > div.vbox.flex-auto",
+            ".widget.vbox > .breakpoint-list > div:nth-child(1) > span",
+            "#ui-checkbox-label9"
+          ]
+        ],
+        "html": "<input type=\"checkbox\" id=\"ui-checkbox-label9\" aria-label=\"Subtree modified: div#rootElement\">",
+        "failureSummary": "Fix any of the following:\n  aria-label attribute does not exist or is empty\n  aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty or not visible\n  Form element does not have an implicit (wrapped) <label>\n  Form element does not have an explicit <label>\n  Element has no title attribute or the title attribute is empty"
+      },
+      {
+        "target": [
+          [
+            "div:nth-child(7) > div.vbox.flex-auto",
+            ".widget.vbox > .breakpoint-list > div:nth-child(2) > span",
+            "#ui-checkbox-label10"
+          ]
+        ],
+        "html": "<input type=\"checkbox\" id=\"ui-checkbox-label10\" aria-label=\"Node removed: div#hostElement\">",
+        "failureSummary": "Fix any of the following:\n  aria-label attribute does not exist or is empty\n  aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty or not visible\n  Form element does not have an implicit (wrapped) <label>\n  Form element does not have an explicit <label>\n  Element has no title attribute or the title attribute is empty"
+      }
+    ]
+  }
+]
 
 

third_party/blink/web_tests/http/tests/devtools/a11y-axe-core/sources/dom-breakpoints-pane-a11y-test.js

@@ -5,14 +5,17 @@
 (async function() {
   await TestRunner.loadModule('axe_core_test_runner');
   await TestRunner.loadModule('elements_test_runner');
+  await TestRunner.loadModule('sources_test_runner');
+  await TestRunner.showPanel('elements');
   await TestRunner.showPanel('sources');
   await TestRunner.navigatePromise(
-      '../../sources/debugger-breakpoints/resources/dom-breakpoints.html');
+    '../../sources/debugger-breakpoints/resources/dom-breakpoints.html');
 
   TestRunner.addResult('Testing accessibility in the DOM breakpoints pane.');
-  await UI.viewManager.showView('sources.domBreakpoints');
-  const domBreakpointsPane =
-      self.runtime.sharedInstance(BrowserDebugger.DOMBreakpointsSidebarPane);
+
+  // Expand the DOM Breakpoints container
+  const domBreakpointContainer = UI.panels.sources._sidebarPaneStack._expandableContainers.get('sources.domBreakpoints');
+  await domBreakpointContainer._expand();
 
   TestRunner.addResult('Setting DOM breakpoints.');
   const rootElement = await ElementsTestRunner.nodeWithIdPromise('rootElement');
@@ -24,10 +27,15 @@
       hostElement, SDK.DOMDebuggerModel.DOMBreakpoint.Type.NodeRemoved);
   TestRunner.domDebuggerModel.toggleDOMBreakpoint(breakpoint, false);
 
+  const domBreakpointsPane =
+    self.runtime.sharedInstance(BrowserDebugger.DOMBreakpointsSidebarPane);
+
+  TestRunner.addResult(`DOM breakpoints container text content: ${domBreakpointContainer.contentElement.deepTextContent()}`);
   TestRunner.addResult(`DOM breakpoints pane text content: ${domBreakpointsPane.contentElement.deepTextContent()}`);
+
   TestRunner.addResult(
       'Running the axe-core linter on the DOM breakpoints pane.');
-  await AxeCoreTestRunner.runValidation(domBreakpointsPane.contentElement);
 
+  await AxeCoreTestRunner.runValidation(domBreakpointContainer.element);
   TestRunner.completeTest();
 })();