Screen Readers not announcing properly selectable items

[khargs]

Hello! First time posting here, sorry if this has been mentioned before (I couldn't find any issue/discussion related :P )

As the title says, I've been doing some accessibility tests with the library (awesome work, btw!) and I spotted some issues that I would like to discuss and see if it's something that can be looked into.

I used the example calendars provided in the site and a couple of screen readers: VoiceOver and NVDA. I've also tested the behaviours in Firefox and Chrome. This is what I found:

VoiceOver:
never announces anything besides the date (not sure this has anything to do with the library, to be honest).

NVDA:

• library v7.4.10 (no longer supported)
  • Firefox: announces only unselected days
  • Chrome: with only 1 item selected, only announces unselected ones (after the 2nd selected, announces both selected and unselected)
• library v8.7.1
  • Firefox: after selecting 1 day, announces everything as selected
  • Chrome: with 0-1 items selected, doesn’t announce anything besides the date.  after the user has selected 2 or more, then starts announcing only selected ones.
• library v8.9.0
  • Firefox: after selecting 1 day, announces everything as selected
  • Chrome: announces the action of selecting but not unselecting. with 0-1 items selected, doesn’t announce anything besides the date.  after the user has selected 2 or more, then starts announcing only selected ones.

I've also tried doing some experiments and it seems that these issues could be solved (or at least mitigated) with some minor changes:

• Not removing the attribute aria-selected when an element is not selected, and setting it to false instead:

  • aria-selected=undefined (default) is read as The element is not selectable https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-selected#values

  • All options that are not selected but are selectable have aria-selected set to false. Had we included options that were disabled or otherwise not selectable, we would have omitted the aria-selected attribute altogether. Including the attribute, even with no value or explicitly set to false indicates to assistive technology users that the item is selectable.

    https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-multiselectable#example

• adding the attribute aria-multiselectable="true" to the table when we have mode="multiple"

So that's what I've found, thanks for your attention!

[gpbl]

Hey @khargs yours are absolutely good points! Thanks for your effort investigating this, I think your proposed change makes sense.

Addressing some of these accessibility issues require a breaking change and are planned for the next major version.