github-mirror/framework
2
0
Fork 0
mirror of https://github.com/flarum/framework.git synced 2024-11-29 12:43:52 +08:00
Code Issues Actions 20 Packages Projects Releases Wiki Activity

[A11Y] Add aria-label and landmark role to search input (#2669)

Browse Source 
* 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
1 changed files with 5 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
framework/core/js/src/forum/components/Search.js
View File

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