diff options
| author | Alex Stine <alex.stine@yourtechadvisors.com> | 2022-12-15 09:20:21 -0600 |
|---|---|---|
| committer | Claire <claire.github-309c@sitedethib.com> | 2022-12-15 20:54:11 +0100 |
| commit | aad42cfc35447b9fccb401471cbf335185c55a97 (patch) | |
| tree | 48d6dfcc3f786049d81ae4ad2b7495e92c2af2b7 | |
| parent | 8cd7b9555996f03d7fb747f17470c4f5749065dc (diff) | |
[Glitch] Fix hidden label causing accessibility issue for search inputs
Port 903e5a3f459d28b093438dc4827b2fb976aef406 to glitch-soc Signed-off-by: Claire <claire.github-309c@sitedethib.com>
| -rw-r--r-- | app/javascript/flavours/glitch/features/compose/components/search.js | 36 |
1 files changed, 14 insertions, 22 deletions
diff --git a/app/javascript/flavours/glitch/features/compose/components/search.js b/app/javascript/flavours/glitch/features/compose/components/search.js index 326fe5b70..a1963c15d 100644 --- a/app/javascript/flavours/glitch/features/compose/components/search.js +++ b/app/javascript/flavours/glitch/features/compose/components/search.js @@ -144,28 +144,20 @@ class Search extends React.PureComponent { return ( <div className='search'> - <label> - <span style={{ display: 'none' }}>{intl.formatMessage(messages.placeholder)}</span> - <input - ref={this.setRef} - className='search__input' - type='text' - placeholder={intl.formatMessage(signedIn ? messages.placeholderSignedIn : messages.placeholder)} - value={value || ''} - onChange={this.handleChange} - onKeyUp={this.handleKeyUp} - onFocus={this.handleFocus} - onBlur={this.handleBlur} - /> - </label> - - <div - aria-label={intl.formatMessage(messages.placeholder)} - className='search__icon' - onClick={this.handleClear} - role='button' - tabIndex='0' - > + <input + ref={this.setRef} + className='search__input' + type='text' + placeholder={intl.formatMessage(signedIn ? messages.placeholderSignedIn : messages.placeholder)} + aria-label={intl.formatMessage(signedIn ? messages.placeholderSignedIn : messages.placeholder)} + value={value || ''} + onChange={this.handleChange} + onKeyUp={this.handleKeyUp} + onFocus={this.handleFocus} + onBlur={this.handleBlur} + /> + + <div role='button' tabIndex='0' className='search__icon' onClick={this.handleClear}> <Icon id='search' className={hasValue ? '' : 'active'} /> <Icon id='times-circle' className={hasValue ? 'active' : ''} /> </div> |