maxmustermann/kibana
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Add described-by attribute to duration-selection directive to make children inputs screen reader accessible. (#19779)

Browse source
This commit is contained in:
CJ Cenizal 2018-06-13 17:05:42 -07:00 committed by GitHub
parent 9493ac4093
commit 0a2ce7d370
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 15 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
x-pack/plugins/watcher/public/components/duration_select/duration_select.html
View file

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

3
x-pack/plugins/watcher/public/components/duration_select/duration_select.js
View file

@ -24,7 +24,8 @@ app.directive('durationSelect', function ($injector) {
minimumUnit: '=',
minimumSize: '=',
unit: '=',
size: '='
size: '=',
describedBy: '@',
},
template,
replace: true,

8
x-pack/plugins/watcher/public/sections/watch_edit/components/watch_edit_title_panel/watch_edit_title_panel.html
View file

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