Devtools: a11y fixes for Clear Storage view

Accessibility testing revealed the following within the tool:
1. an empty heading for clear storage button section

This change adds:
1. hide section heading element if title is empty
2. group the check boxes underneath Application/Storage/Cache sections to deliver a better experience for keyboard/SR users
3. add test coverage

Bug: 963183

Change-Id: Ic7ceae7fa513fe959aa45e041c7064e650afa720
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1601573Reviewed-by: Erik Luo <luoe@chromium.org>
Commit-Queue: Junyi Xiao <juxiao@microsoft.com>
Cr-Commit-Position: refs/heads/master@{#662881}

third_party/blink/renderer/devtools/front_end/resources/ClearStorageView.js

@@ -52,16 +52,19 @@ Resources.ClearStorageView = class extends UI.ThrottledWidget {
 
     const application = this._reportView.appendSection(Common.UIString('Application'));
     this._appendItem(application, Common.UIString('Unregister service workers'), 'service_workers');
+    application.markFieldListAsGroup();
 
     const storage = this._reportView.appendSection(Common.UIString('Storage'));
     this._appendItem(storage, Common.UIString('Local and session storage'), 'local_storage');
     this._appendItem(storage, Common.UIString('IndexedDB'), 'indexeddb');
     this._appendItem(storage, Common.UIString('Web SQL'), 'websql');
     this._appendItem(storage, Common.UIString('Cookies'), 'cookies');
+    storage.markFieldListAsGroup();
 
     const caches = this._reportView.appendSection(Common.UIString('Cache'));
     this._appendItem(caches, Common.UIString('Cache storage'), 'cache_storage');
     this._appendItem(caches, Common.UIString('Application cache'), 'appcache');
+    caches.markFieldListAsGroup();
 
     SDK.targetManager.observeTargets(this);
   }

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

@@ -118,7 +118,7 @@ UI.ReportView.Section = class extends UI.VBox {
       this.element.classList.add(className);
     this._headerElement = this.element.createChild('div', 'report-section-header');
     this._titleElement = this._headerElement.createChild('div', 'report-section-title');
-    this._titleElement.textContent = title;
+    this.setTitle(title);
     UI.ARIAUtils.markAsHeading(this._titleElement, 2);
     this._fieldList = this.element.createChild('div', 'vbox');
     /** @type {!Map.<string, !Element>} */
@@ -138,6 +138,7 @@ UI.ReportView.Section = class extends UI.VBox {
   setTitle(title) {
     if (this._titleElement.textContent !== title)
       this._titleElement.textContent = title;
+    this._titleElement.classList.toggle('hidden', !this._titleElement.textContent);
   }
 
   /**
@@ -207,4 +208,9 @@ UI.ReportView.Section = class extends UI.VBox {
     this._fieldList.removeChildren();
     this._fieldMap.clear();
   }
+
+  markFieldListAsGroup() {
+    UI.ARIAUtils.markAsGroup(this._fieldList);
+    UI.ARIAUtils.setAccessibleName(this._fieldList, this.title());
+  }
 };

third_party/blink/web_tests/http/tests/devtools/a11y-axe-core/application-panel/clear-storage-a11y-test-expected.txt

+Tests accessibility in the Clear Storage view using the axe-core linter.
+Clear storage view is visible: true
+aXe violations: []
+

third_party/blink/web_tests/http/tests/devtools/a11y-axe-core/application-panel/clear-storage-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 Clear Storage view using the axe-core linter.`);
+  await TestRunner.loadModule('application_test_runner');
+  await TestRunner.loadModule('axe_core_test_runner');
+  await ApplicationTestRunner.resetState();
+  await TestRunner.showPanel('resources');
+  async function writeArray() {
+    const array = Array(20000).fill(0);
+    const mainFrameId = TestRunner.resourceTreeModel.mainFrame.id;
+    await new Promise(resolve => ApplicationTestRunner.createDatabase(mainFrameId, 'Database1', resolve));
+    await new Promise(
+        resolve => ApplicationTestRunner.createObjectStore(mainFrameId, 'Database1', 'Store1', 'id', true, resolve));
+    await new Promise(
+        resolve =>
+            ApplicationTestRunner.addIDBValue(mainFrameId, 'Database1', 'Store1', {key: 1, value: array}, '', resolve));
+  }
+  async function runAxe(element) {
+    try {
+      const results = await axe.run(element);
+      const violations = AxeCoreTestRunner.processAxeResult(results.violations);
+      TestRunner.addResult(`aXe violations: ${violations}`);
+    } catch (e) {
+      TestRunner.addResult(`aXe threw an error: '${e}'`);
+    }
+  }
+  await UI.viewManager.showView('resources');
+  const parent = UI.panels.resources._sidebar._applicationTreeElement;
+  const clearStorageElement = parent.children().find(child => child.title === ls`Clear storage`);
+  clearStorageElement.select();
+  const clearStorageView = UI.panels.resources.visibleView;
+  TestRunner.addResult('Clear storage view is visible: ' + (clearStorageView instanceof Resources.ClearStorageView));
+  await writeArray();
+  await runAxe(clearStorageView.contentElement);
+  TestRunner.completeTest();
+})();