add aria-describedby and id to non-accessible elements (#9025) (#9030)

Co-authored-by: lane-wetmore <lane.wetmore@hashicorp.com>
This commit is contained in:
Vault Automation 2025-09-03 15:47:28 -06:00 committed by GitHub
parent 27f194f9d3
commit 7bd975f3e1
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 11 additions and 4 deletions

View File

@ -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>

View File

@ -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)}}
/>

View File

@ -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">