Datetime widget a11y

[Wagner3UB]

Improved accessibility for the ‘Datetime-Widget’ component by adding an ‘aria-label’ and a translation for the ‘screenReaderInputMessage’.

PR Volto 17: #6793

[netlify]

✅ Deploy Preview for plone-components canceled.

Name	Link
🔨 Latest commit	79ffd95
🔍 Latest deploy log	https://app.netlify.com/sites/plone-components/deploys/67c70ddc6af1c40008862167

[stevepiercy]

A syntax change on the changelog, and a question about the message.

[stevepiercy]

I don't understand. How do I "navigate forward"? Is that a mouse click, tap, or keyboard shortcut?

[Wagner3UB]

Hey @stevepiercy , I did not change the phrase, I just placed it inside our code to translate it into other languages. This message is read when we enter the date picker.

I can’t tell you what the logic behind it, it comes from the react-dates library: https://github.com/react-dates/react-dates/blob/master/src/defaultPhrases.js

[stevepiercy]

Is this the library we're using for a date picker? Sorry, I don't know.

See this line and its key.

https://github.com/react-dates/react-dates/blob/b7bad38dcff024d374ee98f972b55b3de9e61289/src/defaultPhrases.js#L26C7-L26C44

const keyboardForwardNavigationInstructions = 'Navigate forward to interact with the calendar and select a date. Press the question mark key to get the keyboard shortcuts for changing dates.';

We also have existing messages for what appears to be the same thing.

It has a backward counterpart in the next line.

Move backward to switch to the previous month.

I assume that navigation messages should be more descriptive and only for the icon. If so, then I'd use something like the following messages.

• back: Tap or left arrow key to navigate backward in the calendar. On a selected date, tap or enter or return key to pick it.
• forward: Tap or right arrow key to navigate forward in the calendar. On a selected date, tap or enter or return key to pick it.
• info: Tap or question mark key to reveal keyboard shortcuts. Tap the close or "X" icon or the esc key to hide keyboard shortcuts.

I'm not sure whether we've adopted "tap", "press", or "click" for that gesture to satisfy both desktop and mobile UIs. Another thing for the accessibility guide! I'm also not sure whether we do anything to the names of keys to make them more accessible, such as in MyST I would do the following.

{kbd}`Return`

[davisagli]

Also needs an update to the unit test snapshots