Add described-by attribute to duration-selection directive to make ch…

…ildren inputs screen reader accessible. (#19779) (#19886)
elastic · Jun 14, 2018 · 685846a · 685846a
1 parent 83c0a9c
commit 685846a
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 5 deletions.
diff --git a/x-pack/plugins/watcher/public/components/duration_select/duration_select.html b/x-pack/plugins/watcher/public/components/duration_select/duration_select.html
@@ -6,13 +6,19 @@
     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')}}"
     class="durationSelectUnit kuiSelect"
     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>
diff --git a/x-pack/plugins/watcher/public/components/duration_select/duration_select.js b/x-pack/plugins/watcher/public/components/duration_select/duration_select.js
@@ -24,7 +24,8 @@ app.directive('durationSelect', function ($injector) {
       minimumUnit: '=',
       minimumSize: '=',
       unit: '=',
-      size: '='
+      size: '=',
+      describedBy: '@',
     },
     template,
     replace: true,

diff --git a/.../public/sections/watch_edit/components/watch_edit_title_panel/watch_edit_title_panel.html b/.../public/sections/watch_edit/components/watch_edit_title_panel/watch_edit_title_panel.html
@@ -122,17 +122,21 @@ <h2 class="kuiSubText kuiSubduedText">
 
       <div class="kuiFieldGroupSection">
         <label
+          id="durationSelectTriggerIntervalSizeLabel"
           for="durationSelectTriggerIntervalSize"
-          class="kuiLabel kuiVerticalRhythmSmall">
-          Run this watch every
+          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">