From cb8321822daca6358bc5d452bbe32971bbf3c481 Mon Sep 17 00:00:00 2001
From: Rob Paveza <Rob.Paveza@microsoft.com>
Date: Wed, 16 Oct 2019 23:13:00 +0000
Subject: [PATCH] DevTools: Service Worker URLs are not read by screen readers

When a screen reader user is tabbing through the registered
service workers, the screen reader fails to announce the origins
from which the service workers are registered. By default, the
reader just announces "Update", as the Update button is the first
focusable element within each individual Service Worker view.

This change adds a new API to ReportView.Section. Because Section
is a generic control which may not always follow this paradigm,
the new API seems to be the best choice for how to implement. The
API is opt-in by call sites as demonstrated by this use of it.
The API sets the role="group" on the containing element, and
applies a label to the containing element. Upon focus entering the
containing element, the full title is read aloud.

"After" screencap: https://imgur.com/a/XfMg2SA

Bug: 963183
Change-Id: I5ef631d24d9f2df9f610a21c84fd5a9d6ae26b48
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1864721
Reviewed-by: Lorne Mitchell <lomitch@microsoft.com>
Commit-Queue: Robert Paveza <Rob.Paveza@microsoft.com>
Cr-Original-Commit-Position: refs/heads/master@{#706688}
Cr-Mirrored-From: https://chromium.googlesource.com/chromium/src
Cr-Mirrored-Commit: e1961cc7bcaddd8cc0fc6cf86bfea5ff1998c989
---
 front_end/resources/ServiceWorkersView.js  | 1 +
 front_end/resources/resources_strings.grdp | 3 +++
 front_end/ui/ReportView.js                 | 9 +++++++++
 3 files changed, 13 insertions(+)

diff --git a/front_end/resources/ServiceWorkersView.js b/front_end/resources/ServiceWorkersView.js
index 01b793a296..7a9e2cc303 100644
--- a/front_end/resources/ServiceWorkersView.js
+++ b/front_end/resources/ServiceWorkersView.js
@@ -243,6 +243,7 @@ Resources.ServiceWorkersView = class extends UI.VBox {
     if (!section) {
       const title = registration.scopeURL;
       const uiSection = this._getReportViewForOrigin(registration.securityOrigin).appendSection(title);
+      uiSection.setUiGroupTitle(ls`Service worker for ${title}`);
       uiSection[this._registrationSymbol] = registration;
       section = new Resources.ServiceWorkersView.Section(
           /** @type {!SDK.ServiceWorkerManager} */ (this._manager), uiSection, registration);
diff --git a/front_end/resources/resources_strings.grdp b/front_end/resources/resources_strings.grdp
index 098e764d9d..c0ba907080 100644
--- a/front_end/resources/resources_strings.grdp
+++ b/front_end/resources/resources_strings.grdp
@@ -209,6 +209,9 @@ read the &quot;<ph name="THIS_TABLENAME">$1s<ex>database</ex></ph>&quot; table.
   <message name="IDS_DEVTOOLS_9999106349673567ecaf1c32c07301a5" desc="Text in Service Workers View of the Application panel">
     #<ph name="WAITING_ID">$1s<ex>2</ex></ph> waiting to activate
   </message>
+  <message name="IDS_DEVTOOLS_99ccbbe2741019f0bbc87f4eb83dbc1d" desc="Screen reader title for a section of the Service Workers view of the Application panel">
+    Service worker for <ph name="TITLE"><ex>https://example.com</ex>$1s</ph>
+  </message>
   <message name="IDS_DEVTOOLS_9b2a7456cec10d8b5ab8ce656598320b" desc="Text in Indexed DBViews of the Application panel">
     Key path: '''
   </message>
diff --git a/front_end/ui/ReportView.js b/front_end/ui/ReportView.js
index 0be2ec8a99..be188a11f1 100644
--- a/front_end/ui/ReportView.js
+++ b/front_end/ui/ReportView.js
@@ -150,6 +150,15 @@ export class Section extends UI.VBox {
     this._titleElement.classList.toggle('hidden', !this._titleElement.textContent);
   }
 
+  /**
+   * Declares the overall container to be a group and assigns a title.
+   * @param {string} groupTitle
+   */
+  setUiGroupTitle(groupTitle) {
+    UI.ARIAUtils.markAsGroup(this.element);
+    UI.ARIAUtils.setAccessibleName(this.element, groupTitle);
+  }
+
   /**
    * @return {!UI.Toolbar}
    */