-
-
Notifications
You must be signed in to change notification settings - Fork 3.5k
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 QDate keyboard navigation and ARIA labels #5266
Comments
Would you like to take a shot on solving this problem? We can discuss here the implementation details, but if you could create a PR for this it would be great. |
Ok, I tried some things: https://github.com/BrennaEpp/quasar It mostly works, except for:
Hopefully what I did was helpful but implementation-wise there may be way better ways. |
…asarframework#4068, quasarframework#6736 - allow unique TAB target point in a group - allow key navigation in group - improve initial focusing on QMenu and QDialog
…asarframework#4068, quasarframework#6736 - allow unique TAB target point in a group - allow key navigation in group - improve initial focusing on QMenu and QDialog
…asarframework#4068, quasarframework#6736 - allow unique TAB target point in a group - allow key navigation in group - improve initial focusing on QMenu and QDialog
…asarframework#4068, quasarframework#6736 - allow unique TAB target point in a group - allow key navigation in group - improve initial focusing on QMenu and QDialog
…asarframework#4068, quasarframework#6736 - allow unique TAB target point in a group - allow key navigation in group - improve initial focusing on QMenu and QDialog
…asarframework#4068, quasarframework#6736 - allow unique TAB target point in a group - allow key navigation in group - improve initial focusing on QMenu and QDialog
…asarframework#4068, quasarframework#6736 - allow unique TAB target point in a group - allow key navigation in group - improve initial focusing on QMenu and QDialog
…asarframework#4068, quasarframework#6736 - allow unique TAB target point in a group - allow key navigation in group - improve initial focusing on QMenu and QDialog
…asarframework#4068, quasarframework#6736 - allow unique TAB target point in a group - allow key navigation in group - improve initial focusing on QMenu and QDialog
…asarframework#4068, quasarframework#6736 - allow unique TAB target point in a group - allow key navigation in group - improve initial focusing on QMenu and QDialog
…asarframework#4068, quasarframework#6736 - allow unique TAB target point in a group - allow key navigation in group - improve initial focusing on QMenu and QDialog
…asarframework#4068, quasarframework#6736 - allow unique TAB target point in a group - allow key navigation in group - improve initial focusing on QMenu and QDialog
…asarframework#4068, quasarframework#6736 - allow unique TAB target point in a group - allow key navigation in group - improve initial focusing on QMenu and QDialog
…asarframework#4068, quasarframework#6736 - allow unique TAB target point in a group - allow key navigation in group - improve initial focusing on QMenu and QDialog
…asarframework#4068, quasarframework#6736 - allow unique TAB target point in a group - allow key navigation in group - improve initial focusing on QMenu and QDialog
…asarframework#4068, quasarframework#6736 - allow unique TAB target point in a group - allow key navigation in group - improve initial focusing on QMenu and QDialog
…asarframework#4068, quasarframework#6736 - allow unique TAB target point in a group - allow key navigation in group - improve initial focusing on QMenu and QDialog
…asarframework#4068, quasarframework#6736 - allow unique TAB target point in a group - allow key navigation in group - improve initial focusing on QMenu and QDialog
…asarframework#4068, quasarframework#6736 - allow unique TAB target point in a group - allow key navigation in group - improve initial focusing on QMenu and QDialog
…asarframework#4068, quasarframework#6736 - allow unique TAB target point in a group - allow key navigation in group - improve initial focusing on QMenu and QDialog
…asarframework#4068, quasarframework#6736 - allow unique TAB target point in a group - allow key navigation in group - improve initial focusing on QMenu and QDialog
…asarframework#4068, quasarframework#6736 - allow unique TAB target point in a group - allow key navigation in group - improve initial focusing on QMenu and QDialog
…asarframework#4068, quasarframework#6736 - allow unique TAB target point in a group - allow key navigation in group - improve initial focusing on QMenu and QDialog
…asarframework#4068, quasarframework#6736 - allow unique TAB target point in a group - allow key navigation in group - improve initial focusing on QMenu and QDialog
…p arround keyboard navigation quasarframework#5266, quasarframework#4068, quasarframework#6736, quasarframework#6562, quasarframework#6560, quasarframework#12464, quasarframework#12506, quasarframework#12505 - allow unique TAB target point in a group - allow key navigation in group - improve initial focusing on QMenu and QDialog - tab goes from the end of the menu/dialog to the start - shift+tab goes from the start of the menu/dialog to the end - key navigation in tabs
…p arround keyboard navigation quasarframework#5266, quasarframework#4068, quasarframework#6736, quasarframework#6562, quasarframework#6560, quasarframework#12464, quasarframework#12506, quasarframework#12505 - allow unique TAB target point in a group - allow key navigation in group - improve initial focusing on QMenu and QDialog - tab goes from the end of the menu/dialog to the start - shift+tab goes from the start of the menu/dialog to the end - key navigation in tabs
…p arround keyboard navigation quasarframework#5266, quasarframework#4068, quasarframework#6736, quasarframework#6562, quasarframework#6560, quasarframework#12464, quasarframework#12506, quasarframework#12505 - allow unique TAB target point in a group - allow key navigation in group - improve initial focusing on QMenu and QDialog - tab goes from the end of the menu/dialog to the start - shift+tab goes from the start of the menu/dialog to the end - key navigation in tabs
…p arround keyboard navigation quasarframework#5266, quasarframework#4068, quasarframework#6736, quasarframework#6562, quasarframework#6560, quasarframework#12464, quasarframework#12506, quasarframework#12505 - allow unique TAB target point in a group - allow key navigation in group - improve initial focusing on QMenu and QDialog - tab goes from the end of the menu/dialog to the start - shift+tab goes from the start of the menu/dialog to the end - key navigation in tabs
@pdanpdan |
Sorry, I cannot support the changes also for Qv2 |
…p arround keyboard navigation quasarframework#5266, quasarframework#4068, quasarframework#6736, quasarframework#6562, quasarframework#6560, quasarframework#12464, quasarframework#12506, quasarframework#12505 - allow unique TAB target point in a group - allow key navigation in group - improve initial focusing on QMenu and QDialog - tab goes from the end of the menu/dialog to the start - shift+tab goes from the start of the menu/dialog to the end - key navigation in tabs
Fix will be available in Quasar v2.11.6 |
…p arround keyboard navigation quasarframework#5266, quasarframework#4068, quasarframework#6736, quasarframework#6562, quasarframework#6560, quasarframework#12464, quasarframework#12506, quasarframework#12505 - allow unique TAB target point in a group - allow key navigation in group - improve initial focusing on QMenu and QDialog - tab goes from the end of the menu/dialog to the start - shift+tab goes from the start of the menu/dialog to the end - key navigation in tabs
…p arround keyboard navigation quasarframework#5266, quasarframework#4068, quasarframework#6736, quasarframework#6562, quasarframework#6560, quasarframework#12464, quasarframework#12506, quasarframework#12505 - allow unique TAB target point in a group - allow key navigation in group - improve initial focusing on QMenu and QDialog - tab goes from the end of the menu/dialog to the start - shift+tab goes from the start of the menu/dialog to the end - key navigation in tabs
…p arround keyboard navigation quasarframework#5266, quasarframework#4068, quasarframework#6736, quasarframework#6562, quasarframework#6560, quasarframework#12464, quasarframework#12506, quasarframework#12505 - allow unique TAB target point in a group - allow key navigation in group - improve initial focusing on QMenu and QDialog - tab goes from the end of the menu/dialog to the start - shift+tab goes from the start of the menu/dialog to the end - key navigation in tabs
…p arround keyboard navigation quasarframework#5266, quasarframework#4068, quasarframework#6736, quasarframework#6562, quasarframework#6560, quasarframework#12464, quasarframework#12506, quasarframework#12505 - allow unique TAB target point in a group - allow key navigation in group - improve initial focusing on QMenu and QDialog - tab goes from the end of the menu/dialog to the start - shift+tab goes from the start of the menu/dialog to the end - key navigation in tabs
…p arround keyboard navigation quasarframework#5266, quasarframework#4068, quasarframework#6736, quasarframework#6562, quasarframework#6560, quasarframework#12464, quasarframework#12506, quasarframework#12505 - allow unique TAB target point in a group - allow key navigation in group - improve initial focusing on QMenu and QDialog - tab goes from the end of the menu/dialog to the start - shift+tab goes from the start of the menu/dialog to the end - key navigation in tabs
…p arround keyboard navigation quasarframework#5266, quasarframework#4068, quasarframework#6736, quasarframework#6562, quasarframework#6560, quasarframework#12464, quasarframework#12506, quasarframework#12505 - allow unique TAB target point in a group - allow key navigation in group - improve initial focusing on QMenu and QDialog - tab goes from the end of the menu/dialog to the start - shift+tab goes from the start of the menu/dialog to the end - key navigation in tabs
…p arround keyboard navigation quasarframework#5266, quasarframework#4068, quasarframework#6736, quasarframework#6562, quasarframework#6560, quasarframework#12464, quasarframework#12506, quasarframework#12505 - allow unique TAB target point in a group - allow key navigation in group - improve initial focusing on QMenu and QDialog - tab goes from the end of the menu/dialog to the start - shift+tab goes from the start of the menu/dialog to the end - key navigation in tabs
…p arround keyboard navigation quasarframework#5266, quasarframework#4068, quasarframework#6736, quasarframework#6562, quasarframework#6560, quasarframework#12464, quasarframework#12506, quasarframework#12505 - allow unique TAB target point in a group - allow key navigation in group - improve initial focusing on QMenu and QDialog - tab goes from the end of the menu/dialog to the start - shift+tab goes from the start of the menu/dialog to the end - key navigation in tabs
…p arround keyboard navigation quasarframework#5266, quasarframework#4068, quasarframework#6736, quasarframework#6562, quasarframework#6560, quasarframework#12464, quasarframework#12506, quasarframework#12505 - allow unique TAB target point in a group - allow key navigation in group - improve initial focusing on QMenu and QDialog - tab goes from the end of the menu/dialog to the start - shift+tab goes from the start of the menu/dialog to the end - key navigation in tabs
…p arround keyboard navigation quasarframework#5266, quasarframework#4068, quasarframework#6736, quasarframework#6562, quasarframework#6560, quasarframework#12464, quasarframework#12506, quasarframework#12505 - allow unique TAB target point in a group - allow key navigation in group - improve initial focusing on QMenu and QDialog - tab goes from the end of the menu/dialog to the start - shift+tab goes from the start of the menu/dialog to the end - key navigation in tabs
…p arround keyboard navigation quasarframework#5266, quasarframework#4068, quasarframework#6736, quasarframework#6562, quasarframework#6560, quasarframework#12464, quasarframework#12506, quasarframework#12505 - allow unique TAB target point in a group - allow key navigation in group - improve initial focusing on QMenu and QDialog - tab goes from the end of the menu/dialog to the start - shift+tab goes from the start of the menu/dialog to the end - key navigation in tabs
…p arround keyboard navigation quasarframework#5266, quasarframework#4068, quasarframework#6736, quasarframework#6562, quasarframework#6560, quasarframework#12464, quasarframework#12506, quasarframework#12505 - allow unique TAB target point in a group - allow key navigation in group - improve initial focusing on QMenu and QDialog - tab goes from the end of the menu/dialog to the start - shift+tab goes from the start of the menu/dialog to the end - key navigation in tabs
…p arround keyboard navigation quasarframework#5266, quasarframework#4068, quasarframework#6736, quasarframework#6562, quasarframework#6560, quasarframework#12464, quasarframework#12506, quasarframework#12505 - allow unique TAB target point in a group - allow key navigation in group - improve initial focusing on QMenu and QDialog - tab goes from the end of the menu/dialog to the start - shift+tab goes from the start of the menu/dialog to the end - key navigation in tabs
…p arround keyboard navigation quasarframework#5266, quasarframework#4068, quasarframework#6736, quasarframework#6562, quasarframework#6560, quasarframework#12464, quasarframework#12506, quasarframework#12505 - allow unique TAB target point in a group - allow key navigation in group - improve initial focusing on QMenu and QDialog - tab goes from the end of the menu/dialog to the start - shift+tab goes from the start of the menu/dialog to the end - key navigation in tabs
…p arround keyboard navigation quasarframework#5266, quasarframework#4068, quasarframework#6736, quasarframework#6562, quasarframework#6560, quasarframework#12464, quasarframework#12506, quasarframework#12505 - allow unique TAB target point in a group - allow key navigation in group - improve initial focusing on QMenu and QDialog - tab goes from the end of the menu/dialog to the start - shift+tab goes from the start of the menu/dialog to the end - key navigation in tabs
…p arround keyboard navigation quasarframework#5266, quasarframework#4068, quasarframework#6736, quasarframework#6562, quasarframework#6560, quasarframework#12464, quasarframework#12506, quasarframework#12505 - allow unique TAB target point in a group - allow key navigation in group - improve initial focusing on QMenu and QDialog - tab goes from the end of the menu/dialog to the start - shift+tab goes from the start of the menu/dialog to the end - key navigation in tabs
…p arround keyboard navigation quasarframework#5266, quasarframework#4068, quasarframework#6736, quasarframework#6562, quasarframework#6560, quasarframework#12464, quasarframework#12506, quasarframework#12505 - allow unique TAB target point in a group - allow key navigation in group - improve initial focusing on QMenu and QDialog - tab goes from the end of the menu/dialog to the start - shift+tab goes from the start of the menu/dialog to the end - key navigation in tabs
…p arround keyboard navigation quasarframework#5266, quasarframework#4068, quasarframework#6736, quasarframework#6562, quasarframework#6560, quasarframework#12464, quasarframework#12506, quasarframework#12505 - allow unique TAB target point in a group - allow key navigation in group - improve initial focusing on QMenu and QDialog - tab goes from the end of the menu/dialog to the start - shift+tab goes from the start of the menu/dialog to the end - key navigation in tabs
…p arround keyboard navigation quasarframework#5266, quasarframework#4068, quasarframework#6736, quasarframework#6562, quasarframework#6560, quasarframework#12464, quasarframework#12506, quasarframework#12505 - allow unique TAB target point in a group - allow key navigation in group - improve initial focusing on QMenu and QDialog - tab goes from the end of the menu/dialog to the start - shift+tab goes from the start of the menu/dialog to the end - key navigation in tabs
Is your feature request related to a problem? Please describe.
The q-date component date picker is not friendly to navigating with a keyboard nor with a screen-reader.
Describe the solution you'd like
Something like the demo in this page: https://www.24a11y.com/2018/a-new-day-making-a-better-calendar/
Arrow keys work to navigate between the elements and between the dates in the calendar
ARIA standards and best practices for roles and labels are followed so that the calendar "sounds human" when read by a screen reader. For example:
instead of only reading out the number when a date is selected, read out the whole date.
aria label for next month button if current selected month is December 2018: "Next month, January 2019"
aria label for next year button if current selected year is 2018: "Previous year, 2017"
A slot, a prop or something similar for a close button when the calendar is used in conjunction with q-popup-proxy so that the close button looks like a natural part of the calendar (nice but least important)
Describe alternatives you've considered
Not sure what alternatives other than build my own or find another date picker component.
The close button can be implemented as part of the q-popup-proxy slot but it takes up unnecessary space and looks out of place.
The text was updated successfully, but these errors were encountered: