[BUG] [Calendar] Accessibility Issue - cannot select the event using the keyboard

[CollinHunterGOC]

Which PCF Component Calendar

What type of Power App are you using this PCF component in? Canvas App

Describe the bug You can tab between events within a given day, but cannot select the event using the keyboard. Also when tabbing to an event, its very hard to see the focus border color and the focus border thickness is too thin. It should have similar color and thickness like when you focus on a calendar day.

This is important for people with disabilities, and as a result is an accessibility issue.

To Reproduce Steps to reproduce the behavior:

1. Go to an Calendar view
2. Using the keyboard, hit the Tab key
3. Tabbing will cycle through the top navigation bar and then the days
4. The tab will work between events but when it reaches the event, nothing happens when you hit enter key or spacebar on the keyboard.

Expected behavior It is expected that when you tab to the event in the calendar using the keyboard that when hitting the Enter key or spacebar that it performs the action associated with the selected event.

Screenshots If applicable, add screenshots to help explain your problem.

Additional context Perhaps replacing the event title/label in the calendar with a button or a link would solve the issue. In addition, having a parameter or property to set the Focus Border Color on the event title/label would be beneficial.

<div class="rbc-event-content" title="Event Title">
   <button onclick="#">Event Title</button>
</div>
 **or**
<div class="rbc-event-content" title="Event Title">
    <a href="#">EventTitle</a>
 </div>

Example:

For more information about keyboard and accessibility please check out:

• https://legacy.reactjs.org/docs/accessibility.html
• https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Keyboard