From c0ed43c08e53be3fb520996905c71a3e1a7eaf05 Mon Sep 17 00:00:00 2001
From: David Wheatley <hi@davwheat.dev>
Date: Thu, 18 Mar 2021 22:03:01 +0000
Subject: [PATCH] [A11Y] Add aria-label and landmark role to search input
 (#2669)

* Adds role="search" to Search container
* Add aria-label to search input

See this page for more info:
https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Search_role
---
 framework/core/js/src/forum/components/Search.js | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/framework/core/js/src/forum/components/Search.js b/framework/core/js/src/forum/components/Search.js
index 5f1b82ce2..ddcb751a8 100644
--- a/framework/core/js/src/forum/components/Search.js
+++ b/framework/core/js/src/forum/components/Search.js
@@ -71,8 +71,11 @@ export default class Search extends Component {
     // Hide the search view if no sources were loaded
     if (!this.sources.length) return <div></div>;
 
+    const searchLabel = extractText(app.translator.trans('core.forum.header.search_placeholder'));
+
     return (
       <div
+        role="search"
         className={
           'Search ' +
           classList({
@@ -85,9 +88,10 @@ export default class Search extends Component {
       >
         <div className="Search-input">
           <input
+            aria-label={searchLabel}
             className="FormControl"
             type="search"
-            placeholder={extractText(app.translator.trans('core.forum.header.search_placeholder'))}
+            placeholder={searchLabel}
             value={this.state.getValue()}
             oninput={(e) => this.state.setValue(e.target.value)}
             onfocus={() => (this.hasFocus = true)}