[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
This commit is contained in:
David Wheatley 2021-03-18 22:03:01 +00:00 committed by GitHub
parent 3bcd710ee1
commit c0ed43c08e

View File

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