MD-Extensions: A11y - Announce search results to screen reader.

Bug: 789718
Cq-Include-Trybots: master.tryserver.chromium.linux:closure_compilation
Change-Id: Ifd5d6153a4ea4e835c9187c8dab0ede871a052c1
Reviewed-on: https://chromium-review.googlesource.com/799031
Commit-Queue: Hector Carmona <hcarmona@chromium.org>
Reviewed-by: Demetrios Papadopoulos <dpapad@chromium.org>
Cr-Commit-Position: refs/heads/master@{#520714}

chrome/app/md_extensions_strings.grdp

@@ -133,6 +133,9 @@
   <message name="IDS_MD_EXTENSIONS_NO_SEARCH_RESULTS" desc="The message shown to the user when a search on the Extensions settings page has no matching results.">
     No search results found
   </message>
+  <message name="IDS_MD_EXTENSIONS_SEARCH_RESULTS" desc="The accessibility message announced to screen readers when there are results on a search for extensions.">
+    Search results for '<ph name="SEARCH_TEXT">$1<ex>cookies</ex></ph>'
+  </message>
   <message name="IDS_MD_EXTENSIONS_NO_DESCRIPTION" desc="The message shown to the user when an extension does not have any description.">
     No description provided
   </message>

chrome/browser/resources/md_extensions/compiled_resources2.gyp

@@ -92,6 +92,7 @@
     {
       'target_name': 'item_list',
       'dependencies': [
+        '<(DEPTH)/third_party/polymer/v1_0/components-chromium/iron-a11y-announcer/compiled_resources2.gyp:iron-a11y-announcer-extracted',
         '<(DEPTH)/ui/webui/resources/cr_elements/compiled_resources2.gyp:cr_container_shadow_behavior',
         '<(DEPTH)/ui/webui/resources/js/compiled_resources2.gyp:assert',
         '<(DEPTH)/ui/webui/resources/js/compiled_resources2.gyp:cr',

chrome/browser/resources/md_extensions/item_list.html

@@ -3,6 +3,8 @@
 <link rel="import" href="chrome://resources/cr_elements/cr_container_shadow_behavior.html">
 <link rel="import" href="chrome://resources/cr_elements/shared_style_css.html">
 <link rel="import" href="chrome://resources/html/cr.html">
+<link rel="import" href="chrome://resources/html/i18n_behavior.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/iron-a11y-announcer/iron-a11y-announcer.html">
 <link rel="import" href="item.html">
 
 <dom-module id="extensions-item-list">
@@ -72,7 +74,7 @@
           by experimentation, and it is a good trade-off between initial render
           time and total render time. -->
         <template is="dom-repeat" items="[[extensions]]" initial-count="3"
-            filter="[[computeFilter_(filter)]]"
+            filter="[[computedFilter_]]"
             rendered-item-count="{{shownExtensionsCount_::dom-change}}"
             notify-dom-change>
           <extensions-item id="[[item.id]]" data="[[item]]"
@@ -86,7 +88,7 @@
         <h2 id="app-title" class="items-container">$i18n{appsTitle}</h2>
         <div class="items-container">
           <template is="dom-repeat" items="[[apps]]" initial-count="3"
-              filter="[[computeFilter_(filter)]]"
+              filter="[[computedFilter_]]"
               rendered-item-count="{{shownAppsCount_::dom-change}}"
               notify-dom-change>
             <extensions-item id="[[item.id]]" data="[[item]]"

chrome/browser/resources/md_extensions/item_list.js

@@ -6,7 +6,7 @@ cr.define('extensions', function() {
   const ItemList = Polymer({
     is: 'extensions-item-list',
 
-    behaviors: [CrContainerShadowBehavior],
+    behaviors: [CrContainerShadowBehavior, I18nBehavior],
 
     properties: {
       /** @type {!Array<!chrome.developerPrivate.ExtensionInfo>} */
@@ -25,7 +25,16 @@ cr.define('extensions', function() {
 
       isGuest: Boolean,
 
-      filter: String,
+      filter: {
+        type: String,
+      },
+
+      /** @private */
+      computedFilter_: {
+        type: String,
+        computed: 'computeFilter_(filter)',
+        observer: 'announceSearchResults_',
+      },
 
       /** @private */
       shownExtensionsCount_: {
@@ -81,6 +90,20 @@ cr.define('extensions', function() {
       return !this.isGuest && !this.shouldShowEmptyItemsMessage_() &&
           this.shownAppsCount_ === 0 && this.shownExtensionsCount_ === 0;
     },
+
+    /** @private */
+    announceSearchResults_: function() {
+      if (this.computedFilter_) {
+        Polymer.IronA11yAnnouncer.requestAvailability();
+        this.async(() => {  // Async to allow list to update.
+          this.fire('iron-announce', {
+            text: this.shouldShowEmptySearchMessage_() ?
+                this.i18n('noSearchResults') :
+                this.i18n('searchResults', this.filter),
+          });
+        });
+      }
+    },
   });
 
   return {

chrome/browser/ui/webui/extensions/extensions_ui.cc

@@ -146,6 +146,7 @@ content::WebUIDataSource* CreateMdExtensionsSource(bool in_dev_mode) {
   source->AddLocalizedString("noDescription", IDS_MD_EXTENSIONS_NO_DESCRIPTION);
   source->AddLocalizedString("noSearchResults",
                              IDS_MD_EXTENSIONS_NO_SEARCH_RESULTS);
+  source->AddLocalizedString("searchResults", IDS_MD_EXTENSIONS_SEARCH_RESULTS);
   source->AddLocalizedString("dropToInstall",
                              IDS_EXTENSIONS_INSTALL_DROP_TARGET);
   source->AddLocalizedString("errorsPageHeading",