Add described-by attribute to duration-selection directive to make children inputs screen reader accessible. (#19779)
This commit is contained in:
parent
9493ac4093
commit
0a2ce7d370
|
@ -6,7 +6,11 @@
|
|||
class="durationSelectSize kuiTextInput watcherNumberInput"
|
||||
min="0"
|
||||
required
|
||||
ng-model="durationSelect.size">
|
||||
ng-model="durationSelect.size"
|
||||
aria-label="Duration amount"
|
||||
aria-describedby="{{durationSelect.describedBy}}"
|
||||
>
|
||||
|
||||
<select
|
||||
id="{{durationSelect.makeId('unit')}}"
|
||||
name="{{durationSelect.makeId('unit')}}"
|
||||
|
@ -14,5 +18,7 @@
|
|||
required
|
||||
ng-model="durationSelect.unit"
|
||||
ng-options="commonTimeUnit as timeUnit.labelPlural for (commonTimeUnit, timeUnit) in durationSelect.timeUnits"
|
||||
aria-label="Duration time unit"
|
||||
aria-describedby="{{durationSelect.describedBy}}"
|
||||
></select>
|
||||
<div>
|
||||
|
|
|
@ -24,7 +24,8 @@ app.directive('durationSelect', function ($injector) {
|
|||
minimumUnit: '=',
|
||||
minimumSize: '=',
|
||||
unit: '=',
|
||||
size: '='
|
||||
size: '=',
|
||||
describedBy: '@',
|
||||
},
|
||||
template,
|
||||
replace: true,
|
||||
|
|
|
@ -122,17 +122,21 @@
|
|||
|
||||
<div class="kuiFieldGroupSection">
|
||||
<label
|
||||
id="durationSelectTriggerIntervalSizeLabel"
|
||||
for="durationSelectTriggerIntervalSize"
|
||||
class="kuiLabel kuiVerticalRhythmSmall">
|
||||
class="kuiLabel kuiVerticalRhythmSmall"
|
||||
>
|
||||
Run watch every
|
||||
</label>
|
||||
<div class="kuiVerticalRhythmSmall">
|
||||
|
||||
<div class="kuiVerticalRhythmSmall" id="durationSelectTriggerIntervalSize" role="group">
|
||||
<duration-select
|
||||
duration-id="triggerInterval"
|
||||
minimum-unit="watchEditTitlePanel.triggerIntervalMinimumUnit"
|
||||
minimum-size="watchEditTitlePanel.triggerIntervalMinimumSize"
|
||||
unit="watchEditTitlePanel.triggerIntervalUnit"
|
||||
size="watchEditTitlePanel.triggerIntervalSize"
|
||||
described-by="durationSelectTriggerIntervalSizeLabel"
|
||||
></duration-select>
|
||||
</div>
|
||||
<div class="kuiSubText kuiSubduedText kuiVerticalRhythmSmall watchEditTitlePanelIntervalValidation">
|
||||
|
|
Loading…
Reference in a new issue