[UI] Remove Template Lint A11y Overrides (#12236) (#12276)

* removes require-input-label ember-template-lint override

* adds aria-label to textarea in MaskedInput component

* more a11y fixes for missing labels

* adds aria-label back to lookup-input

* adds aria-label back to select component

* ensures aria-label has value in select component

* removes duplicate onchange handler from lookup-input component

Co-authored-by: Jordan Reimer <zofskeez@gmail.com>

ui/.template-lintrc.js

@@ -10,7 +10,6 @@ module.exports = {
 
   rules: {
     'no-action': 'off',
-    'require-input-label': 'off',
     'no-array-prototype-extensions': 'off',
     // from bump to ember-template-lint@6.0.0
     'no-builtin-form-components': 'off',

ui/app/components/console/command-input.hbs

@@ -10,13 +10,11 @@
     <Chevron />
   {{/if}}
   <input
-    aria-label="web R.E.P.L."
-    aria-describedby="namespace-reminder"
+    aria-label="Web R.E.P.L."
     onkeyup={{action "handleKeyUp"}}
     value={{this.value}}
     autocomplete="off"
     spellcheck="false"
-    id="console-input"
   />
   <Hds::Button
     class="hds-side-nav__icon-button"

ui/app/components/database-connection.hbs

@@ -238,6 +238,7 @@
                           {{#if this.showPasswordField}}
                             <Input
                               {{on "change" (fn this.updatePassword attr.name)}}
+                              aria-label="New password"
                               @type="password"
                               @value={{get @model attr.name}}
                               name={{attr.name}}

ui/app/components/identity/lookup-input.hbs

@@ -9,9 +9,8 @@
       <div class="select is-fullwidth">
         <select
           name="param"
-          id="param"
-          onchange={{action (mut this.param) value="target.value"}}
-          aria-label="lookup by alias name"
+          aria-label="Lookup parameter"
+          {{on "change" (action (mut this.param) value="target.value")}}
           data-test-select="lookup-param-select"
         >
           {{#each (array "alias name" "name" "id" "alias id") as |paramOption|}}
@@ -29,7 +28,13 @@
       {{/if}}
     </div>
     <div class="control is-expanded">
-      <Input class="input" @value={{this.paramValue}} placeholder={{capitalize this.param}} data-test-input="param-value" />
+      <Input
+        aria-label="Lookup value"
+        class="input"
+        @value={{this.paramValue}}
+        placeholder={{capitalize this.param}}
+        data-test-input="param-value"
+      />
     </div>
     <div class="control">
       <Hds::Button @text="Lookup" @color="secondary" class="is-hidden" type="submit" data-test-submit />

ui/app/components/mount-accessor-select.hbs

@@ -26,7 +26,6 @@
         <select
           aria-label={{or @label "Select a mount accessor"}}
           name={{@name}}
-          id={{@name}}
           {{on "change" this.change}}
           data-test-mount-accessor-select
         >
@@ -55,7 +54,7 @@
   {{else}}
     <input
       name={{@name}}
-      id={{@name}}
+      aria-label={{@name}}
       class="input"
       value={{@value}}
       placeholder="Mount accessor"

ui/app/components/secret-create-or-update.hbs

@@ -68,6 +68,7 @@
             <div class="column is-one-quarter info-table-row-edit">
               <Input
                 data-test-secret-key="create"
+                aria-label="Key"
                 @value={{secret.name}}
                 placeholder="key"
                 {{on "change" this.handleChange}}
@@ -159,6 +160,7 @@
               <div class="column is-one-quarter">
                 <Input
                   data-test-secret-key="edit"
+                  aria-label="Key"
                   @value={{secret.name}}
                   placeholder="key"
                   {{on "change" this.handleChange}}

ui/app/templates/vault/cluster/access/control-groups.hbs

@@ -33,7 +33,14 @@
         Accessor
       </label>
       <div class="control">
-        <Input class="input" autocomplete="off" spellcheck="false" name="accessor" @value={{this.model.id}} />
+        <Input
+          aria-label="Accessor"
+          class="input"
+          autocomplete="off"
+          spellcheck="false"
+          name="accessor"
+          @value={{this.model.id}}
+        />
       </div>
     </div>
     <div class="field is-grouped box is-fullwidth is-bottomless">

ui/app/templates/vault/cluster/init.hbs

@@ -132,6 +132,7 @@
             </label>
             <div class="control">
               <Input
+                aria-label="Key shares"
                 data-test-key-shares="true"
                 class="input"
                 autocomplete="off"
@@ -154,6 +155,7 @@
             </label>
             <div class="control">
               <Input
+                aria-label="Key threshold"
                 data-test-key-threshold="true"
                 class="input"
                 autocomplete="off"

ui/lib/core/addon/components/kv-object-editor.hbs

@@ -21,6 +21,7 @@
       <div class="columns is-variable" data-test-kv-row>
         <div class="column is-one-quarter">
           <Input
+            aria-label="Key"
             data-test-kv-key={{index}}
             @value={{row.name}}
             placeholder={{this.placeholders.key}}
@@ -40,6 +41,7 @@
             />
           {{else}}
             <Textarea
+              aria-label="Value"
               data-test-kv-value={{index}}
               name={{row.name}}
               class="input {{if @validationError 'has-error-border'}}"

ui/lib/core/addon/components/masked-input.hbs

@@ -22,7 +22,6 @@
     {{/if}}
   {{else}}
     <Textarea
-      id={{this.textareaId}}
       name={{@name}}
       @value={{@value}}
       class="input masked-value {{unless this.showValue 'masked-font'}}"
@@ -32,6 +31,7 @@
       aria-label={{or @name "masked input"}}
       {{on "change" this.onChange}}
       {{on "keyup" (fn this.handleKeyUp @name)}}
+      {{did-insert this.updateSize}}
       data-test-input={{or @name ""}}
     />
   {{/if}}

ui/lib/core/addon/components/masked-input.js

@@ -5,7 +5,6 @@
 
 import { debug } from '@ember/debug';
 import { action } from '@ember/object';
-import { guidFor } from '@ember/object/internals';
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
 import autosize from 'autosize';
@@ -26,7 +25,6 @@ import autosize from 'autosize';
  *
  */
 export default class MaskedInputComponent extends Component {
-  textareaId = 'textarea-' + guidFor(this);
   @tracked showValue = false;
   @tracked modalOpen = false;
   @tracked stringifyDownload = false;
@@ -36,11 +34,10 @@ export default class MaskedInputComponent extends Component {
     if (!this.args.onChange && !this.args.displayOnly) {
       debug('onChange is required for editable Masked Input!');
     }
-    this.updateSize();
   }
 
-  updateSize() {
-    autosize(document.getElementById(this.textareaId));
+  updateSize(element) {
+    autosize(element);
   }
 
   @action onChange(evt) {

ui/lib/core/addon/components/object-list-input.hbs

@@ -22,7 +22,6 @@
                 @type="text"
                 @value={{value}}
                 name={{field.key}}
-                id="{{field.key}}-{{index}}"
                 {{on "input" (fn this.handleInput index)}}
               />
               {{#if (and (not inputError.isValid) inputError.errors)}}

ui/lib/core/addon/components/select.hbs

@@ -12,11 +12,9 @@
   <div class="select {{if this.isFullwidth 'is-fullwidth'}}">
     <select
       class="select"
-      {{! TODO: when 2 TtlPickers are on the same view this becomes two of the same ids. Shows up as dom warning. JIRA 29298}}
-      id="select-{{this.name}}"
       onchange={{action this.onChange value="target.value"}}
       data-test-select={{this.name}}
-      aria-label={{this.ariaLabel}}
+      aria-label={{or this.ariaLabel this.name}}
     >
       {{#if this.noDefault}}
         <option value="">

ui/lib/core/addon/components/sidebar/frame.hbs

@@ -65,7 +65,7 @@
           @isFullscreen={{this.consoleFullscreen}}
           {{focus-trap
             focusTrapOptions=(hash
-              initialFocus="#console-input"
+              initialFocus="[aria-label='Web R.E.P.L.']"
               escapeDeactivates=true
               clickOutsideDeactivates=true
               onDeactivate=this.closeConsole