Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Improve accessibility of the Datepicker. #11753

Merged

Conversation

Projects
None yet
5 participants
@cjcenizal
Copy link
Contributor

commented May 12, 2017

Addresses #11528 and partially addresses #11532.

This PR enables:

  • Tabbing through the LocalNav (top menu) buttons.
  • Tabbing through and triggering the interactive elements within the datepicker. (Though triggering the interactive elements may be broken per #12343)
  • Tabbing through and triggering the interactive elements within the Share menu.
@cjcenizal

This comment has been minimized.

Copy link
Contributor Author

commented May 12, 2017

@kobelb @stacey-gammon Would you mind holding off on reviewing this? I just realized I should be using button elements instead of adding the kbn-accessible-click directive to some of these elements.

@Bargs

This comment has been minimized.

Copy link
Contributor

commented May 12, 2017

btw timepicker falls under discovery, but I'm happy to have Stacey and Brandon do our work for us :)

@cjcenizal

This comment has been minimized.

Copy link
Contributor Author

commented May 15, 2017

@Bargs Hahaha thanks man, I realized after I tagged them that it was a Discovery thing but then I thought about how much time you put into reviewing the kbn-accessible-click PR and I thought I'd try to give you a break! 😄

@stacey-gammon

This comment has been minimized.

Copy link
Contributor

commented May 16, 2017

@cjcenizal just let us know when it's ready for review!

@cjcenizal

This comment has been minimized.

Copy link
Contributor Author

commented May 16, 2017

@stacey-gammon @kobelb OK this is ready for your 👁 now. Thanks!

@stacey-gammon
Copy link
Contributor

left a comment

LGTM

@epixa epixa added the v6.0.0-alpha2 label May 17, 2017

@kobelb

kobelb approved these changes May 18, 2017

Copy link
Contributor

left a comment

LGTM

@cjcenizal cjcenizal merged commit 515e16a into elastic:master May 19, 2017

2 checks passed

CLA Commit author has signed the CLA
Details
kibana-ci Build finished.
Details

@cjcenizal cjcenizal deleted the cjcenizal:11528/time-range-buttons-accessibility branch May 19, 2017

cjcenizal added a commit to cjcenizal/kibana that referenced this pull request May 19, 2017

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.

cjcenizal added a commit that referenced this pull request May 19, 2017

Improve accessibility of the Datepicker. (#11753) (#11927)
* 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.

nreese added a commit to nreese/kibana that referenced this pull request May 24, 2017

snide added a commit to snide/kibana that referenced this pull request May 30, 2017

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.

nreese added a commit to nreese/kibana that referenced this pull request Jun 2, 2017

nreese added a commit to nreese/kibana that referenced this pull request Jun 2, 2017

nreese added a commit to nreese/kibana that referenced this pull request Jun 9, 2017

nreese added a commit that referenced this pull request Jun 9, 2017

Timepicker on the right (#11980)
* quick panel moved to directive

* move relative to directive

* move absolute to directive

* move stuff from timepicker directive to new directives

* move timepicker to right with flexbox

* remove left padding for kbn-timepicker-section

* merge in timepicker.html changes from - Improve accessibility of the Datepicker. (#11753)

* Adjust markup and styles so that the Quick, Relative, and Absolute layouts all occupy the same bounds (#1)

* Adjust markup and styles so that the Quick, Relative, and Absolute layouts all occupy the same bounds, so the content doesn't jump around as you switch modes..

* Make kbn-timepicker-content responsive so that it stacks content on narrower screens.

* Combine Relative input and select fields using kuiFieldGroup.

* Make Timepicker submit button wider.

* Align button on right.

* migrate inputs from form-control to kui classes

* update generated dist/ui_framework.css

* fix broken tests

* create kbn-timerpicker-nav-button class and update kbn-timepicker-section to make each column the same width

chrisronline added a commit to chrisronline/kibana that referenced this pull request Jun 14, 2017

Timepicker on the right (elastic#11980)
* quick panel moved to directive

* move relative to directive

* move absolute to directive

* move stuff from timepicker directive to new directives

* move timepicker to right with flexbox

* remove left padding for kbn-timepicker-section

* merge in timepicker.html changes from - Improve accessibility of the Datepicker. (elastic#11753)

* Adjust markup and styles so that the Quick, Relative, and Absolute layouts all occupy the same bounds (#1)

* Adjust markup and styles so that the Quick, Relative, and Absolute layouts all occupy the same bounds, so the content doesn't jump around as you switch modes..

* Make kbn-timepicker-content responsive so that it stacks content on narrower screens.

* Combine Relative input and select fields using kuiFieldGroup.

* Make Timepicker submit button wider.

* Align button on right.

* migrate inputs from form-control to kui classes

* update generated dist/ui_framework.css

* fix broken tests

* create kbn-timerpicker-nav-button class and update kbn-timepicker-section to make each column the same width

stacey-gammon added a commit to stacey-gammon/kibana that referenced this pull request Jun 14, 2017

Timepicker on the right (elastic#11980)
* quick panel moved to directive

* move relative to directive

* move absolute to directive

* move stuff from timepicker directive to new directives

* move timepicker to right with flexbox

* remove left padding for kbn-timepicker-section

* merge in timepicker.html changes from - Improve accessibility of the Datepicker. (elastic#11753)

* Adjust markup and styles so that the Quick, Relative, and Absolute layouts all occupy the same bounds (#1)

* Adjust markup and styles so that the Quick, Relative, and Absolute layouts all occupy the same bounds, so the content doesn't jump around as you switch modes..

* Make kbn-timepicker-content responsive so that it stacks content on narrower screens.

* Combine Relative input and select fields using kuiFieldGroup.

* Make Timepicker submit button wider.

* Align button on right.

* migrate inputs from form-control to kui classes

* update generated dist/ui_framework.css

* fix broken tests

* create kbn-timerpicker-nav-button class and update kbn-timepicker-section to make each column the same width

Dreadnoth added a commit to Dreadnoth/kibana that referenced this pull request Aug 8, 2017

Improve accessibility of the Datepicker. (elastic#11753) (elastic#11927)
* 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.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.