From 903e5a3f459d28b093438dc4827b2fb976aef406 Mon Sep 17 00:00:00 2001
From: Alex Stine <alex.stine@yourtechadvisors.com>
Date: Thu, 15 Dec 2022 09:20:21 -0600
Subject: [PATCH] Fix hidden label causing accessibility issue for search
inputs (#21275)
* Try unhiding search label.
* Use aria-label. Remove label as empty labels are useless.
* Remove addition of package-lock.json.
---
.../features/compose/components/search.js | 26 +++++++++----------
1 file changed, 12 insertions(+), 14 deletions(-)
diff --git a/app/javascript/mastodon/features/compose/components/search.js b/app/javascript/mastodon/features/compose/components/search.js
index ebb23d92ff..03e6dcf2c8 100644
--- a/app/javascript/mastodon/features/compose/components/search.js
+++ b/app/javascript/mastodon/features/compose/components/search.js
@@ -123,20 +123,18 @@ 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>
+ <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'} />
--
GitLab