Skip to content

Dropdown controls are not accessible with keyboard using tab or arrow keys in windows. #2764

@msftedad

Description

@msftedad

Check that this is really a bug

  • I confirm

Reproduction link

https://jquense.github.io/react-big-calendar/examples/index.html?path=/docs/examples--example-6

Bug description

User Impact:
Keyboard and screen reader users will be unable to access or navigate the dropdown, preventing form completion and causing major accessibility barriers.

Observation:
On pressing Esc key to close the dropdown it is not getting closed.

Steps to Reproduce:

  1. Open URL: Examples - Show more via a popup ⋅ Storybook in latest edge browser.
  2. Press tab key to reach '+4 more' control and activate it using enter key.
  3. Dropdown will appear, now press tab key or arrow key to access the controls in dropdown.
  4. Verify using tab key or arrow keys whether dropdown controls are not accessible with keyboard using tab or arrow keys or not.

Expected Behavior

Dropdown controls should be accessible with keyboard using tab or arrow keys in windows. Keyboard focus should move to dropdown control instead of landing on '+2 more' control.

Actual Behavior

Dropdown controls are not accessible with keyboard using tab or arrow keys in windows. Keyboard focus is moving to next interactive control i.e.: +2 more control instead of landing on dropdown control.

Refer Attachment:

  1. Dropdown controls are not accessible with keyboard using tab or arrow keys in windows.png
  2. Dropdown controls are not accessible with keyboard using tab or arrow keys in windows.mp4

https://github.com/user-attachments/assets/ee3532b0-aa76-4c06-bab7-41b10ce335de
Image

react-big-calendar version

1.17.1

React version

18.3.1

Platform/Target and Browser Versions

OS: Windows 11 Enterprise Insider Preview Version 24H2(OS Build 26120.3281), Browsers: Edge Version 136.0.3240.76, Chrome Version 136.0.7103.114

Validations

  • Read the docs.
  • Check that there isn't already an issue that request the same feature to avoid creating a duplicate.
  • Make sure this is a react-big-calendar issue and not an implementation issue

Would you like to open a PR for this bug?

  • I'm willing to open a PR

Metadata

Metadata

Assignees

No one assigned

    Labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions