[BUG][Accessibility]: Date Picker Component

[lewisdorigo]

Description of the issue

After an accessibility audit on the Social Security Scotland Digital Portal, a few issues were raised with the Date Picker component supplied by the Design System.

Screen reader users aren't informed when the calendar is navigated.

When using the next/previous month and year buttons, user is not informed of the new month/year being displayed.

It was recommended that the .ds_datepicker__dialog__title element be given aria-live="polite".

aria-selected="true" is not supported on <button> elements

The currently selected month has the aria-selected="true" attribute, however this attribute is not actually supported on <button> elements. This means that screen reader users are not informed when they are on the currently selected date.

The WAI Date Picker Dialog uses a <table role="grid"> which additionally marks each <td> as being interact-able, and the <td> here supports aria-selected.

Alternatively aria-pressed may be more appropriate to use

Current date does not use aria-current

The current date is visually shown to clients, however this isn't highlighted to assistive technologies. This should have the aria-current="date" attribute, which would inform screen reader users that it is the current date.

[jsutcliffe]

Thank you Lewis. Fixes for these should go into the next DS release.

[jamiegaskell]

Just to add to this, aria-description may not be widely supported. According to https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-description, it's still in the W3C Editor's Draft for ARIA 1.3. Having said that, it appears to work with Jaws on Edge, Windows Narrator and TalkBack. That's all I've been able to test it on though.

[matthewford]

Just to add to this, I couldn't get keyboard navigation to work in Safari.

[jsutcliffe]

Hi @matthewford, can you be more specific? E.g. what keyboard interactions are failing, what version of Safari are you using?

[matthewford]

Hi @matthewford, can you be more specific? E.g. what keyboard interactions are failing, what version of Safari are you using?

I'm trying to open the calendar widget - which works in Chrome but doesn't work in Safari 17.6 (a college also reported it is not working on their Safari, which might have been a different version).

[jsutcliffe]

Ah, I see -- that's actually just default Safari behaviour. Tabbing in Safari does not tab through every interactive element as you might expect from other browsers, but only tabs through text fields and pop-up menus.

You can press option-tab to tab into other types of element, or you can set an option in Safari preferences to make the tab key behave similarly to how it works in other browsers (Preferences -> Advanced -> Press Tab to highlight each option on a web page).

Since that is something that is controlled by a user's preferences it is not appropriate for us to try to force that behaviour at all times.