Day of week should be announced to screen readers when navigating the calendar

Is your feature request related to a problem? Please describe. Currently the days of the week aren’t announced by a screen reader when navigating the calendar. The <table> structure is correct, so presumably this is due to the use of grid + gridcell roles. Whatever the cause, the result is that screen reader users don’t know what day of the week their currently-focused date is.

Describe the solution you’d like Simplest solution would be to append or prepend the day of the week to the hidden text in each button, i.e.:

<span class="duet-date__vhidden">Thursday, 2020-09-24</span>

This could be done with Date.toLocaleDateString() to support internationalization.

Describe alternatives you’ve considered The only alternative I can think of would be to drop the use of grid and just use a plain table, but this doesn’t seem like a good solution—it would mean sighted keyboard users would be forced to TAB through the calendar instead of using arrow keys.

Additional context Tested with JAWS, NVDA and MacOS Voiceover.

[aardrian]

A screen reader announces the content that the user agent provides. A browser (user agent) is a machine, but one that act on behalf of the person to parse code into human-readable content.

By machine-readable, I mean something that slurps things RDF data, such as a search engine, to use for structuring, sorting, filtering data that may or may not eventually be re-purposed and presented to users in raw or aggregate form.

[aardrian]

The items I list above are also why I asked #26 to not be closed. Column headers are a better way of exposing this information to screen reader users – barring testing with users telling you otherwise.