forked from elastic/kibana
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Improve accessibility of the Datepicker. (elastic#11753)
* Add aria-label and kbn-accessible-click to Local Nav menu buttons. * Make Share menu keyboard accessible. * Make datepicker and timepicker keyboard accessible. * Revert some kbn-accessible-click instances in favor of native button elements.
- Loading branch information
Showing
8 changed files
with
127 additions
and
51 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,46 +1,72 @@ | ||
| <div ng-show="timefilter.enabled" data-shared-timefilter="{{timefilter.enabled}}" class="kuiLocalMenu" data-test-subj="globalTimepicker"> | ||
| <div | ||
| <button | ||
| class="kuiLocalMenuItem" | ||
| aria-label="{{ timefilter.refreshInterval.pause ? 'Resume refreshing data' : 'Pause refreshing data' }}" | ||
| ng-click="toggleRefresh()" | ||
| ng-show="timefilter.refreshInterval.value > 0" | ||
| > | ||
| <span class="fa" ng-class="timefilter.refreshInterval.pause ? 'fa-play' : 'fa-pause'"></span> | ||
| </div> | ||
| <span | ||
| class="kuiIcon" | ||
| aria-hidden="true" | ||
| ng-class="timefilter.refreshInterval.pause ? 'fa-play' : 'fa-pause'" | ||
| ></span> | ||
| </button> | ||
|
|
||
| <div | ||
| <button | ||
| class="kuiLocalMenuItem navbar-timepicker-auto-refresh-desc" | ||
| ng-class="{'kuiLocalMenuItem-isSelected': kbnTopNav.isCurrent('interval') }" | ||
| ng-show="timefilter.refreshInterval.value > 0 || kbnTopNav.isCurrent('interval') || kbnTopNav.isCurrent('filter')" | ||
| ng-click="kbnTopNav.toggle('interval')" | ||
| > | ||
| <span ng-show="timefilter.refreshInterval.value === 0"> | ||
| <span class="fa fa-repeat"></span> Auto-refresh | ||
| <span aria-hidden="true" class="kuiIcon fa-repeat"></span> Auto-refresh | ||
| </span> | ||
| <span ng-show="timefilter.refreshInterval.value > 0"> | ||
| {{timefilter.refreshInterval.display}} | ||
|
|
||
| <span | ||
| ng-show="timefilter.refreshInterval.value > 0" | ||
| aria-label="{{ 'Data will refresh every ' + timefilter.refreshInterval.display }}" | ||
| > | ||
| {{ timefilter.refreshInterval.display }} | ||
| </span> | ||
| </div> | ||
| </button> | ||
|
|
||
| <div class="kuiLocalMenuItem" ng-click="back()"> | ||
| <span class="fa fa-chevron-left ng-scope" tooltip="Move backward in time"></span> | ||
| </div> | ||
| <button | ||
| class="kuiLocalMenuItem" | ||
| ng-click="back()" | ||
| aria-label="Move backward in time" | ||
| > | ||
| <span | ||
| class="kuiIcon fa-chevron-left" | ||
| aria-hidden="true" | ||
| tooltip="Move backward in time" | ||
| ></span> | ||
| </button> | ||
|
|
||
| <div | ||
| <button | ||
| data-test-subj="globalTimepickerButton" | ||
| class="kuiLocalMenuItem navbar-timepicker-time-desc" | ||
| ng-class="{'kuiLocalMenuItem-isSelected': kbnTopNav.isCurrent('filter')}" | ||
| ng-click="kbnTopNav.toggle('filter')" | ||
| aria-label="Open time range picker" | ||
| aria-haspopup="true" | ||
| aria-expanded="false" | ||
| > | ||
| <span aria-hidden="true" class="fa fa-clock-o"></span> | ||
| <span aria-hidden="true" class="kuiIcon fa-clock-o"></span> | ||
| <pretty-duration | ||
| from="timefilter.time.from" to="timefilter.time.to" | ||
| from="timefilter.time.from" | ||
| to="timefilter.time.to" | ||
| data-test-subj="globalTimepickerRange" | ||
| ></pretty-duration> | ||
| </div> | ||
| </button> | ||
|
|
||
| <div class="kuiLocalMenuItem" ng-click="forward()"> | ||
| <span class="fa fa-chevron-right ng-scope" tooltip="Move forward in time"></span> | ||
| </div> | ||
| <button | ||
| class="kuiLocalMenuItem" | ||
| ng-click="forward()" | ||
| aria-label="Move forward in time" | ||
| > | ||
| <span | ||
| aria-hidden="true" | ||
| class="kuiIcon fa-chevron-right" | ||
| tooltip="Move forward in time" | ||
| ></span> | ||
| </button> | ||
| </div> |
Oops, something went wrong.