treehouse
/
mastodon
21
8
Fork 5
Code Issues 32 Pull Requests Projects 1 Releases Wiki Activity

[Glitch] Fix hidden label causing accessibility issue for search inputs 

Port 903e5a3f45 to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>
pull/41/head
Alex Stine 2022-12-15 09:20:21 -06:00 committed by Claire
parent 8cd7b95559
commit aad42cfc35
1 changed files with 13 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
app/javascript/flavours/glitch/features/compose/components/search.js
View File

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