Merge pull request #16545 from desktop/author-input-label

Improve setup of Co-author's `label` element

app/src/ui/autocompletion/autocompleting-text-input.tsx

@@ -25,8 +25,8 @@ interface IAutocompletingTextInputProps<ElementType, AutocompleteItemType> {
    */
   readonly className?: string
 
-  /** The aria-labelledby attribute for the input field. */
-  readonly elementAriaLabelledBy?: string
+  /** Element ID for the input field. */
+  readonly elementId?: string
 
   /** The placeholder for the input field. */
   readonly placeholder?: string
@@ -380,6 +380,7 @@ export abstract class AutocompletingTextInput<
 
     const props = {
       type: 'text',
+      id: this.props.elementId,
       role: this.props.isCombobox ? ('combobox' as const) : undefined,
       placeholder: this.props.placeholder,
       value: this.props.value,
@@ -393,7 +394,6 @@ export abstract class AutocompletingTextInput<
       required: this.props.required ? true : false,
       spellCheck: this.props.spellcheck,
       autoComplete: 'off',
-      'aria-labelledby': this.props.elementAriaLabelledBy,
       'aria-expanded': autocompleteVisible,
       'aria-autocomplete': 'list' as const,
       'aria-haspopup': 'listbox' as const,

app/src/ui/lib/author-input/author-input.tsx

@@ -180,15 +180,12 @@ export class AuthorInput extends React.Component<
           {this.state.lastActionDescription}
         </div>
         <div className="shadow-input" ref={this.shadowInputRef} />
-        <label
-          id="author-input-label"
-          className="label"
-          htmlFor="added-authors"
-        >
+        <label id="author-input-label" className="label" htmlFor="author-input">
           Co-Authors&nbsp;
         </label>
         {this.renderAuthors()}
         <AutocompletingInput<UserHit>
+          elementId="author-input"
           placeholder="@username"
           isCombobox={true}
           alwaysAutocomplete={true}
@@ -198,7 +195,6 @@ export class AuthorInput extends React.Component<
           )}
           ref={this.autocompletingInputRef}
           onElementRef={this.onInputRef}
-          elementAriaLabelledBy="author-input-label"
           onAutocompleteItemSelected={this.onAutocompleteItemSelected}
           onValueChanged={this.onCoAuthorsValueChanged}
           onKeyDown={this.onInputKeyDown}
@@ -211,7 +207,6 @@ export class AuthorInput extends React.Component<
   private renderAuthors() {
     return (
       <div
-        id="added-authors"
         className="added-author-container"
         ref={this.authorContainerRef}
         aria-labelledby="author-input-label"