Accessibility

[NicolaiTurcan]

As I understand at the moment there is no way to use it only with the keyboard? It works on datepick but when choosing timepick it's impossible? it is also impossible to select the clear button or today's date with the keyboard?

[t1m0n]

Unfortunately no. If switch focus to timepicker inputs or buttons then target input element will loose its own focus and then keyboard navigation through calendar will be impossible, because events are binded to the target element. Another reason is that Air Datepicker closes when the target element loses its focus.

It could be achieved by simulating focus event on timepicker or buttons but its time-consuming task, and there should be convenient keyboard shortcuts so user can understand how to perform transition between calendar and timepicker as Tab button cannot be used.

Maybe I will take up this task in future, but I can't promise.

[skysarwer]

Hi @t1m0n , I'm jumping on this thread to ask a different question on accessibility. Do you know if the datepicker is compatible with screenreaders? Would changing the datepicker container to a table with

and elements for the cells improve that?

[t1m0n]

Hi @skysarwer, I did not test the datepicker in such way, there are no any aria tags and all markup is made of div so I guess it would be hard to use with screen readers. Maybe changing to table layout will improve accessibility I can't say for sure as I don't have enough experience in this field (

[amjad1233]

+1

[nicklee]

We used keyboardNav: true, and the inline version of the library, but found that submitting the form whilst using the keyboard didn't work in Chrome or Safari, only Firefox. We also found that it wasn't obvious to users when they were focused on the date picker.

With this in mind we adapted it so the datepicker has a focused class added to it when the hidden date input was focused. We also prevented enter from submitting the calendar, as this seems to be broken in airpicker in Firefox and Chrome, instead our keyboard users have to tab to the apply button to submit the form. FInally we removed the focussed class on focusout.

Whilst not perfect, this at least allows keyboard users the ability to use the setup. It would be great if it was more keyboard friendly out of the box.

        // Focus date picker
        this.hiddenDateInput.addEventListener('focus', () => {
            document.querySelector('.air-datepicker').classList.add('focused');
        });

        // Prevent enter submitting form in date field
        this.hiddenDateInput.addEventListener('keydown', (e) => {
            if (e.key === 'Enter') {
                e.preventDefault();
            }
        });

        // Remove faked focus state on focusout
        this.hiddenDateInput.addEventListener('focusout', () => {
            document
                .querySelector('.air-datepicker')
                .classList.remove('focused');
        });