WebUI Tab Strip: Add aria-label to group chips

The chips should read out either the group title or "Unnamed group"
and also read out the contents of the group.

Bug: 1027373
Change-Id: Ia8eb6f31433e8cec7e1f80c1185e45d970100db0
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2099024
Commit-Queue: John Lee <johntlee@chromium.org>
Reviewed-by: Esmael Elmoslimany <aee@chromium.org>
Cr-Commit-Position: refs/heads/master@{#749487}

chrome/browser/resources/tab_strip/BUILD.gn

@@ -79,6 +79,7 @@ js_library("tab_group") {
     ":custom_element",
     ":tab_strip_embedder_proxy",
     ":tabs_api_proxy",
+    "//ui/webui/resources/js:load_time_data.m",
   ]
 }
 

chrome/browser/resources/tab_strip/tab_group.html

@@ -169,7 +169,8 @@
 <div id="dragImage">
   <div id="tabGroup">
     <div id="chipContainer">
-      <div id="chip" draggable="true" tabindex="0" role="button">
+      <div id="chip" draggable="true" tabindex="0" role="button"
+         aria-describedby="tabs">
         <div id="title"></div>
       </div>
     </div>

chrome/browser/resources/tab_strip/tab_group.js

@@ -2,6 +2,8 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import {loadTimeData} from 'chrome://resources/js/load_time_data.m.js';
+
 import {CustomElement} from './custom_element.js';
 import {TabStripEmbedderProxy} from './tab_strip_embedder_proxy.js';
 import {TabGroupVisualData} from './tabs_api_proxy.js';
@@ -17,9 +19,10 @@ export class TabGroupElement extends CustomElement {
     /** @private @const {!TabStripEmbedderProxy} */
     this.embedderApi_ = TabStripEmbedderProxy.getInstance();
 
-    const chip = this.$('#chip');
-    chip.addEventListener('click', () => this.onClickChip_());
-    chip.addEventListener(
+    /** @private @const {!HTMLElement} */
+    this.chip_ = /** @type {!HTMLElement} */ (this.$('#chip'));
+    this.chip_.addEventListener('click', () => this.onClickChip_());
+    this.chip_.addEventListener(
         'keydown', e => this.onKeydownChip_(/** @type {!KeyboardEvent} */ (e)));
   }
 
@@ -73,6 +76,17 @@ export class TabGroupElement extends CustomElement {
     this.style.setProperty('--tabstrip-tab-group-color-rgb', visualData.color);
     this.style.setProperty(
         '--tabstrip-tab-group-text-color-rgb', visualData.textColor);
+
+    // Content strings are empty for the label and are instead replaced by
+    // the aria-describedby attribute on the chip.
+    if (visualData.title) {
+      this.chip_.setAttribute(
+          'aria-label',
+          loadTimeData.getStringF('namedGroupLabel', visualData.title, ''));
+    } else {
+      this.chip_.setAttribute(
+          'aria-label', loadTimeData.getStringF('unnamedGroupLabel', ''));
+    }
   }
 }
 

chrome/browser/ui/webui/tab_strip/tab_strip_ui.cc

@@ -87,6 +87,8 @@ TabStripUI::TabStripUI(content::WebUI* web_ui)
       {"pipPlaying", IDS_TAB_AX_LABEL_PIP_PLAYING_FORMAT},
       {"desktopCapturing", IDS_TAB_AX_LABEL_DESKTOP_CAPTURING_FORMAT},
       {"vrPresenting", IDS_TAB_AX_LABEL_VR_PRESENTING},
+      {"unnamedGroupLabel", IDS_GROUP_AX_LABEL_UNNAMED_GROUP_FORMAT},
+      {"namedGroupLabel", IDS_GROUP_AX_LABEL_NAMED_GROUP_FORMAT},
   };
   AddLocalizedStringsBulk(html_source, kStrings);
   content::WebUIDataSource::Add(profile, html_source);