[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

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)}