Skip to content

Accessibility: Focus is trapped inside the Calendar #411

Description

@danalt06

Describe the bug

When the PrimeReact Calendar/DatePicker popup is open, keyboard users should still be able to move out of the date picker using Tab.
Currently, focus navigation within the Calendar can effectively lock the user inside the component.

Reproducible on the primereact documentation page: https://v9.primereact.org/calendar/

Reproducer

No response

System Information

"primereact": "^10.9.7",
"react": "^18.2.0",

Steps to reproduce the behavior

  1. Open the Calendar using the keyboard.
  2. Navigate through the Calendar controls and dates.
  3. Press Tab after reaching the rightmost/last focusable element in the date picker header.
  4. Alternatively, place focus on the selected date and press Tab.
  5. Observe the focus behavior.

Expected behavior

Keyboard navigation between dates can continue to use the Arrow keys.
Pressing Tab after the last focusable element in the Calendar header should move focus to the next focusable element outside the Calendar.
Pressing Tab while focus is on the selected/focused date should also allow the user to continue to the next appropriate focusable element outside the date picker context.
The Calendar should not create an unintended keyboard focus trap.

Metadata

Metadata

Assignees

No one assigned

    Labels

    Status: Needs TriageIssue or PR need investigating and labeling

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions