[ML] Add aria-label to calendar and jobs list buttons (#21922)

* [ML] Add aria-label to calendar and jobs list buttons * [ML] Simplify building of Jobs List expanded row icon aria-label
elastic · Aug 14, 2018 · fee34f7 · fee34f7
1 parent e26cfc6
commit fee34f7
Show file tree

Hide file tree

Showing 4 changed files with 6 additions and 6 deletions.
diff --git a/x-pack/plugins/ml/public/jobs/jobs_list/components/job_actions/results.js b/x-pack/plugins/ml/public/jobs/jobs_list/components/job_actions/results.js
@@ -47,7 +47,7 @@ export function ResultLinks({ jobs })  {
           <EuiButtonIcon
             href={getLink('timeseriesexplorer', jobs)}
             iconType="stats"
-            aria-label="View results in single metric viewer"
+            aria-label={`Open ${tooltipJobs} in Single Metric Viewer`}
             className="results-button"
 
           />
@@ -60,7 +60,7 @@ export function ResultLinks({ jobs })  {
         <EuiButtonIcon
           href={getLink('explorer', jobs)}
           iconType="tableOfContents"
-          aria-label="View results in anomaly explorer"
+          aria-label={`Open ${tooltipJobs} in Anomaly Explorer`}
           className="results-button"
         />
       </EuiToolTip>

diff --git a/x-pack/plugins/ml/public/jobs/jobs_list/components/jobs_list/jobs_list.js b/x-pack/plugins/ml/public/jobs/jobs_list/components/jobs_list/jobs_list.js
@@ -109,7 +109,7 @@ export class JobsList extends Component {
           <EuiButtonIcon
             onClick={() => this.toggleRow(item)}
             iconType={this.state.itemIdToExpandedRowMap[item.id] ? 'arrowDown' : 'arrowRight'}
-            aria-label={this.state.itemIdToExpandedRowMap[item.id] ? 'Hide details' : 'Show details'}
+            aria-label={`${this.state.itemIdToExpandedRowMap[item.id] ? 'Hide' : 'Show'} details for ${item.id}`}
             data-row-id={item.id}
           />
         )

diff --git a/x-pack/plugins/ml/public/settings/scheduled_events/calendars_list/calendars_list.html b/x-pack/plugins/ml/public/settings/scheduled_events/calendars_list/calendars_list.html
@@ -102,7 +102,7 @@
                         ng-attr-tooltip="{{buttonChecks.newButtonWrapperTooltip()}}">
                         <button
                           class="kuiMenuButton kuiMenuButton--basic kuiMenuButton--iconText"
-                          title="Edit"
+                          aria-label="Edit {{calendar.calendar_id}}"
                           ng-disabled='buttonChecks.newButtonDisabled()'
                           ng-click="editCalendarClick(calendar.calendar_id)">
                           <span class="kuiMenuButton__icon kuiIcon fa-pencil"></span>
@@ -114,7 +114,7 @@
                         ng-attr-tooltip="{{buttonChecks.deleteButtonWrapperTooltip()}}">
                         <button
                           class="kuiMenuButton kuiMenuButton--danger kuiMenuButton--iconText"
-                          title="Edit"
+                          aria-label="Delete {{calendar.calendar_id}}"
                           ng-disabled='buttonChecks.deleteButtonDisabled()'
                           ng-click="deleteCalendarClick(calendar.calendar_id)"
                           href="" >

diff --git a/x-pack/plugins/ml/public/settings/scheduled_events/components/events_list/events_list.html b/x-pack/plugins/ml/public/settings/scheduled_events/components/events_list/events_list.html
@@ -102,7 +102,7 @@
               <div class="kuiMenuButtonGroup kuiMenuButtonGroup--alignRight">
                 <button
                   class="kuiMenuButton kuiMenuButton--danger kuiMenuButton--iconText"
-                  title="Edit"
+                  aria-label="Delete {{event.description}}"
                   ng-disabled="lockControls === true"
                   ng-click="deleteEvent(event)"
                   href="">