[NTP][Realbox] Adds a11y label/tooltip to suggestion group toggle button

The a11y label changes between "Hide the 'X' section" and
"Show the 'X' section" depending on the suggestion group visibility where
X is the suggestion group header (e.g., 'Recommended for you').

The tooltip changes between "Hide Suggestions" and "Show Suggestions"
depending on the suggestion group visibility.

Bug: 1052514
Change-Id: Ib7bce19b8d203e57b9b916fbcc089a58593bdd68
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2206222
Commit-Queue: Moe Ahmadi <mahmadi@chromium.org>
Reviewed-by: Tibor Goldschwendt <tiborg@chromium.org>
Reviewed-by: manuk hovanesian <manukh@chromium.org>
Cr-Commit-Position: refs/heads/master@{#770341}

chrome/browser/resources/local_ntp/local_ntp.css

@@ -401,6 +401,7 @@ html[dir=rtl] .image-container {
 #realbox-matches .remove-match {
   border-radius: 50%;
   height: 24px;
+  outline: none;
   position: absolute;
   right: 16px;
   top: 4px;

chrome/browser/resources/local_ntp/local_ntp.js

@@ -1682,13 +1682,13 @@ function renderAutocompleteMatches(matches, suggestionGroupsMap) {
   suggestionGroupElsMap = {};
 
   /**
-   * Creates and returns a remove button that once clicked invokes |callback|.
+   * Creates and returns an action button that once clicked invokes |callback|.
    * @param {!function()} callback
    */
-  function createRemoveButton(callback) {
+  function createActionButton(callback) {
     const icon = document.createElement('button');
-    icon.title = configData.translatedStrings.removeSuggestion;
     icon.classList.add(CLASSES.REMOVE_ICON);
+    icon.tabIndex = -1;
     icon.onmousedown = e => {
       e.preventDefault();  // Stops default browser action (focus)
     };
@@ -1703,10 +1703,13 @@ function renderAutocompleteMatches(matches, suggestionGroupsMap) {
       e.preventDefault();  // Stops default browser action (navigation)
     };
 
-    const remove = document.createElement('div');
-    remove.classList.add(CLASSES.REMOVE_MATCH);
-    remove.appendChild(icon);
-    return remove;
+    const action = document.createElement('div');
+
+    action.classList.add(CLASSES.REMOVE_MATCH);
+    action.tabIndex = 0;
+    action.setAttribute('role', 'button');
+    action.appendChild(icon);
+    return action;
   }
 
   /**
@@ -1721,6 +1724,21 @@ function renderAutocompleteMatches(matches, suggestionGroupsMap) {
 
     const suggestionGroup = assert(suggestionGroupsMap[suggestionGroupId]);
 
+    /**
+     * Updates the tooltip and a11y label of the suggestion group toggle button.
+     * @param {!Element} toggleButtonEl
+     * @param {boolean} groupIsHidden
+     */
+    function updateToggleButtonA11y(toggleButtonEl, groupIsHidden) {
+      toggleButtonEl.title = groupIsHidden ?
+          configData.translatedStrings.showSuggestions :
+          configData.translatedStrings.hideSuggestions;
+      toggleButtonEl.ariaLabel = utils.substituteString(
+          groupIsHidden ? configData.translatedStrings.showSection :
+                          configData.translatedStrings.hideSection,
+          suggestionGroup.header);
+    }
+
     const groupEl = document.createElement('div');
     groupEl.classList.toggle(CLASSES.COLLAPSED, suggestionGroup.hidden);
     const headerEl = document.createElement('a');
@@ -1730,12 +1748,15 @@ function renderAutocompleteMatches(matches, suggestionGroupsMap) {
     headerEl.tabIndex = -1;
     headerEl.append(document.createTextNode(suggestionGroup.header));
     if (configData.suggestionTransparencyEnabled) {
-      const remove = createRemoveButton(() => {
+      const toggle = createActionButton(() => {
         groupEl.classList.toggle(CLASSES.COLLAPSED);
+        updateToggleButtonA11y(
+            toggle, groupEl.classList.contains(CLASSES.COLLAPSED));
         window.chrome.embeddedSearch.searchBox
             .toggleSuggestionGroupIdVisibility(suggestionGroupId);
       });
-      headerEl.appendChild(remove);
+      updateToggleButtonA11y(toggle, suggestionGroup.hidden);
+      headerEl.appendChild(toggle);
       realboxMatchesEl.classList.add(CLASSES.REMOVABLE);
     }
     groupEl.appendChild(headerEl);
@@ -1832,9 +1853,10 @@ function renderAutocompleteMatches(matches, suggestionGroupsMap) {
     }
 
     if (match.supportsDeletion && configData.suggestionTransparencyEnabled) {
-      const remove = createRemoveButton(() => {
+      const remove = createActionButton(() => {
         window.chrome.embeddedSearch.searchBox.deleteAutocompleteMatch(i);
       });
+      remove.title = configData.translatedStrings.removeSuggestion;
       matchEl.appendChild(remove);
       realboxMatchesEl.classList.add(CLASSES.REMOVABLE);
     }

chrome/browser/resources/local_ntp/utils.js

@@ -60,3 +60,23 @@ utils.setPlatformClass = function(element) {
   element.classList.toggle(
       CLASSES.MAC, navigator.userAgent.indexOf('Mac') > -1);
 };
+
+/**
+ * Returns a formatted localized string where $1 to $9 are replaced by the
+ * second to the tenth argument. Any standalone $ signs must be escaped as
+ * $$.
+ * Copied from //ui/webui/resources/js/load_time_data.js temporarily as the
+ * local NTP will be replaced by the WebUI NTP.
+ * @param {string} label The label to substitute through.
+ *     This is not an resource ID.
+ * @param {...(string|number)} var_args The extra values to include in the
+ *     formatted output.
+ * @return {string} The formatted string.
+ */
+utils.substituteString = function(label, var_args) {
+  const varArgs = arguments;
+  return label.replace(/\$(.|$|\n)/g, function(m) {
+    assert(m.match(/\$[$1-9]/), 'Unescaped $ found in localized string.');
+    return m === '$$' ? '$' : varArgs[m[1]];
+  });
+};

chrome/browser/search/local_ntp_source.cc

@@ -332,6 +332,14 @@ std::unique_ptr<base::DictionaryValue> GetTranslatedStrings(bool is_google) {
               IDS_AUTOCOMPLETE_MATCH_DESCRIPTION_SEPARATOR);
     AddString(translated_strings.get(), "removeSuggestion",
               IDS_OMNIBOX_REMOVE_SUGGESTION);
+    AddString(translated_strings.get(), "hideSuggestions",
+              IDS_TOOLTIP_HEADER_HIDE_SUGGESTIONS_BUTTON);
+    AddString(translated_strings.get(), "showSuggestions",
+              IDS_TOOLTIP_HEADER_SHOW_SUGGESTIONS_BUTTON);
+    AddString(translated_strings.get(), "hideSection",
+              IDS_ACC_HEADER_HIDE_SUGGESTIONS_BUTTON);
+    AddString(translated_strings.get(), "showSection",
+              IDS_ACC_HEADER_SHOW_SUGGESTIONS_BUTTON);
 
     // Promos
     AddString(translated_strings.get(), "dismissPromo", IDS_NTP_DISMISS_PROMO);

components/omnibox_strings.grdp

@@ -249,9 +249,16 @@
   </message>
   <!-- Tooltip labels for the omnibox popup header show/hide toggle button. -->
   <message name="IDS_TOOLTIP_HEADER_SHOW_SUGGESTIONS_BUTTON" desc="Tooltip for the Show Suggestions button on section headers.">
-    Show Suggestions
+    Show suggestions
   </message>
   <message name="IDS_TOOLTIP_HEADER_HIDE_SUGGESTIONS_BUTTON" desc="Tooltip for the Hide Suggestions button on section headers.">
-    Hide Suggestions
+    Hide suggestions
+  </message>
+  <!-- Accessibility labels for the omnibox popup header show/hide toggle button. -->
+  <message name="IDS_ACC_HEADER_SHOW_SUGGESTIONS_BUTTON" desc="Announcement for the Show Suggestions button on section headers.">
+    Show the &quot;<ph name="SECTION">$1<ex>related to recent searches</ex></ph>&quot; section
+  </message>
+  <message name="IDS_ACC_HEADER_HIDE_SUGGESTIONS_BUTTON" desc="Announcement for the Hide Suggestions button on section headers.">
+    Hide the &quot;<ph name="SECTION">$1<ex>related to recent searches</ex></ph>&quot; section
   </message>
 </grit-part>