[#24019] - [4.0] Date picker is not accessible for keyboard user
- Discussion
- Medium
- Build: master
- # 24019
Steps to reproduce the issue
- Go to Joomla Backend
- Go to Content/Article/New or Edit / Publishing tab
- Use Tab key to move focus to calendar field
- Use Down arrow to open calendar dialog (not work, use tab to move fokus to calendar icon and use Spacebar to open calendar dialog)
- Use Down arrow to move focus to current date
- Use Left/Right/Down/Up arrows to select date
- Use Tab key or Shift + Tab key to move focus to Clear/Today/Close buttons or to select month/year (not works)
- Use Space/Enter key to place selected date into field
Expected result
You should perform all of the following operations
Actual result
You can only select a date. You cannot select the month, year, time selection options, buttons Clear/Today/Close.
Additional comments
See: Date Picker Example Using ARIA 1.1 Combobox as an example of accessible date picker
joomla-cms-bot
- | Labels |
Added:
?
|
||
When get some time again I will start on it again after a first failed attempt. The code isn't documented at all so I'm in 2 minds whether or not to try again or extend something that's already out there
@hardik-codes - If you're comfortable with JS and familiar with Custom Elements, feel free to take it on. It'll be fairly big task
franz-wohlkoenig
- | Status | New | ⇒ | Discussion |
| Category | ⇒ | Accessibility |
| Labels |
Added:
J4 Issue
|
||
| Title |
|
||||||
| Title |
|
||||||
| Labels |
Added:
?
|
||
| Category | Accessibility | ⇒ |
| Title |
|
||||||
| Title |
|
||||||
There are several examples of fully accessible datepickers here https://www.webaxe.org/accessible-date-pickers/
and there is an even better solution which is zero maintenance and fully accessible - however it only supports gregorian calendars. I assume @infograf768 that this would not be acceptable unless there was some way for it to fall back to a scripted version for non-gregorian calendars?
@brianteeman AFAIK Joomla using a date-time picker not a date-picker so your suggestions are not fit
The only solution I can find is to separate the date and time
Unfortunately, I also don't know a good solution for the date and time selector in one component. Creating a separate date and time selector seems to be a good idea.
HTML5 offers simple html controls for date and time selection (input type="date" and input type="time"). These have limitations, but are accessible and well supported by browsers.
It can also be assumed that if the user can enter the date and time in the text field, the accessibility requirements are met. However, you need to make sure that you have accurate information about the date and time format.
@zwiastunsw Shame FF and Safari don't support this: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/datetime-local
As far as I am aware the native html date and datetime pickers do not support non-gregorian calendars
I don't know that. I'm sorry.
chmst
- | Category | ⇒ | Accessibility |
Hackwar
- | Labels |
Added:
No Code Attached Yet
bug
Removed: ? |
||
This is still an issue in J5
I think @C-Lodder is working on this