DevTools: Fix accessibility issues in Sources Tool - Navigator Pane and Editor pane

Fixed the following accessibility issues in Sources Panel navigator pane and editor pane:

- Problem: No way to access nodes under FileSystem and Overrides panes in the Navigator view using keyboard
  Fix: Fixed by autoselecting the first node in these trees, so when you tab into the div containing the tree, some node is selected, and you can use keyboard to navigate through them

- Problem: Color contrast issue with lineNumbers in the editor
  Fix: Replace rgb(128, 128, 128) with equivalent hsl(0, 0, 50.2) and make it darker by changing lightness percentage to 46%, i.e. hsl(0, 0, 46)

Added following tests:
- a11y-axe-core\sources\sources-left-pane-a11y-test.js: Axe test for Sources panel Navigator pane
- a11y-axe-core\sources\sources-editor-pane-a11y-test.js: Axe test for Sources panel Editor pane

Images showing new colors in the Editor pane:
https://imgur.com/orA26yS (dark theme)
https://imgur.com/VSeTXck (light theme)

Video showing selection of FileSystem contents by default
https://imgur.com/l7wMKx6

Change-Id: I191d915818039455aeb7d9c6869c16b76d7ceeb7
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1593550Reviewed-by: Joel Einbinder <einbinder@chromium.org>
Commit-Queue: Anubha Mathur <anubmat@microsoft.com>
Cr-Commit-Position: refs/heads/master@{#676209}

third_party/blink/renderer/devtools/front_end/sources/NavigatorView.js

@@ -321,6 +321,7 @@ Sources.NavigatorView = class extends UI.VBox {
     const uiSourceCodeNode = new Sources.NavigatorUISourceCodeTreeNode(this, uiSourceCode, frame);
     folderNode.appendChild(uiSourceCodeNode);
     this._uiSourceCodeNodes.set(uiSourceCode, uiSourceCodeNode);
+    this._selectDefaultTreeNode();
   }
 
   /**
@@ -363,6 +364,14 @@ Sources.NavigatorView = class extends UI.VBox {
       return;
     this._rootNode.appendChild(new Sources.NavigatorGroupTreeNode(
         this, project, project.id(), Sources.NavigatorView.Types.FileSystem, project.displayName()));
+    this._selectDefaultTreeNode();
+  }
+
+  // TODO(einbinder) remove this code after crbug.com/964075 is fixed
+  _selectDefaultTreeNode() {
+    const children = this._rootNode.children();
+    if (children.length && !this._scriptsTree.selectedTreeElement)
+      children[0].treeNode().select(true /* omitFocus */, false /* selectedByUser */);
   }
 
   _computeUniqueFileSystemProjectNames() {

third_party/blink/renderer/devtools/front_end/text_editor/cmdevtools.css

@@ -115,7 +115,7 @@
 }
 
 .CodeMirror-linenumber {
-    color: rgb(128, 128, 128);
+    color: hsl(0, 0%, 46%);
     padding: 0 3px 0 5px;
     min-width: 22px;
     text-align: right;

third_party/blink/web_tests/http/tests/devtools/a11y-axe-core/sources/source-navigator-contentscripts-a11y-test-expected.txt

+Tests accessibility in the Sources panel Navigator pane Contentscripts tab using axe-core.
+top
+  (no domain)
+    contentScript1.js
+aXe violations: []
+
+

third_party/blink/web_tests/http/tests/devtools/a11y-axe-core/sources/source-navigator-contentscripts-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 Sources panel Navigator pane Contentscripts tab using axe-core.');
+
+  // 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,
+    },
+  };
+
+  await TestRunner.loadModule('axe_core_test_runner');
+  await TestRunner.loadModule('sdk_test_runner');
+  await TestRunner.loadModule('sources_test_runner');
+
+  await UI.viewManager.showView('sources');
+  await setup();
+
+  await testA11yForView(NO_REQUIRED_CHILDREN_RULESET);
+
+  TestRunner.completeTest();
+
+  async function setup() {
+    // Add content scripts
+    var pageMock = new SDKTestRunner.PageMock('http://example.com');
+    pageMock.connectAsMainTarget('page-target');
+    const url = 'contentScript1.js';
+    pageMock.evalScript(url, 'var script', true /* isContentScript */);
+    await TestRunner.waitForUISourceCode(url)
+  }
+
+  async function testA11yForView(ruleSet) {
+    await UI.viewManager.showView('navigator-contentScripts');
+    const sourcesNavigatorView = new Sources.ContentScriptsNavigatorView();
+
+    sourcesNavigatorView.show(UI.inspectorView.element);
+    SourcesTestRunner.dumpNavigatorView(sourcesNavigatorView);
+    const element = UI.panels.sources._navigatorTabbedLocation._tabbedPane.element;
+    await AxeCoreTestRunner.runValidation(element, ruleSet);
+  }
+})();

third_party/blink/web_tests/http/tests/devtools/a11y-axe-core/sources/source-navigator-filesystem-a11y-test-expected.txt

+Tests accessibility in the Sources panel Navigator pane FileSystem tab using axe-core.
+www3 [dimmed]
+aXe violations: []
+
+

third_party/blink/web_tests/http/tests/devtools/a11y-axe-core/sources/source-navigator-filesystem-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 Sources panel Navigator pane FileSystem tab using axe-core.');
+
+  // 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,
+    },
+  };
+
+  await TestRunner.loadModule('axe_core_test_runner');
+  await TestRunner.loadModule('bindings_test_runner');
+  await TestRunner.loadModule('sources_test_runner');
+
+  await UI.viewManager.showView('sources');
+  await setup();
+
+  await testA11yForView(NO_REQUIRED_CHILDREN_RULESET);
+
+  TestRunner.completeTest();
+
+  async function setup() {
+    // Add a filesystem folder
+    const testFileSystem = new BindingsTestRunner.TestFileSystem('file:///var/www3');
+    await testFileSystem.reportCreatedPromise();
+  }
+
+  async function testA11yForView(ruleSet) {
+    await UI.viewManager.showView('navigator-files');
+    const sourcesNavigatorView = new Sources.FilesNavigatorView();
+
+    sourcesNavigatorView.show(UI.inspectorView.element);
+    SourcesTestRunner.dumpNavigatorView(sourcesNavigatorView);
+    const element = UI.panels.sources._navigatorTabbedLocation._tabbedPane.element;
+    await AxeCoreTestRunner.runValidation(element, ruleSet);
+  }
+})();

third_party/blink/web_tests/http/tests/devtools/a11y-axe-core/sources/source-navigator-network-a11y-test-expected.txt

+Tests accessibility in the Sources panel Navigator pane Network tab using axe-core.
+top
+  127.0.0.1:8000
+    devtools/resources
+      inspected-page.html
+aXe violations: []
+
+

third_party/blink/web_tests/http/tests/devtools/a11y-axe-core/sources/source-navigator-network-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 Sources panel Navigator pane Network tab using axe-core.');
+
+  // 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,
+    },
+  };
+
+  await TestRunner.loadModule('axe_core_test_runner');
+  await TestRunner.loadModule('sources_test_runner');
+
+  await UI.viewManager.showView('sources');
+  await testA11yForView(NO_REQUIRED_CHILDREN_RULESET);
+
+  TestRunner.completeTest();
+
+  async function testA11yForView(ruleSet) {
+    await UI.viewManager.showView('navigator-network');
+    const sourcesNavigatorView = new Sources.NetworkNavigatorView();
+
+    sourcesNavigatorView.show(UI.inspectorView.element);
+    SourcesTestRunner.dumpNavigatorView(sourcesNavigatorView);
+    const element = UI.panels.sources._navigatorTabbedLocation._tabbedPane.element;
+    await AxeCoreTestRunner.runValidation(element, ruleSet);
+  }
+})();

third_party/blink/web_tests/http/tests/devtools/a11y-axe-core/sources/source-navigator-overrides-a11y-test-expected.txt

+Tests accessibility in the Sources panel Navigator pane Overrides tab using axe-core.
+ [dimmed]
+aXe violations: []
+
+

third_party/blink/web_tests/http/tests/devtools/a11y-axe-core/sources/source-navigator-overrides-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 Sources panel Navigator pane Overrides tab using axe-core.');
+
+  // 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,
+    },
+  };
+
+  await TestRunner.loadModule('axe_core_test_runner');
+  await TestRunner.loadModule('bindings_test_runner');
+  await TestRunner.loadModule('sources_test_runner');
+
+  await UI.viewManager.showView('sources');
+
+  await setup();
+  await testA11yForView(NO_REQUIRED_CHILDREN_RULESET);
+
+  TestRunner.completeTest();
+
+  async function setup() {
+    // Add an overrides folder
+    await BindingsTestRunner.createOverrideProject('file:///tmp/');
+  }
+
+  async function testA11yForView(ruleSet) {
+    await UI.viewManager.showView('navigator-overrides');
+    const sourcesNavigatorView = new Sources.OverridesNavigatorView();
+
+    sourcesNavigatorView.show(UI.inspectorView.element);
+    SourcesTestRunner.dumpNavigatorView(sourcesNavigatorView);
+    const element = UI.panels.sources._navigatorTabbedLocation._tabbedPane.element;
+    await AxeCoreTestRunner.runValidation(element, ruleSet);
+  }
+})();

third_party/blink/web_tests/http/tests/devtools/a11y-axe-core/sources/source-navigator-snippets-a11y-test-expected.txt

+Tests accessibility in the Sources panel Navigator pane Snippets tab using axe-core.
+Script snippet #1
+Script snippet #2
+aXe violations: []
+
+

third_party/blink/web_tests/http/tests/devtools/a11y-axe-core/sources/source-navigator-snippets-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 Sources panel Navigator pane Snippets tab using axe-core.');
+
+  // 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,
+    },
+  };
+
+  await TestRunner.loadModule('axe_core_test_runner');
+  await TestRunner.loadModule('sources_test_runner');
+
+  await UI.viewManager.showView('sources');
+
+  await setup();
+  await testA11yForView(NO_REQUIRED_CHILDREN_RULESET);
+
+  TestRunner.completeTest();
+
+  async function setup() {
+    // Add snippets
+    await Snippets.project.createFile('s1', null, '');
+    await Snippets.project.createFile('s2', null, '');
+  }
+
+  async function testA11yForView(ruleSet) {
+    await UI.viewManager.showView('navigator-snippets');
+    const sourcesNavigatorView = new Sources.SnippetsNavigatorView();
+
+    sourcesNavigatorView.show(UI.inspectorView.element);
+    SourcesTestRunner.dumpNavigatorView(sourcesNavigatorView);
+    const element = UI.panels.sources._navigatorTabbedLocation._tabbedPane.element;
+    await AxeCoreTestRunner.runValidation(element, ruleSet);
+  }
+})();

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

+Tests accessibility in the editor pane in sources panel using the axe-core linter.
+All tabs:
+Script snippet #1
+Script snippet #2
+
+
+aXe violations: []
+
+

third_party/blink/web_tests/http/tests/devtools/a11y-axe-core/sources/sources-editor-pane-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 editor pane in sources panel using the axe-core linter.');
+
+  // axe-core issue #1444 -- role="tree" requires children with role="treeitem",
+  // but it is reasonable to have trees with no leaves.
+  // Ignore 'aria-required-children' rule for tablist because it doesn't accommodate empty tablist.
+  const NO_REQUIRED_CHILDREN_RULESET = {
+    'aria-required-children': {
+      enabled: false,
+      selector: ':not(.tabbed-pane-header-tabs)'
+    },
+  };
+
+  await TestRunner.loadModule('axe_core_test_runner');
+  await TestRunner.loadModule('sources_test_runner');
+
+  await UI.viewManager.showView('sources');
+
+  await setup();
+  await runTest();
+
+  TestRunner.completeTest();
+
+  async function setup() {
+    const projects = Workspace.workspace.projectsForType(Workspace.projectTypes.FileSystem);
+    const snippetsProject = projects.find(
+      project => Persistence.FileSystemWorkspaceBinding.fileSystemType(project) === 'snippets');
+    const uiSourceCode1 = await snippetsProject.createFile('');
+    await Common.Revealer.reveal(uiSourceCode1);
+    const uiSourceCode2 = await snippetsProject.createFile('');
+    await Common.Revealer.reveal(uiSourceCode2);
+  }
+
+  async function runTest() {
+    // Verify contents of the TabHeader to make sure files are open
+    const tabbedPane = UI.panels.sources._sourcesView._editorContainer._tabbedPane;
+    const tabs = tabbedPane._tabs;
+    TestRunner.addResult('All tabs:');
+    tabs.forEach(tab => TestRunner.addResult(tab.title));
+    TestRunner.addResult('\n');
+
+    await runA11yTest();
+  }
+
+  async function runA11yTest() {
+    await UI.viewManager.showView('sources');
+    const element = UI.panels.sources._sourcesView.contentElement;
+    await AxeCoreTestRunner.runValidation(element, NO_REQUIRED_CHILDREN_RULESET);
+  }
+})();