From 4773798114bb35ec8ea4d13c08cce59aca20b39f Mon Sep 17 00:00:00 2001
From: Melissa Alvarez <melissa.alvarez@elastic.co>
Date: Tue, 25 Sep 2018 16:44:42 +0100
Subject: [PATCH] Add context to job picker for accessibility (#23483)

---
 .../components/job_select_list/job_select_list.html       | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/x-pack/plugins/ml/public/components/job_select_list/job_select_list.html b/x-pack/plugins/ml/public/components/job_select_list/job_select_list.html
index 2fe9310bb0297..72f0564926d47 100644
--- a/x-pack/plugins/ml/public/components/job_select_list/job_select_list.html
+++ b/x-pack/plugins/ml/public/components/job_select_list/job_select_list.html
@@ -14,7 +14,7 @@
           ng-if="singleSelection !== true"
           type="checkbox"
           ng-checked="allGroupsSelected"
-          aria-label="Select all groups checkbox"
+          aria-label="Select all groups checkbox. Total count {{selected.groups.length}}."
           ng-click="toggleAllGroupsSelection()" />
         Groups
       </div>
@@ -25,6 +25,7 @@
               <label class="kuiFormLabel">
                 <div >
                   <input
+                    aria-label="Group ID {{group.id}}"
                     ng-if="singleSelection !== true && group.selectable === true" type="checkbox"
                     ng-model="group.selected"
                     ng-click="toggleGroupSelection()" />
@@ -53,7 +54,7 @@
     <div class="list-section-title" ng-if="singleSelection !== true">
       <input type="checkbox"
         ng-checked="allJobsSelected"
-        aria-label="Select all jobs checkbox"
+        aria-label="Select all jobs checkbox. Total count {{selected.jobs.length}}."
         ng-click="toggleAllJobsSelection()" />
       Jobs
     </div>
@@ -72,7 +73,7 @@
                   value="{{job.id}}"
                   ng-model="$parent.$parent.selectedJobRadio"
                   ng-disabled='job.disabled' />
-                <span ng-class="{'disabled-job': job.disabled}">{{job.id}}</span>
+                <span ng-class="{'disabled-job': job.disabled}" aria-label="Job ID {{job.id}}">{{job.id}}</span>
               </span>
             </div>
             <div>
@@ -81,6 +82,7 @@
               </div>
               <div
                 class='gant-bar'
+                aria-label="time range {{job.timeRange.label}}"
                 ng-class="{'disabled-job': job.disabled, 'gant-bar-running': job.running}"
                 tooltip='{{job.timeRange.label}}'
                 tooltip-placement="bottom"