[Bug]: Tree component is not built with High Contrast in mind.

[arolariu]

Component

Tree

Package version

9.55.0

React version

18.2.0

Environment

System:
    OS: Linux 6.5 Ubuntu 22.04.5 LTS 22.04.5 LTS (Jammy Jellyfish)
    CPU: (16) x64 AMD EPYC 7763 64-Core Processor
    Memory: 53.59 GB / 62.78 GB
    Container: Yes
    Shell: 5.1.16 - /bin/bash

Current Behavior

Hi,

Just a random question, feel free to redirect me if this has been asked before and/or this scenario is documented somewhere:

• Are the Tree and TreeItem components built with high contrast accessibility in mind?

I've searched in the docs and I cannot find any reference to how this component should behave in high contrast;
The problem that I am having is regarding the :hover visual appearance - in high contrast it feels broken / non-existent.

Example of the :hover state on a tree item (grabbed straight from the docs: https://react.fluentui.dev/?path=/docs/components-tree--docs#appearance):

Normal mode:

High Contrast mode:

As you can see (open in separate tab for better visibility) - there is a faint background-color css attribute that is applied for the tree items, on hover, in normal mode.
The same background-color is non-existent / non-visible in the high contrast mode.

I was able to workaround this by doing the following css hack:

element.style {
    "@media (forced-colors: active)": {
        background-color: "Highlight",
        forced-color-adjust: "none",
        color: "HighlightText",
      },
}

Output:

Expected Behavior

We're wondering what is the official statement from Fluent team on this component's appearance for high contrast displays - can you perhaps take a look and come up with an official response and/or solution, so that the Tree component behaves as expected, in both normal and high contrast modes?

Reproduction

https://react.fluentui.dev/?path=/docs/components-tree--docs#appearance

Steps to reproduce

1. Go to the Appearance tab in the Tree component docs.
2. Observe the :hover css styling being applied, when you hover over a tree item.
3. Change display to high contrast.
4. Observe the :hover css styling not making a visual difference to the tree item.

Are you reporting an Accessibility issue?

yes

Suggested severity

High - No workaround

Products/sites affected

people-app

Are you willing to submit a PR to fix?

yes

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.

[arolariu]

If you want more information on my use case, you can also reach out to me internally - aolariu.
I'm open to collaborate and/or even submit a fix+docs, given enough information on how-to.

[bsunderhus]

Thanks for the feedback @arolariu , you're right, the hovering style on forced high contrast mode is not present. I'll investigate and see what we can do about it 😁

Preferably it should have the same (or at least close enough to) the high contrast mode examples we have available when forcing the theme to be high contrast mode

Problem is how to ensure buttons added in the actions slot would also be styled properly, in your example here

How would that look like if it had actions with this treeitem?https://react.fluentui.dev/?path=/docs/components-tree--docs#actions

[arolariu]

@bsunderhus - yep, the story that you've given to me would look weird with just background: highlight css applied on the tree item:

(ignore the text background-color, forgot to apply)

The buttons should maybe have the negative color (to be in contrast with the tree item), to the tree item's background-color.

What do you say?

[arolariu]

Adding the following css properties to the tabster actions:

element.style {
color: canvasText;
backgroundcolor: Canvas;
force-color-adjust:none;
}

I get this output, which seems nice:

(first icon)

[bsunderhus]

It seems to me that once a TreeItem has an action(s) it stops being a input element (like a Button or a DropDown), which usually is styled with Highlight in HC and it becomes more of a surface element (like a DialogSurface, PopoverSurface or a Tooltip) which usually is styled with Canvas 🤔. As the slot actions children content is a blackbox it's impossible to tell whether a TreeItem is just an input or a surface one.

IMO the safest way to go about this is to use the surface style instead of the input style.

[arolariu]

Hmm, so in layman terms, what do you suggest is/should be the official response to the question in regards to how to use the TreeItem component in HC scenarios?