react-calendar is not 100% accessible via keyboard

[CollinHunterGOC]

Disclaimer

Yes

Sample

https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-calendar

Contributor(s)

@Abderahman88 @Eli-Schei @HugoBernier @joaojmendes @derhallim @mohammadamer @nanddeepn

What happened?

When using a keyboard to navigate using the Tab key, the focus never lands on the actual event to see the details or to create a new event on a particular day.

Steps to reproduce

1. Upload solution to Site
2. Add web part to page
3. Using keyboard, click the Tab button and try to tab to a date on the calendar.

Expected behavior

After tabbing to a date, I expect the tab control to stop on existing events within a date or be able to add new events. When focused on a particular event, by clicking the enter button on the keyboard should open the details of the existing event or new event.

Target SharePoint environment

SharePoint Online

Developer environment

Windows

Browsers

• [ ] Internet Explorer
• [X] Microsoft Edge
• [X] Google Chrome
• [ ] FireFox
• [ ] Safari
• [ ] mobile (iOS/iPadOS)
• [ ] mobile (Android)
• [ ] not applicable
• [ ] other (enter in the "Additional environment details" area below)

What version of Node.js is currently installed on your workstation?

12.22.12

What version of Node.js is required by the sample?

v10 / v12 / v14

Paste the results of SPFx doctor

CLI for Microsoft 365 SharePoint Framework doctor Verifying configuration of your system for working with the SharePoint Framework

√ SharePoint Framework v1.12.1 √ Node v12.22.12 √ yo v4.2.0 √ gulp v4.0.2 √ react v16.9.0 √ bundled typescript used

Additional environment details

No response