A11Y: makes search results count readable by screen reader (#12437)

app/assets/javascripts/discourse/app/components/text-field.js

@@ -15,6 +15,7 @@ export default TextField.extend({
     "maxLength",
     "dir",
     "aria-label",
+    "aria-controls",
   ],
 
   init() {

app/assets/javascripts/discourse/app/templates/full-page-search.hbs

@@ -4,7 +4,14 @@
   <div class="search-advanced">
     {{#unless site.mobileView}}
       <div class="search-bar">
-        {{search-text-field value=searchTerm class="full-page-search search no-blur search-query" aria-label=(i18n "search.full_page_title") enter=(action "search") hasAutofocus=hasAutofocus}}
+        {{search-text-field
+          value=searchTerm
+          class="full-page-search search no-blur search-query"
+          aria-label=(i18n "search.full_page_title")
+          enter=(action "search")
+          hasAutofocus=hasAutofocus
+          aria-controls="search-result-count"
+        }}
         {{d-button action=(action "search") icon="search" class="btn-primary search-cta" ariaLabel="search.search_button" disabled=searchButtonDisabled}}
       </div>
     {{/unless}}
@@ -48,7 +55,7 @@
       </div>
 
       <div class="search-info">
-        <div class="result-count">
+        <div class="result-count" id="search-result-count" aria-live="polite">
           {{html-safe resultCountLabel}}
         </div>
         <div class="sort-by">