mirrors/vault
1
0
Fork 0
mirror of https://github.com/hashicorp/vault.git synced 2025-09-18 12:21:07 +02:00
Code Issues Projects Releases Wiki Activity

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

Browse Source 
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
ui/lib/core/addon/components/form-field.hbs
View File

@ -395,10 +395,11 @@
@checked={{if @attr.options.isOppositeValue (not this.toggleInputEnabled) this.toggleInputEnabled}} @checked={{if @attr.options.isOppositeValue (not this.toggleInputEnabled) this.toggleInputEnabled}}
data-test-toggle={{@attr.name}} data-test-toggle={{@attr.name}}
disabled={{this.disabled}} disabled={{this.disabled}}
aria-describedby={{concat @attr.name "-helper-text"}}
> >
<span class="has-text-weight-bold is-large">{{this.labelString}}</span><br /> <span class="has-text-weight-bold is-large">{{this.labelString}}</span><br />
<div class="description has-text-grey" data-test-toggle-subtext> <div class="description has-text-grey" data-test-toggle-subtext>
<span> <span id={{concat @attr.name "-helper-text"}}>
{{#if this.toggleInputEnabled}} {{#if this.toggleInputEnabled}}
{{if @attr.options.isOppositeValue @attr.options.helperTextDisabled @attr.options.helperTextEnabled}} {{if @attr.options.isOppositeValue @attr.options.helperTextDisabled @attr.options.helperTextEnabled}}
{{else}} {{else}}
@ -414,8 +415,9 @@
@onChange={{this.toggleTextShow}} @onChange={{this.toggleTextShow}}
@checked={{this.showToggleTextInput}} @checked={{this.showToggleTextInput}}
data-test-toggle={{@attr.name}} 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"> <div class="description has-text-grey">
{{#if this.showToggleTextInput}} {{#if this.showToggleTextInput}}
<span> <span>

3
ui/lib/core/addon/components/string-list.hbs
View File

@ -19,7 +19,7 @@
{{/if}} {{/if}}
</label> </label>
{{#if @subText}} {{#if @subText}}
<p class="sub-text"> <p class="sub-text" id={{concat (dasherize @label) "-helper-text"}}>
{{@subText}} {{@subText}}
</p> </p>
{{/if}} {{/if}}
@ -33,6 +33,7 @@
@value={{data.value}} @value={{data.value}}
name={{concat this.elementId "-" index}} name={{concat this.elementId "-" index}}
aria-label="{{@label}} list item {{index}}" aria-label="{{@label}} list item {{index}}"
aria-describedby={{concat (dasherize @label) "-helper-text"}}
{{on "keyup" (action "inputChanged" index)}} {{on "keyup" (action "inputChanged" index)}}
{{on "change" (action "inputChanged" index)}} {{on "change" (action "inputChanged" index)}}
/> />

6
ui/lib/core/addon/components/ttl-picker.hbs
View File

@ -73,6 +73,7 @@
@checked={{this.enableTTL}} @checked={{this.enableTTL}}
@hideLabel={{true}} @hideLabel={{true}}
data-test-ttl-toggle={{this.label}} data-test-ttl-toggle={{this.label}}
aria-describedby={{concat (dasherize this.label) "-helper-text"}}
> >
<fieldset class="field is-grouped is-marginless is-borderless"> <fieldset class="field is-grouped is-marginless is-borderless">
{{#if (has-block)}} {{#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 /> <span class="ttl-picker-label is-large" data-test-ttl-form-label={{this.label}}>{{this.label}}</span><br />
{{#if this.helperText}} {{#if this.helperText}}
<div class="sub-text"> <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}} {{#if @description}}
<ToolTip @verticalPosition="below" as |T|> <ToolTip @verticalPosition="below" as |T|>
<T.Trigger data-test-tooltip-trigger tabindex="-1"> <T.Trigger data-test-tooltip-trigger tabindex="-1">