Library

React Components / v9 (@fluentui/react-components)

System Info

System:
    OS: Windows 10 10.0.22621
    CPU: (12) x64 Intel(R) Xeon(R) E-2176M  CPU @ 2.70GHz
    Memory: 17.39 GB / 31.74 GB
  Browsers:
    Edge: Spartan (44.22621.963.0), Chromium (108.0.1462.54)
    Internet Explorer: 11.0.22621.1

Are you reporting Accessibility issue?

no

Reproduction

https://codesandbox.io/s/cg6rim?file=/example.tsx

Bug Description

1. Change Windows HC mode into "aquatic" or "desert"
2. Open example with primary button
   https://codesandbox.io/s/cg6rim?file=/example.tsx
3. Navigate with keyboard on the primary button
4. Observe focus outline

Actual: there is focus outline around the primary button, but outline is thin and is hardly visible when user need to see clearly focus on the screen.
Please compare the primary button outline with no-primary button outline. This one is thicker.

Expected: primary focus outline is such thick as it is for no-primary button

Primary focus outline:

No-primary button focus outline:

Logs

No response

Requested priority

Normal

Products/sites affected

No response

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.