me/glitchier-soc
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Fix hidden label causing accessibility issue for search inputs (#21275)

Browse source 
* Try unhiding search label.

* Use aria-label. Remove label as empty labels are useless.

* Remove addition of package-lock.json.
This commit is contained in:
Alex Stine 2022-12-15 09:20:21 -06:00 committed by GitHub
parent 7ea3a33c86
commit ce1103a154
1 changed files with 12 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
app/javascript/mastodon/features/compose/components/search.js
View file

@ -123,20 +123,18 @@ 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 role='button' tabIndex='0' className='search__icon' onClick={this.handleClear}> <div role='button' tabIndex='0' className='search__icon' onClick={this.handleClear}>
<Icon id='search' className={hasValue ? '' : 'active'} /> <Icon id='search' className={hasValue ? '' : 'active'} />