From 15f979eab03a399fc8b64ffbf6aa65a88f17d1b6 Mon Sep 17 00:00:00 2001 From: CJ Cenizal Date: Thu, 11 May 2017 19:47:50 -0700 Subject: [PATCH 1/4] Add aria-label and kbn-accessible-click to Local Nav menu buttons. --- src/ui/public/directives/pretty_duration.js | 11 ++-- src/ui/public/kbn_top_nav/kbn_top_nav.html | 3 +- .../timepicker/kbn_global_timepicker.html | 53 +++++++++++++++---- 3 files changed, 52 insertions(+), 15 deletions(-) diff --git a/src/ui/public/directives/pretty_duration.js b/src/ui/public/directives/pretty_duration.js index c8f5725702383..24caa80442a82 100644 --- a/src/ui/public/directives/pretty_duration.js +++ b/src/ui/public/directives/pretty_duration.js @@ -22,13 +22,18 @@ module.directive('prettyDuration', function (config, quickRanges, timeUnits) { lookupByRange[frame.from + ' to ' + frame.to] = frame; }); + function setText(text) { + $elem.text(text); + $elem.attr('aria-label', `Current time range is ${text}`); + } + function stringify() { let text; // If both parts are date math, try to look up a reasonable string if ($scope.from && $scope.to && !moment.isMoment($scope.from) && !moment.isMoment($scope.to)) { const tryLookup = lookupByRange[$scope.from.toString() + ' to ' + $scope.to.toString()]; if (tryLookup) { - $elem.text(tryLookup.display); + setText(tryLookup.display); } else { const fromParts = $scope.from.toString().split('-'); if ($scope.to.toString() === 'now' && fromParts[0] === 'now' && fromParts[1]) { @@ -37,7 +42,7 @@ module.directive('prettyDuration', function (config, quickRanges, timeUnits) { if (rounded[1]) { text = text + ' rounded to the ' + timeUnits[rounded[1]]; } - $elem.text(text); + setText(text); } else { cantLookup(); } @@ -62,7 +67,7 @@ module.directive('prettyDuration', function (config, quickRanges, timeUnits) { } } }); - $elem.text(display.from + ' to ' + display.to); + setText(`${display.from} to ${display.to}`); } $scope.$watch('from', stringify); 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 1c881f4d36d24..bbe83881b3e61 100644 --- a/src/ui/public/kbn_top_nav/kbn_top_nav.html +++ b/src/ui/public/kbn_top_nav/kbn_top_nav.html @@ -27,6 +27,7 @@ tooltip-placement="bottom" tooltip-popup-delay="400" tooltip-append-to-body="1" + kbn-accessible-click data-test-subj="{{menuItem.testId}}" > @@ -43,7 +44,7 @@ ng-show="kbnTopNav.rendered" >
diff --git a/src/ui/public/timepicker/kbn_global_timepicker.html b/src/ui/public/timepicker/kbn_global_timepicker.html index e44c6d2c3e2c3..2afa44ff0afb0 100644 --- a/src/ui/public/timepicker/kbn_global_timepicker.html +++ b/src/ui/public/timepicker/kbn_global_timepicker.html @@ -1,10 +1,16 @@
- +
- Auto-refresh + Auto-refresh - - {{timefilter.refreshInterval.display}} + + + {{ timefilter.refreshInterval.display }}
-
- +
+
-
- +
+
From d62e4651d6c6e8cb7d1c1ef7a15b11566ebce56f Mon Sep 17 00:00:00 2001 From: CJ Cenizal Date: Thu, 11 May 2017 19:50:23 -0700 Subject: [PATCH 2/4] Make Share menu keyboard accessible. --- src/ui/public/share/views/share.html | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/src/ui/public/share/views/share.html b/src/ui/public/share/views/share.html index a56d9e2fb047b..d3f77b586be93 100644 --- a/src/ui/public/share/views/share.html +++ b/src/ui/public/share/views/share.html @@ -30,6 +30,7 @@ Copy @@ -62,6 +63,7 @@ Copy @@ -104,6 +106,7 @@ class="kuiLocalDropdownHeader__action" ng-if="!share.urlFlags.shortSnapshotIframe" ng-click="share.toggleShortSnapshotIframeUrl()" + kbn-accessible-click > Short URL @@ -112,6 +115,7 @@ class="kuiLocalDropdownHeader__action" ng-if="share.urlFlags.shortSnapshotIframe" ng-click="share.toggleShortSnapshotIframeUrl()" + kbn-accessible-click > Long URL @@ -119,6 +123,7 @@ Copy @@ -153,6 +158,7 @@ class="kuiLocalDropdownHeader__action" ng-if="!share.urlFlags.shortSnapshot" ng-click="share.toggleShortSnapshotUrl()" + kbn-accessible-click > Short URL @@ -161,6 +167,7 @@ class="kuiLocalDropdownHeader__action" ng-if="share.urlFlags.shortSnapshot" ng-click="share.toggleShortSnapshotUrl()" + kbn-accessible-click > Long URL @@ -169,6 +176,7 @@ data-test-subj="sharedSnapshotCopyButton" class="kuiLocalDropdownHeader__action" ng-click="share.copyToClipboard('#snapshotUrl')" + kbn-accessible-click > Copy From 14588c1de56f51f2deb076a33b18a7bdc76807fd Mon Sep 17 00:00:00 2001 From: CJ Cenizal Date: Thu, 11 May 2017 20:04:23 -0700 Subject: [PATCH 3/4] Make datepicker and timepicker keyboard accessible. --- .../angular-bootstrap/datepicker/day.html | 4 - .../angular-bootstrap/datepicker/month.html | 4 - .../angular-bootstrap/datepicker/year.html | 4 - src/ui/public/timepicker/timepicker.html | 76 +++++++++++++++---- 4 files changed, 63 insertions(+), 25 deletions(-) diff --git a/src/ui/public/angular-bootstrap/datepicker/day.html b/src/ui/public/angular-bootstrap/datepicker/day.html index e276eefa218c3..4d2bb57ffb0ae 100755 --- a/src/ui/public/angular-bootstrap/datepicker/day.html +++ b/src/ui/public/angular-bootstrap/datepicker/day.html @@ -15,7 +15,6 @@ type="button" class="kuiDatePickerNavigationButton" ng-click="move(-1)" - tabindex="-1" > @@ -28,7 +27,6 @@ type="button" class="kuiDatePickerNavigationButton" ng-click="toggleMode()" - tabindex="-1" > {{title}} @@ -37,7 +35,6 @@ type="button" class="kuiDatePickerNavigationButton" ng-click="move(1)" - tabindex="-1" > @@ -74,7 +71,6 @@ ng-class="{'kuiDatePickerRowCellContent-isSelected': dt.selected, 'kuiDatePickerRowCellContent-isCurrent': dt.current, 'kuiDatePickerRowCellContent-isOtherMonth': dt.secondary}" ng-click="select(dt.date)" ng-disabled="dt.disabled" - tabindex="-1" > {{dt.label}} diff --git a/src/ui/public/angular-bootstrap/datepicker/month.html b/src/ui/public/angular-bootstrap/datepicker/month.html index b5ecf93317cff..165708ece3082 100755 --- a/src/ui/public/angular-bootstrap/datepicker/month.html +++ b/src/ui/public/angular-bootstrap/datepicker/month.html @@ -15,7 +15,6 @@ type="button" class="kuiDatePickerNavigationButton" ng-click="move(-1)" - tabindex="-1" > @@ -28,7 +27,6 @@ type="button" class="kuiDatePickerNavigationButton" ng-click="toggleMode()" - tabindex="-1" > {{title}} @@ -37,7 +35,6 @@ type="button" class="kuiDatePickerNavigationButton" ng-click="move(1)" - tabindex="-1" > @@ -61,7 +58,6 @@ ng-class="{'kuiDatePickerRowCellContent-isSelected': dt.selected, 'kuiDatePickerRowCellContent-isCurrent': dt.current}" ng-click="select(dt.date)" ng-disabled="dt.disabled" - tabindex="-1" > {{dt.label}} diff --git a/src/ui/public/angular-bootstrap/datepicker/year.html b/src/ui/public/angular-bootstrap/datepicker/year.html index afb875145af1d..4d37a0d9e13c3 100755 --- a/src/ui/public/angular-bootstrap/datepicker/year.html +++ b/src/ui/public/angular-bootstrap/datepicker/year.html @@ -15,7 +15,6 @@ type="button" class="kuiDatePickerNavigationButton" ng-click="move(-1)" - tabindex="-1" > @@ -28,7 +27,6 @@ type="button" class="kuiDatePickerNavigationButton" ng-click="toggleMode()" - tabindex="-1" > {{title}} @@ -37,7 +35,6 @@ type="button" class="kuiDatePickerNavigationButton" ng-click="move(1)" - tabindex="-1" > @@ -61,7 +58,6 @@ ng-class="{'kuiDatePickerRowCellContent-isSelected': dt.selected, 'kuiDatePickerRowCellContent-isCurrent': dt.current}" ng-click="select(dt.date)" ng-disabled="dt.disabled" - tabindex="-1" > {{dt.label}} diff --git a/src/ui/public/timepicker/timepicker.html b/src/ui/public/timepicker/timepicker.html index 04f0b8684961a..d84a17673a5f1 100644 --- a/src/ui/public/timepicker/timepicker.html +++ b/src/ui/public/timepicker/timepicker.html @@ -9,13 +9,30 @@
@@ -27,7 +44,11 @@
  • - +
@@ -41,8 +62,14 @@
@@ -85,8 +112,14 @@
@@ -141,8 +174,14 @@
-
@@ -154,9 +193,15 @@
- Invalid Date + Invalid Date
@@ -191,7 +236,12 @@
  • - + {{inter.display}}
    • From 5339431928e2cdb3e3d01a1b60f0368d47215a8b Mon Sep 17 00:00:00 2001 From: CJ Cenizal Date: Tue, 16 May 2017 14:00:41 -0700 Subject: [PATCH 4/4] Revert some kbn-accessible-click instances in favor of native button elements. --- src/ui/public/kbn_top_nav/kbn_top_nav.html | 6 ++--- .../timepicker/kbn_global_timepicker.html | 25 ++++++++----------- 2 files changed, 12 insertions(+), 19 deletions(-) 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 bbe83881b3e61..bda5662a9495d 100644 --- a/src/ui/public/kbn_top_nav/kbn_top_nav.html +++ b/src/ui/public/kbn_top_nav/kbn_top_nav.html @@ -14,7 +14,7 @@
    -
    -
    + > diff --git a/src/ui/public/timepicker/kbn_global_timepicker.html b/src/ui/public/timepicker/kbn_global_timepicker.html index 2afa44ff0afb0..fd16a27e9e6f2 100644 --- a/src/ui/public/timepicker/kbn_global_timepicker.html +++ b/src/ui/public/timepicker/kbn_global_timepicker.html @@ -1,24 +1,22 @@
    -
    -
    + -
    Auto-refresh @@ -30,29 +28,27 @@ > {{ timefilter.refreshInterval.display }} -
    + -
    -
    + -
    -
    + -
    -
    +