[4.0] Date picker is not accessible for keyboard user

[zwiastunsw]

Steps to reproduce the issue

1. Go to Joomla Backend
2. 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

[dgrammatiko]

I think @C-Lodder is working on this

[hardik-codes]

May I assist you in this @C-Lodder if you are working on it ?

[C-Lodder]

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

[C-Lodder]

@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

[brianteeman]

There are several examples of fully accessible datepickers here https://www.webaxe.org/accessible-date-pickers/

[brianteeman]

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?

[dgrammatiko]

@brianteeman AFAIK Joomla using a date-time picker not a date-picker so your suggestions are not fit

[brianteeman]

The only solution I can find is to separate the date and time

[zwiastunsw]

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.

Maybe this will help

[C-Lodder]

@zwiastunsw Shame FF and Safari don't support this: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/datetime-local

[zwiastunsw]

@C-Lodder : I know Safari does not yet support these controls as expected, but it will display text fields. So accessibility will also be provided.

[brianteeman]

As far as I am aware the native html date and datetime pickers do not support non-gregorian calendars

[zwiastunsw]

I don't know that. I'm sorry.

[coolcat-creations]

This is still an issue in J5