Improve accessibility (part 3) (#4405)

* fix(compose): Add aria-label for the navigation links

* fix(search): Add input label

* fix(navigation_bar): Link description

* fix(autosuggest_textarea): Add input label

* fix(compose_form): Add input label

* fix(upload_button): Add input label

* fix(account/header): Add link content

* fix(column_header): Use h1 tag

* fix(column_header): Labels move buttons moving column

* fix(settings_text): Add label to input

* fix(column_header): Remove role from h1

* fix(modal_root): Use role=dialog

* fix(modal_root): Focus restauration

* fix(modal_root): Apply inert to sibligs

* fix(column_header): Add role=button

* chore(eslint): Disable jsx-a11y/label-has-for

1 files changed, 17 insertions, 14 deletions

diff --git a/app/javascript/mastodon/components/autosuggest_textarea.js b/app/javascript/mastodon/components/autosuggest_textarea.js
index fa41e59e1..35b37600f 100644
--- a/app/javascript/mastodon/components/autosuggest_textarea.js
+++ b/app/javascript/mastodon/components/autosuggest_textarea.js
@@ -162,20 +162,23 @@ export default class AutosuggestTextarea extends ImmutablePureComponent {
 
     return (
       <div className='autosuggest-textarea'>
-        <Textarea
-          inputRef={this.setTextarea}
-          className='autosuggest-textarea__textarea'
-          disabled={disabled}
-          placeholder={placeholder}
-          autoFocus={autoFocus}
-          value={value}
-          onChange={this.onChange}
-          onKeyDown={this.onKeyDown}
-          onKeyUp={onKeyUp}
-          onBlur={this.onBlur}
-          onPaste={this.onPaste}
-          style={style}
-        />
+        <label>
+          <span style={{ display: 'none' }}>{placeholder}</span>
+          <Textarea
+            inputRef={this.setTextarea}
+            className='autosuggest-textarea__textarea'
+            disabled={disabled}
+            placeholder={placeholder}
+            autoFocus={autoFocus}
+            value={value}
+            onChange={this.onChange}
+            onKeyDown={this.onKeyDown}
+            onKeyUp={onKeyUp}
+            onBlur={this.onBlur}
+            onPaste={this.onPaste}
+            style={style}
+          />
+        </label>
 
         <div className={`autosuggest-textarea__suggestions ${suggestionsHidden || suggestions.isEmpty() ? '' : 'autosuggest-textarea__suggestions--visible'}`}>
           {suggestions.map((suggestion, i) => (