From e968af6dd4d7f9ab5f1ecabe02f44cfa5bc0cdca Mon Sep 17 00:00:00 2001
From: Kris <kris.aubuchon@discourse.org>
Date: Tue, 19 Jan 2021 14:32:32 -0500
Subject: [PATCH] A11Y: Add aria-labels to search inputs and search button
 (#11752)

---
 .../discourse/app/templates/components/google-search.hbs    | 2 +-
 .../discourse/app/templates/full-page-search.hbs            | 6 +++---
 .../discourse/app/widgets/search-menu-controls.js           | 1 +
 config/locales/client.en.yml                                | 3 ++-
 4 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/app/assets/javascripts/discourse/app/templates/components/google-search.hbs b/app/assets/javascripts/discourse/app/templates/components/google-search.hbs
index cbe90dcbce1..16b84de567b 100644
--- a/app/assets/javascripts/discourse/app/templates/components/google-search.hbs
+++ b/app/assets/javascripts/discourse/app/templates/components/google-search.hbs
@@ -1,6 +1,6 @@
 <div>
   <form action="//google.com/search" id="google-search">
-    <input type="text" name="q" value={{searchTerm}}>
+    <input type="text" name="q" aria-label={{i18n "search.search_google"}} value={{searchTerm}}>
     <input name="as_sitesearch" value={{siteUrl}} type="hidden">
     <button class="btn btn-primary" type="submit">{{i18n "search.search_google_button"}}</button>
   </form>
diff --git a/app/assets/javascripts/discourse/app/templates/full-page-search.hbs b/app/assets/javascripts/discourse/app/templates/full-page-search.hbs
index 8f0dd07a586..fcbd8c506d4 100644
--- a/app/assets/javascripts/discourse/app/templates/full-page-search.hbs
+++ b/app/assets/javascripts/discourse/app/templates/full-page-search.hbs
@@ -4,8 +4,8 @@
   <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" enter=(action "search") hasAutofocus=hasAutofocus}}
-        {{d-button action=(action "search") icon="search" class="btn-primary search-cta" disabled=searchButtonDisabled}}
+        {{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}}
+        {{d-button action=(action "search") icon="search" class="btn-primary search-cta" ariaLabel="search.search_button" disabled=searchButtonDisabled}}
       </div>
     {{/unless}}
 
@@ -193,7 +193,7 @@
     {{#if site.mobileView}}
       <div class="search-bar">
         {{search-text-field value=searchTerm class="full-page-search search no-blur search-query" enter=(action "search") hasAutofocus=hasAutofocus}}
-        {{d-button action=(action "search") icon="search" class="btn-primary search-cta" disabled=searchButtonDisabled}}
+        {{d-button action=(action "search") icon="search" class="btn-primary search-cta" ariaLabel="search.search_button" disabled=searchButtonDisabled}}
       </div>
     {{/if}}
 
diff --git a/app/assets/javascripts/discourse/app/widgets/search-menu-controls.js b/app/assets/javascripts/discourse/app/widgets/search-menu-controls.js
index 27ff502b85d..3230051e1f8 100644
--- a/app/assets/javascripts/discourse/app/widgets/search-menu-controls.js
+++ b/app/assets/javascripts/discourse/app/widgets/search-menu-controls.js
@@ -23,6 +23,7 @@ createWidget("search-term", {
       value: attrs.value || "",
       autocomplete: "discourse",
       placeholder: attrs.contextEnabled ? "" : I18n.t("search.title"),
+      "aria-label": I18n.t("search.title"),
     };
   },
 
diff --git a/config/locales/client.en.yml b/config/locales/client.en.yml
index 3449b996d86..1210de3237f 100644
--- a/config/locales/client.en.yml
+++ b/config/locales/client.en.yml
@@ -567,7 +567,7 @@ en:
           other: "You have <strong>%{count}</strong> posts pending."
         ok: "OK"
       example_username: "username"
-      reject_reason: 
+      reject_reason:
         title: "Why are you rejecting this user?"
         send_email: "Send rejection email"
 
@@ -2108,6 +2108,7 @@ en:
       or_search_google: "Or try searching with Google instead:"
       search_google: "Try searching with Google instead:"
       search_google_button: "Google"
+      search_button: "Search"
 
       context:
         user: "Search posts by @%{username}"