[Bug]: [Fluent UI] [Calendar] [keyboard Navigation]: Keyboard focus order is not logical while navigating using the tab key inside the 'Calendar'.

[vinuthakaranth]

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

1. Open URL https://react.fluentui.dev/?path=/docs/compat-components-datepicker--docs in the Edge browser.
2. Navigate till select a date and activate calendar.
3. Navigate to the "Set date range" button and select it.
4. "Set date range" dialog appears, navigate to the "Start date" control and select it.
5. 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

• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• The provided reproduction is a minimal reproducible example of the bug.

Internal bug:
https://dev.azure.com/microsoftdesign/fluent-ui/_workitems/edit/30227

[ValentinaKozlova]

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

[vinuthakaranth]

@ValentinaKozlova , thanks for your quick response. Started internal group chat with you and accessibility team to arrive at quicker decision.

[ValentinaKozlova]

Closing this issue as it's been resolved