microsoft
[Bug]: [Fluent UI] [Calendar] [keyboard Navigation]: Keyboard focus order is not logical while navigating using the tab key inside the 'Calendar'.
Component
DatePicker
Package version
latest
React version
19
Environment
est URL: https://react.fluentui.dev/?path=/docs/compat-components-datepicker--docs
OS: Windows 11
Version: 22H2 (OS Build 23451.1000)
Browser version: Version 136.0.3240.14 (Official build) beta (64-bit)
Current Behavior
Keyboard focus order is not logical while navigating using the tab key inside the 'Calendar'. Observation: When focusing on "Date:1" and pressing the tab key, the keyboard focus moves to the "2025" control. The focus order sequence is like: Date:1 --> 2025 --> Go to previous year 2024 --> Months (Jan, Feb, etc.) --> Go to today --> Go to previous month (Feb).
Expected Behavior
Keyboard focus order should be logical while navigating using the tab key inside the 'Calendar'.
Example: When the focus is on "Date:1" and the tab key is pressed, the keyboard focus should move to the "Go to previous month" button. The correct focus order should be: Date:1 --> Go to previous month --> Go to next month --> 2025 --> Go to previous year 2024 --> Months (Jan, Feb, etc.) --> Go to today.
Reproduction
Open URL https://react.fluentui.dev/?path=/docs/compat-components-datepicker--docs in the Edge browser. Navigate till select a date and activate calendar. Navigate to the "Set date range" button and select it. "Set date range" dialog appears, navigate to the "Start date" control and select it. When the focus is on the date (Ex: 1,2,3 etc.) invoke the tab key to navigate inside the calendar.
Steps to reproduce
- Open URL https://react.fluentui.dev/?path=/docs/compat-components-datepicker--docs in the Edge browser.
- Navigate till select a date and activate calendar.
- Navigate to the "Set date range" button and select it.
- "Set date range" dialog appears, navigate to the "Start date" control and select it.
- When the focus is on the date (Ex: 1,2,3 etc.) invoke the tab key to navigate inside the calendar.
Are you reporting an Accessibility issue?
yes
Suggested severity
Urgent - No workaround and Products/sites are affected
Products/sites affected
AI Foundry
Are you willing to submit a PR to fix?
no
Validations
- [x] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
- [x] The provided reproduction is a minimal reproducible example of the bug.
Internal bug: https://dev.azure.com/microsoftdesign/fluent-ui/_workitems/edit/30227
Hey @vinuthakaranth, I'm not sure if it's a bug because there's a right order of components while tabbing. It goes to the year instead of previous month because it's the next element. If you want to get to the previous month you need to do shift+tab
@ValentinaKozlova , thanks for your quick response. Started internal group chat with you and accessibility team to arrive at quicker decision.