Calender control of the Date form field is not accessible through keyboard

[ManishaC1]

Githubs Tags: #A11ySev2; #DesktopWeb; #A11yMAS; #A11yTCS; #Win11; #WCAG2.1.1; #FTP; #ChromiumEdge;

"Please do not close this bug. This bug should only be closed by TCS, C+AI Accessibility after verification of the bug".

Environment Details:

Application Name: Fluent UI Blazor
Page URL: https://fluentui-blazor.net/DateTime#defaulttimepicker
Chromium Edge Version 128.0.2739.79 (Official build) (64-bit)

Repro Steps:

1. Launch #URL: https://fluentui-blazor.net/DateTime#defaulttimepicker
2. Tab to "Days view" Date form field.
3. Observe that the calendar control associated with the form field is not accessible through Keyboard.

Actual Result:

The calendar control in the “days view” doesn’t work with keyboard keys like Enter or Spacebar. It only opens when you click it with a mouse.

Expected Results:

The Calendar control associated with the Date form field must be accessible through Keyboard keys.

User Impact:

Keyboard users are impacted due to the inability to activate the calendar control via keyboard keys.

WCAG Reference:

https://www.w3.org/WAI/WCAG21/Understanding/keyboard.html

Attachments:

[dvoituron]

Indeed, this component is not compatible with accessibility features, as explained in the documentation.

We will work on it.

[dvoituron]

I pushed this PR #2688.

The user can navigate, using keyboard (Tab and Enter), into the Calendar or DatePicker components.
But not yet using the arrows to navigate from day to day (or month to month).

[dvoituron]

@ManishaC1 Can you confirm that this is an acceptable first solution? We'll create another update later to add navigation arrows.

[ManishaC1]

@dvoituron Yes, this looks fine. Please let us know once the fix made public

[dvoituron]

@dvoituron Yes, this looks fine. Please let us know once the fix made public

Sure. But you can already try the Preview version using these instructions: https://github.com/microsoft/fluentui-blazor/blob/dev/docs/using-latest-daily.md

Or you can try on the Preview Site: https://preview.fluentui-blazor.net/DateTime

[ManishaC1]

Issue is fixed
#Closed;
https://preview.fluentui-blazor.net/DateTime