Change live-search so it announces results

If there is a search term when the page loads, a
statement about the results is added to the
searchbox label.

All subsequent searches are announced via an aria
live-region.

app/assets/javascripts/liveSearch.js

@@ -1,32 +1,54 @@
 (function(Modules) {
   "use strict";
 
+  let state;
   let normalize = (string) => string.toLowerCase().replace(/ /g,'');
+  let resultsSummary = (num) => {
+    if (num === 0) {
+      return "no results";
+    } else {
+      return num + (num === 1 ? " result" : " results");
+    }
+  };
 
-  let filter = ($searchBox, $targets) => () => {
+  let filter = ($searchBox, $searchLabel, $liveRegion, $targets) => () => {
 
     let query = normalize($searchBox.val());
+    let results = 0;
 
     $targets.each(function() {
 
       let content = $('.live-search-relevant', this).text() || $(this).text();
+      let isMatch = normalize(content).indexOf(normalize(query)) > -1;
 
       if ($(this).has(':checked').length) {
         $(this).show();
+        results++;
         return;
       }
 
       if (query == '') {
         $(this).css('display', '');
+        results++;
         return;
       }
 
-      $(this).toggle(
-        normalize(content).indexOf(normalize(query)) > -1
-      );
+      $(this).toggle(isMatch);
+
+      if (isMatch) { results++; }
 
     });
 
+    if (state === 'loaded') {
+      if (query !== '') {
+        $searchBox.attr('aria-label', $searchLabel.text().trim() + ', ' + resultsSummary(results));
+      }
+      state = 'active';
+    } else {
+      $searchBox.removeAttr('aria-label');
+      $liveRegion.text(resultsSummary(results));
+    }
+
     // make sticky JS recalculate its cache of the element's position
     // because live search can change the height document
     if ('stickAtBottomWhenScrolling' in GOVUK) {
@@ -43,12 +65,18 @@
       let $component = $(component);
 
       let $searchBox = $('input', $component);
+      let $searchLabel = $('label', $component);
+      let $liveRegion = $('.live-search__status', $component);
 
       let filterFunc = filter(
         $searchBox,
+        $searchLabel,
+        $liveRegion,
         $($component.data('targets'))
       );
 
+      state = 'loaded';
+
       $searchBox.on('keyup input', filterFunc);
 
       filterFunc();