Visible Focus Indicator Not Appearing on "Drag files here/Browse" Element

[ManishaC1]

Githubs Tags: #A11ySev2; #DesktopWeb; #A11yMAS; #A11yTCS; #Win11; #WCAG2.4.7; #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://www.fluentui-blazor.net/InputFile
Chromium Edge Version 135.0.3179.73 (Official build) (64-bit)

Repro Steps:

1. Launch #URL: https://www.fluentui-blazor.net/InputFile
2. Tab to "Open Dialog" present in "Customized Dialog" and press enter to open.
3. Apply Text Spacing and Refresh.
4. Observe "Save" and "Cancel" button are not adapting to Text Spacing.

Actual Result:

When the keyboard focus is moved to the "Drag files here/Browse" element, there is no visible focus indicator.

Expected Results:

A visible focus indicator should appear on the "Drag files here/Browse" element when it receives keyboard focus, allowing users to easily identify the focused element.

User Impact:

Users who rely on keyboard navigation, including those with visual impairments, are unable to determine which element has focus, leading to a poor user experience and accessibility barriers.

WCAG Reference:

https://www.w3.org/WAI/WCAG21/Understanding/focus-visible.html

Attachments: