history: announce search/time ranges.

R=dmazzoni@chromium.org
BUG=431019
TEST=search for something on history page -> should announce the number of results

Review URL: https://codereview.chromium.org/707123002

Cr-Commit-Position: refs/heads/master@{#305116}

chrome/app/generated_resources.grd

@@ -506,6 +506,15 @@ Psst! Incognito mode <ph name="SHORTCUT_KEY">$1<ex>(Ctrl+Shift+N)</ex></ph> may
       <message name="IDS_HISTORY_SEARCHRESULTSFOR" desc="Format string for search results">
         Search results for '<ph name="SEARCH_STRING">$1</ph>'
       </message>
+      <message name="IDS_HISTORY_SEARCH_RESULT" desc="Used when a single result is found.">
+        search result
+      </message>
+      <message name="IDS_HISTORY_SEARCH_RESULTS" desc="Used when plural/multiple results are found.">
+        search results
+      </message>
+      <message name="IDS_HISTORY_FOUND_SEARCH_RESULTS" desc="Message shown when zero or multiple search results are found.">
+        Found <ph name="NUMBER_OF_RESULTS">$1</ph> <ph name="SEARCH_RESULTS"><ex>search results</ex>$2</ph> for '<ph name="SEARCH_STRING">$3</ph>'.
+      </message>
       <message name="IDS_HISTORY_BROWSERESULTS" desc="Title of browsing results page">
         History
       </message>

chrome/browser/resources/history/history.html

@@ -81,7 +81,7 @@
         <input type="search" id="search-field"
                i18n-values="aria-label:searchButton">
         <input type="submit" id="search-button"
-               i18n-values="value:searchButton">
+               i18n-values="value:searchButton" aria-controls="results-header">
       </div>
       <div id="filter-controls" hidden>
         <div id="range-controls">
@@ -94,11 +94,14 @@
         </div>
         <div id="timeframe-controls">
           <input type="radio" name="timeframe-filter" value="0" checked
-              i18n-values="aria-label:rangeAllTime">
+              i18n-values="aria-label:rangeAllTime"
+              aria-controls="results-header">
           <input type="radio" name="timeframe-filter" value="1"
-              i18n-values="aria-label:rangeWeek">
+              i18n-values="aria-label:rangeWeek"
+              aria-controls="results-header">
           <input type="radio" name="timeframe-filter" value="2"
-              i18n-values="aria-label:rangeMonth">
+              i18n-values="aria-label:rangeMonth"
+              aria-controls="results-header">
         </div>
       </div>
     </header>
@@ -115,7 +118,9 @@
       <div id="notification-bar" hidden></div>
     </div>
 
-    <div id="results-display"></div>
+    <div id="results-display">
+      <h3 id="results-header" aria-live="polite"></h3>
+    </div>
     <div id="loading-spinner" hidden>
       <span id="loading">
         <div id="spinner" class="inline-spinner"></div>

chrome/browser/resources/history/history.js

@@ -1311,7 +1311,11 @@ HistoryView.prototype.clear_ = function() {
   if (alertOverlay && alertOverlay.classList.contains('showing'))
     hideConfirmationOverlay();
 
-  this.resultDiv_.textContent = '';
+  // Remove everything but <h3 id="results-header"> (the first child).
+  while (this.resultDiv_.children.length > 1) {
+    this.resultDiv_.removeChild(this.resultDiv_.lastElementChild);
+  }
+  $('results-header').textContent = '';
 
   this.currentVisits_.forEach(function(visit) {
     visit.isRendered = false;
@@ -1573,13 +1577,19 @@ HistoryView.prototype.displayResults_ = function(doneLoading) {
   var groupByDomain = this.model_.getGroupByDomain();
 
   if (searchText) {
-    // Add a header for the search results, if there isn't already one.
-    if (!this.resultDiv_.querySelector('h3')) {
-      var header = document.createElement('h3');
-      header.textContent = loadTimeData.getStringF('searchResultsFor',
-                                                   searchText);
-      this.resultDiv_.appendChild(header);
+    var headerText;
+    if (!doneLoading) {
+      headerText = loadTimeData.getStringF('searchResultsFor', searchText);
+    } else if (results.length == 0) {
+      headerText = loadTimeData.getString('noSearchResults');
+    } else {
+      var resultId = results.length == 1 ? 'searchResult' : 'searchResults';
+      headerText = loadTimeData.getStringF('foundSearchResults',
+                                           results.length,
+                                           loadTimeData.getString(resultId),
+                                           searchText);
     }
+    $('results-header').textContent = headerText;
 
     this.addTimeframeInterval_(this.resultDiv_);
 
@@ -1589,11 +1599,7 @@ HistoryView.prototype.displayResults_ = function(doneLoading) {
     if (!this.model_.editingEntriesAllowed)
       searchResults.classList.add('no-checkboxes');
 
-    if (results.length == 0 && doneLoading) {
-      var noSearchResults = searchResults.appendChild(
-          createElementWithClassName('div', 'no-results-message'));
-      noSearchResults.textContent = loadTimeData.getString('noSearchResults');
-    } else {
+    if (doneLoading) {
       for (var i = 0, visit; visit = results[i]; i++) {
         if (!visit.isRendered) {
           searchResults.appendChild(visit.getResultDOM({
@@ -1610,13 +1616,12 @@ HistoryView.prototype.displayResults_ = function(doneLoading) {
 
     this.addTimeframeInterval_(resultsFragment);
 
-    if (results.length == 0 && doneLoading) {
-      var noResults = resultsFragment.appendChild(
-          createElementWithClassName('div', 'no-results-message'));
-      noResults.textContent = loadTimeData.getString('noResults');
-      this.resultDiv_.appendChild(resultsFragment);
+    var noResults = results.length == 0 && doneLoading;
+    $('results-header').textContent = noResults ?
+        loadTimeData.getString('noResults') : '';
+
+    if (noResults)
       return;
-    }
 
     if (this.getRangeInDays() == HistoryModel.Range.MONTH &&
         groupByDomain) {

chrome/browser/resources/history/history_mobile.css

@@ -82,10 +82,6 @@ html[dir='rtl'] #search-field {
   background-position: right 16px center;
 }
 
-.no-results-message {
-  padding: 24px 16px;
-}
-
 #notification-bar.alone {
   float: none;
   font-size: 75%;
@@ -302,8 +298,7 @@ input {
 
   h1,
   #notification-bar,
-  #loading-spinner,
-  .no-results-message {
+  #loading-spinner {
     padding-left: 0;
     padding-right: 0;
   }

chrome/browser/ui/webui/history_ui.cc

@@ -130,6 +130,10 @@ content::WebUIDataSource* CreateHistoryUIHTMLSource(Profile* profile) {
   source->AddLocalizedString("newer", IDS_HISTORY_NEWER);
   source->AddLocalizedString("older", IDS_HISTORY_OLDER);
   source->AddLocalizedString("searchResultsFor", IDS_HISTORY_SEARCHRESULTSFOR);
+  source->AddLocalizedString("searchResult", IDS_HISTORY_SEARCH_RESULT);
+  source->AddLocalizedString("searchResults", IDS_HISTORY_SEARCH_RESULTS);
+  source->AddLocalizedString("foundSearchResults",
+                             IDS_HISTORY_FOUND_SEARCH_RESULTS);
   source->AddLocalizedString("history", IDS_HISTORY_BROWSERESULTS);
   source->AddLocalizedString("cont", IDS_HISTORY_CONTINUED);
   source->AddLocalizedString("searchButton", IDS_HISTORY_SEARCH_BUTTON);

chrome/test/data/webui/history_browsertest.js

@@ -743,7 +743,8 @@ TEST_F('RangeHistoryWebUITest', 'monthViewEmptyMonth', function() {
     // See if the correct number of days is shown.
     var resultsDisplay = $('results-display');
     assertEquals(0, resultsDisplay.querySelectorAll('.months-results').length);
-    assertEquals(1, resultsDisplay.querySelectorAll('div').length);
+    var noResults = loadTimeData.getString('noResults');
+    assertNotEquals(-1, $('results-header').textContent.indexOf(noResults));
 
     testDone();
   });