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?
None
Reproduction
https://codesandbox.io/s/34dthr?file=/example.tsx
Bug Description
Repro steps:
- Change Windows HC mode into "aquatic" or "desert"
- open example with default tooltip
https://codesandbox.io/s/34dthr?file=/example.tsx
- Navigate with keyboard on the button
- Observe focus outline
Actual Behavior
there is focus outline around the button, but outline is thin and is hardly visible when user need to see clearly focus on the screen.
Please compare the default tooltip example outline with with other example. Please see screenshots below. This one is thicker.
I see the same issue with thin focus outline as well in following examples:
https://react.fluentui.dev/?path=/docs/components-tooltip--default#appearance--inverted
https://react.fluentui.dev/?path=/docs/components-tooltip--default#with-arrow
https://react.fluentui.dev/?path=/docs/components-tooltip--default#styled
https://react.fluentui.dev/?path=/docs/components-tooltip--default#custom-mount
https://react.fluentui.dev/?path=/docs/components-tooltip--default#positioning
Expected Behavior
default tooltip example outline is such thick as it is for others tooltip examples, please see enclosed screenshots and codesandbox
Default tooltip with button:


Others tooltip with button: https://codesandbox.io/s/u0vp8h?file=/example.tsx


Logs
No response
Requested priority
Normal
Products/sites affected
No response
Are you willing to submit a PR to fix?
no
Validations
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.1Are you reporting Accessibility issue?
None
Reproduction
https://codesandbox.io/s/34dthr?file=/example.tsx
Bug Description
Repro steps:
https://codesandbox.io/s/34dthr?file=/example.tsx
Actual Behavior
there is focus outline around the button, but outline is thin and is hardly visible when user need to see clearly focus on the screen.
Please compare the default tooltip example outline with with other example. Please see screenshots below. This one is thicker.
I see the same issue with thin focus outline as well in following examples:
https://react.fluentui.dev/?path=/docs/components-tooltip--default#appearance--inverted
https://react.fluentui.dev/?path=/docs/components-tooltip--default#with-arrow
https://react.fluentui.dev/?path=/docs/components-tooltip--default#styled
https://react.fluentui.dev/?path=/docs/components-tooltip--default#custom-mount
https://react.fluentui.dev/?path=/docs/components-tooltip--default#positioning
Expected Behavior
default tooltip example outline is such thick as it is for others tooltip examples, please see enclosed screenshots and codesandbox
Default tooltip with button:


Others tooltip with button: https://codesandbox.io/s/u0vp8h?file=/example.tsx


Logs
No response
Requested priority
Normal
Products/sites affected
No response
Are you willing to submit a PR to fix?
no
Validations