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
• Microsoft Edge
• 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

[CollinHunterGOC]

We were able to implement a workaround by adding an event wrapper to the calendar's components. It probably wasn't the most sophisticated solution, but the event wrapper just places a div tag around the event or day so that we could target a bootstrap popover to show the Event details when tabbing to it, and then when clicked upon, would toggle the New/Edit Event form. Also we had to hide/remove the location map as it was interfering with the Save and Cancel buttons of the New/Edit Event form.