mirror of
https://github.com/flarum/framework.git
synced 2024-11-29 12:43:52 +08:00
[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:
parent
3bcd710ee1
commit
c0ed43c08e
|
@ -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)}
|
||||
|
|
Loading…
Reference in New Issue
Block a user