React-big-calendar: Calendar is not accessible

[sgraham3311]

I have found a few issues regarding accessibility with the calendar.

• Month date labels and headers are being read out by screen reader as links
  On the month view the date labels should not be anchor tags. Instead the entire cell for a day should have the attribute tabindex=0 allowing it to be navigated to by the tab key. Additionally arrow keys should be handled to navigate the cells on the calendar. Enter and space key events should be handled if calendar is selectable. On the week view the headers should not be wrapped in an anchor tag since they are not interactive.

• Unable to tab into time slots on week and day
  Time slots on day and week view need to be selectable by adding the attribute tabindex=0 and also handling the keypress event for enter or space key.

• No association between day, month, and year for screen reader
  Add title attribute to month day cells with full date as the value. Add title attribute or aria-label to each time slot on day and week view with full date as the value.

These are just a few issues I have found. I hope to create a pull request for this in the future but If anyone has time to address these issues now it would be greatly appreciated. Thanks

[jquense]

Yes, the calendar is woefully inaccessible and its a personal embarrassment that i haven't prioritized that. This began as (and is) an internal work project where we didn't need the a11y, but it's not reasonable that they are still not present.

I'd more than happily take any a11y related PRs!

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.