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

@@ -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);

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>

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}
    */