Skip to content

[Bug]: HC mode >Tooltip > focus outline inconsistency > Button with tooltip has focus indicator hardly visible #26079

Description

@kolaps33

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:

  1. Change Windows HC mode into "aquatic" or "desert"
  2. open example with default tooltip
    https://codesandbox.io/s/34dthr?file=/example.tsx
  3. Navigate with keyboard on the button
  4. 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:
image
image

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

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.

Metadata

Metadata

Assignees

Type

No type

Fields

No fields configured for issues without a type.

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions