From 7bd975f3e13b7b6c65ef1a6824fb2ced3d0b78d6 Mon Sep 17 00:00:00 2001
From: Vault Automation <github-team-secure-vault-core@hashicorp.com>
Date: Wed, 3 Sep 2025 15:47:28 -0600
Subject: [PATCH] add aria-describedby and id to non-accessible elements
 (#9025) (#9030)

Co-authored-by: lane-wetmore <lane.wetmore@hashicorp.com>
---
 ui/lib/core/addon/components/form-field.hbs  | 6 ++++--
 ui/lib/core/addon/components/string-list.hbs | 3 ++-
 ui/lib/core/addon/components/ttl-picker.hbs  | 6 +++++-
 3 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/ui/lib/core/addon/components/form-field.hbs b/ui/lib/core/addon/components/form-field.hbs
index 273648a36f..8573a2742c 100644
--- a/ui/lib/core/addon/components/form-field.hbs
+++ b/ui/lib/core/addon/components/form-field.hbs
@@ -395,10 +395,11 @@
         @checked={{if @attr.options.isOppositeValue (not this.toggleInputEnabled) this.toggleInputEnabled}}
         data-test-toggle={{@attr.name}}
         disabled={{this.disabled}}
+        aria-describedby={{concat @attr.name "-helper-text"}}
       >
         <span class="has-text-weight-bold is-large">{{this.labelString}}</span><br />
         <div class="description has-text-grey" data-test-toggle-subtext>
-          <span>
+          <span id={{concat @attr.name "-helper-text"}}>
             {{#if this.toggleInputEnabled}}
               {{if @attr.options.isOppositeValue @attr.options.helperTextDisabled @attr.options.helperTextEnabled}}
             {{else}}
@@ -414,8 +415,9 @@
         @onChange={{this.toggleTextShow}}
         @checked={{this.showToggleTextInput}}
         data-test-toggle={{@attr.name}}
+        aria-describedby={{concat @attr.name "-helper-text"}}
       >
-        <span class="ttl-picker-label is-large">{{this.labelString}}</span><br />
+        <span class="ttl-picker-label is-large" id={{concat @attr.name "-helper-text"}}>{{this.labelString}}</span><br />
         <div class="description has-text-grey">
           {{#if this.showToggleTextInput}}
             <span>
diff --git a/ui/lib/core/addon/components/string-list.hbs b/ui/lib/core/addon/components/string-list.hbs
index 71ee2480d5..f11f2cfb93 100644
--- a/ui/lib/core/addon/components/string-list.hbs
+++ b/ui/lib/core/addon/components/string-list.hbs
@@ -19,7 +19,7 @@
       {{/if}}
     </label>
     {{#if @subText}}
-      <p class="sub-text">
+      <p class="sub-text" id={{concat (dasherize @label) "-helper-text"}}>
         {{@subText}}
       </p>
     {{/if}}
@@ -33,6 +33,7 @@
           @value={{data.value}}
           name={{concat this.elementId "-" index}}
           aria-label="{{@label}} list item {{index}}"
+          aria-describedby={{concat (dasherize @label) "-helper-text"}}
           {{on "keyup" (action "inputChanged" index)}}
           {{on "change" (action "inputChanged" index)}}
         />
diff --git a/ui/lib/core/addon/components/ttl-picker.hbs b/ui/lib/core/addon/components/ttl-picker.hbs
index 81d0dde39d..7ad74e30f7 100644
--- a/ui/lib/core/addon/components/ttl-picker.hbs
+++ b/ui/lib/core/addon/components/ttl-picker.hbs
@@ -73,6 +73,7 @@
       @checked={{this.enableTTL}}
       @hideLabel={{true}}
       data-test-ttl-toggle={{this.label}}
+      aria-describedby={{concat (dasherize this.label) "-helper-text"}}
     >
       <fieldset class="field is-grouped is-marginless is-borderless">
         {{#if (has-block)}}
@@ -83,7 +84,10 @@
             <span class="ttl-picker-label is-large" data-test-ttl-form-label={{this.label}}>{{this.label}}</span><br />
             {{#if this.helperText}}
               <div class="sub-text">
-                <span data-test-ttl-form-subtext>{{this.helperText}}</span>
+                <span
+                  id={{concat (dasherize this.label) "-helper-text"}}
+                  data-test-ttl-form-subtext
+                >{{this.helperText}}</span>
                 {{#if @description}}
                   <ToolTip @verticalPosition="below" as |T|>
                     <T.Trigger data-test-tooltip-trigger tabindex="-1">