From 93aa30f3b60045dfeaa0c0be3a11cdeb8e000746 Mon Sep 17 00:00:00 2001
From: Vault Automation <github-team-secure-vault-core@hashicorp.com>
Date: Tue, 10 Feb 2026 12:22:23 -0500
Subject: [PATCH] [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                              |  1 -
 ui/app/components/console/command-input.hbs         |  4 +---
 ui/app/components/database-connection.hbs           |  1 +
 ui/app/components/identity/lookup-input.hbs         | 13 +++++++++----
 ui/app/components/mount-accessor-select.hbs         |  3 +--
 ui/app/components/secret-create-or-update.hbs       |  2 ++
 .../vault/cluster/access/control-groups.hbs         |  9 ++++++++-
 ui/app/templates/vault/cluster/init.hbs             |  2 ++
 ui/lib/core/addon/components/kv-object-editor.hbs   |  2 ++
 ui/lib/core/addon/components/masked-input.hbs       |  2 +-
 ui/lib/core/addon/components/masked-input.js        |  7 ++-----
 ui/lib/core/addon/components/object-list-input.hbs  |  1 -
 ui/lib/core/addon/components/select.hbs             |  4 +---
 ui/lib/core/addon/components/sidebar/frame.hbs      |  2 +-
 14 files changed, 31 insertions(+), 22 deletions(-)

diff --git a/ui/.template-lintrc.js b/ui/.template-lintrc.js
index 13bc9f5b37..716495d93a 100644
--- a/ui/.template-lintrc.js
+++ b/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',
diff --git a/ui/app/components/console/command-input.hbs b/ui/app/components/console/command-input.hbs
index d7eec92d0e..8d547eee75 100644
--- a/ui/app/components/console/command-input.hbs
+++ b/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"
diff --git a/ui/app/components/database-connection.hbs b/ui/app/components/database-connection.hbs
index 1bfe657dd7..2462d2ed22 100644
--- a/ui/app/components/database-connection.hbs
+++ b/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}}
diff --git a/ui/app/components/identity/lookup-input.hbs b/ui/app/components/identity/lookup-input.hbs
index aa58411913..4259b6db8a 100644
--- a/ui/app/components/identity/lookup-input.hbs
+++ b/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 />
diff --git a/ui/app/components/mount-accessor-select.hbs b/ui/app/components/mount-accessor-select.hbs
index 78a826ea84..70410a36fe 100644
--- a/ui/app/components/mount-accessor-select.hbs
+++ b/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"
diff --git a/ui/app/components/secret-create-or-update.hbs b/ui/app/components/secret-create-or-update.hbs
index 4114e8f895..aaa862a892 100644
--- a/ui/app/components/secret-create-or-update.hbs
+++ b/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}}
diff --git a/ui/app/templates/vault/cluster/access/control-groups.hbs b/ui/app/templates/vault/cluster/access/control-groups.hbs
index c1aad5a3e6..2b30df171c 100644
--- a/ui/app/templates/vault/cluster/access/control-groups.hbs
+++ b/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">
diff --git a/ui/app/templates/vault/cluster/init.hbs b/ui/app/templates/vault/cluster/init.hbs
index 4c0c59fd07..801b5784db 100644
--- a/ui/app/templates/vault/cluster/init.hbs
+++ b/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"
diff --git a/ui/lib/core/addon/components/kv-object-editor.hbs b/ui/lib/core/addon/components/kv-object-editor.hbs
index 8ca64389b3..efc034c070 100644
--- a/ui/lib/core/addon/components/kv-object-editor.hbs
+++ b/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'}}"
diff --git a/ui/lib/core/addon/components/masked-input.hbs b/ui/lib/core/addon/components/masked-input.hbs
index bf815d8419..c13e94f715 100644
--- a/ui/lib/core/addon/components/masked-input.hbs
+++ b/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}}
diff --git a/ui/lib/core/addon/components/masked-input.js b/ui/lib/core/addon/components/masked-input.js
index a22d544ee7..60ce782f84 100644
--- a/ui/lib/core/addon/components/masked-input.js
+++ b/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) {
diff --git a/ui/lib/core/addon/components/object-list-input.hbs b/ui/lib/core/addon/components/object-list-input.hbs
index 10768125ef..d55b33ac8d 100644
--- a/ui/lib/core/addon/components/object-list-input.hbs
+++ b/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)}}
diff --git a/ui/lib/core/addon/components/select.hbs b/ui/lib/core/addon/components/select.hbs
index 3ac1a2584e..ed032de985 100644
--- a/ui/lib/core/addon/components/select.hbs
+++ b/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="">
diff --git a/ui/lib/core/addon/components/sidebar/frame.hbs b/ui/lib/core/addon/components/sidebar/frame.hbs
index 0384c20754..561989e393 100644
--- a/ui/lib/core/addon/components/sidebar/frame.hbs
+++ b/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