[Glitch] Fix hidden label causing accessibility issue for search inputs
Port 903e5a3f45
to glitch-soc
Signed-off-by: Claire <claire.github-309c@sitedethib.com>
This commit is contained in:
parent
8cd7b95559
commit
aad42cfc35
1 changed files with 13 additions and 21 deletions
|
@ -144,28 +144,20 @@ class Search extends React.PureComponent {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className='search'>
|
<div className='search'>
|
||||||
<label>
|
|
||||||
<span style={{ display: 'none' }}>{intl.formatMessage(messages.placeholder)}</span>
|
|
||||||
<input
|
<input
|
||||||
ref={this.setRef}
|
ref={this.setRef}
|
||||||
className='search__input'
|
className='search__input'
|
||||||
type='text'
|
type='text'
|
||||||
placeholder={intl.formatMessage(signedIn ? messages.placeholderSignedIn : messages.placeholder)}
|
placeholder={intl.formatMessage(signedIn ? messages.placeholderSignedIn : messages.placeholder)}
|
||||||
|
aria-label={intl.formatMessage(signedIn ? messages.placeholderSignedIn : messages.placeholder)}
|
||||||
value={value || ''}
|
value={value || ''}
|
||||||
onChange={this.handleChange}
|
onChange={this.handleChange}
|
||||||
onKeyUp={this.handleKeyUp}
|
onKeyUp={this.handleKeyUp}
|
||||||
onFocus={this.handleFocus}
|
onFocus={this.handleFocus}
|
||||||
onBlur={this.handleBlur}
|
onBlur={this.handleBlur}
|
||||||
/>
|
/>
|
||||||
</label>
|
|
||||||
|
|
||||||
<div
|
<div role='button' tabIndex='0' className='search__icon' onClick={this.handleClear}>
|
||||||
aria-label={intl.formatMessage(messages.placeholder)}
|
|
||||||
className='search__icon'
|
|
||||||
onClick={this.handleClear}
|
|
||||||
role='button'
|
|
||||||
tabIndex='0'
|
|
||||||
>
|
|
||||||
<Icon id='search' className={hasValue ? '' : 'active'} />
|
<Icon id='search' className={hasValue ? '' : 'active'} />
|
||||||
<Icon id='times-circle' className={hasValue ? 'active' : ''} />
|
<Icon id='times-circle' className={hasValue ? 'active' : ''} />
|
||||||
</div>
|
</div>
|
||||||
|
|
Loading…
Reference in a new issue