Improve date picker accessibility (elastic#12676)

* Add aria-labels to date-picker buttons (Fix elastic#12634) * Remove redundant gridcell role (Fix elastic#12673)
thomasneirynck · Jul 12, 2017 · bc8f394 · bc8f394
1 parent 3fe58e9
commit bc8f394
Show file tree

Hide file tree

Showing 5 changed files with 8 additions and 4 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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">