From 78ff625c4b86aa80c454a83f1e99f5633b2f8d25 Mon Sep 17 00:00:00 2001
From: CJ Cenizal <cj@cenizal.com>
Date: Fri, 8 Jun 2018 16:33:53 -0700
Subject: [PATCH] Add described-by attribute to duration-selection directive to
 make children inputs screen reader accessible.

---
 .../components/duration_select/duration_select.html       | 8 +++++++-
 .../public/components/duration_select/duration_select.js  | 3 ++-
 .../watch_edit_title_panel/watch_edit_title_panel.html    | 8 ++++++--
 3 files changed, 15 insertions(+), 4 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
index 54c23e51ac1d9..1cfe0ac84a2a1 100644
--- 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,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>
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
index be2117e7d1e5d..f5e7a8a4efb34 100644
--- 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/x-pack/plugins/watcher/public/sections/watch_edit/components/watch_edit_title_panel/watch_edit_title_panel.html b/x-pack/plugins/watcher/public/sections/watch_edit/components/watch_edit_title_panel/watch_edit_title_panel.html
index 54d7d725d5076..135ebe079ebe2 100644
--- a/x-pack/plugins/watcher/public/sections/watch_edit/components/watch_edit_title_panel/watch_edit_title_panel.html
+++ b/x-pack/plugins/watcher/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">
+          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">