From bc8f394d94c278324c50729a14e80a6e648bec87 Mon Sep 17 00:00:00 2001
From: Tim Roes <github@timroes.de>
Date: Wed, 12 Jul 2017 08:31:01 -0700
Subject: [PATCH] Improve date picker accessibility (#12676)

* Add aria-labels to date-picker buttons (Fix #12634)

* Remove redundant gridcell role (Fix #12673)
---
 src/ui/public/angular-bootstrap/datepicker/datepicker.js | 1 +
 src/ui/public/angular-bootstrap/datepicker/day.html      | 3 ++-
 src/ui/public/angular-bootstrap/datepicker/month.html    | 3 ++-
 src/ui/public/angular-bootstrap/datepicker/year.html     | 3 ++-
 src/ui/public/kbn_top_nav/kbn_top_nav.html               | 2 +-
 5 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/src/ui/public/angular-bootstrap/datepicker/datepicker.js b/src/ui/public/angular-bootstrap/datepicker/datepicker.js
index 05784947d0505..6a75a99788c1d 100755
--- a/src/ui/public/angular-bootstrap/datepicker/datepicker.js
+++ b/src/ui/public/angular-bootstrap/datepicker/datepicker.js
@@ -388,6 +388,7 @@ angular.module('ui.bootstrap.datepicker', ['ui.bootstrap.dateparser', 'ui.bootst
 
         scope.title = [years[0].label, years[range - 1].label].join(' - ');
         scope.rows = ctrl.split(years, 5);
+        scope.yearRange = ctrl.yearRange;
       };
 
       ctrl.compare = function(date1, date2) {
diff --git a/src/ui/public/angular-bootstrap/datepicker/day.html b/src/ui/public/angular-bootstrap/datepicker/day.html
index 4912427ea0b70..026fb49551d93 100755
--- a/src/ui/public/angular-bootstrap/datepicker/day.html
+++ b/src/ui/public/angular-bootstrap/datepicker/day.html
@@ -15,6 +15,7 @@
             type="button"
             class="kuiDatePickerNavigationButton"
             ng-click="move(-1)"
+            aria-label="Previous month"
           >
             <span class="kuiIcon fa-chevron-left"></span>
           </button>
@@ -35,6 +36,7 @@
             type="button"
             class="kuiDatePickerNavigationButton"
             ng-click="move(1)"
+            aria-label="Next month"
           >
             <span class="kuiIcon fa-chevron-right"></span>
           </button>
@@ -61,7 +63,6 @@
         ng-repeat="dt in row track by dt.date"
         class="kuiDatePickerRowCell"
         ng-class="{'kuiDatePickerRowCell-isBlocked': dt.disabled && !dt.secondary}"
-        role="gridcell"
         id="{{dt.uid}}"
         aria-disabled="{{!!dt.disabled}}"
       >
diff --git a/src/ui/public/angular-bootstrap/datepicker/month.html b/src/ui/public/angular-bootstrap/datepicker/month.html
index 5dbc689701673..8907215e6e8d2 100755
--- a/src/ui/public/angular-bootstrap/datepicker/month.html
+++ b/src/ui/public/angular-bootstrap/datepicker/month.html
@@ -15,6 +15,7 @@
             type="button"
             class="kuiDatePickerNavigationButton"
             ng-click="move(-1)"
+            aria-label="Previous year"
           >
             <span class="kuiIcon fa-chevron-left"></span>
           </button>
@@ -35,6 +36,7 @@
             type="button"
             class="kuiDatePickerNavigationButton"
             ng-click="move(1)"
+            aria-label="Next year"
           >
             <span class="kuiIcon fa-chevron-right"></span>
           </button>
@@ -48,7 +50,6 @@
         ng-repeat="dt in row track by dt.date"
         class="kuiDatePickerRowCell"
         ng-class="{'kuiDatePickerRowCell-isBlocked': dt.disabled && !dt.secondary}"
-        role="gridcell"
         id="{{dt.uid}}"
         aria-disabled="{{!!dt.disabled}}"
       >
diff --git a/src/ui/public/angular-bootstrap/datepicker/year.html b/src/ui/public/angular-bootstrap/datepicker/year.html
index c7903cbbaa8f9..7c1ad3be43253 100755
--- a/src/ui/public/angular-bootstrap/datepicker/year.html
+++ b/src/ui/public/angular-bootstrap/datepicker/year.html
@@ -15,6 +15,7 @@
             type="button"
             class="kuiDatePickerNavigationButton"
             ng-click="move(-1)"
+            aria-label="Previous {{yearRange}} years"
           >
             <span class="kuiIcon fa-chevron-left"></span>
           </button>
@@ -35,6 +36,7 @@
             type="button"
             class="kuiDatePickerNavigationButton"
             ng-click="move(1)"
+            aria-label="Next {{yearRange}} years"
           >
             <span class="kuiIcon fa-chevron-right"></span>
           </button>
@@ -48,7 +50,6 @@
         ng-repeat="dt in row track by dt.date"
         class="kuiDatePickerRowCell"
         ng-class="{'kuiDatePickerRowCell-isBlocked': dt.disabled && !dt.secondary}"
-        role="gridcell"
         id="{{dt.uid}}"
         aria-disabled="{{!!dt.disabled}}"
       >
diff --git a/src/ui/public/kbn_top_nav/kbn_top_nav.html b/src/ui/public/kbn_top_nav/kbn_top_nav.html
index bda5662a9495d..56ed39e3aaec9 100644
--- a/src/ui/public/kbn_top_nav/kbn_top_nav.html
+++ b/src/ui/public/kbn_top_nav/kbn_top_nav.html
@@ -41,7 +41,7 @@
     class="kuiLocalDropdown"
     ng-show="kbnTopNav.rendered"
   >
-    <button class="kuiLocalDropdownCloseButton" ng-click="kbnTopNav.close()">
+    <button class="kuiLocalDropdownCloseButton" ng-click="kbnTopNav.close()" aria-label="Close">
       <span class="kuiIcon fa-chevron-circle-up"></span>
     </button>
     <div id="template_wrapper">