[Bug]: Selected tab is not very visible under high contrast and dessert mode

[phyyuel]

Component

TabList

Package version

9.6.2

React version

17.0.1

Environment

Edge chromium latest version

Current Behavior

When using subtle-circular/filled-circular appearance in high contrast aquatic or dessert theme, it is hard to differentiate what tab is selected in the tablist.

This is mostly due to having no background color for selected tab in these theme.

Expected Behavior

The selected tab should be visually obvious in high contrast or dessert mode.

Reproduction

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

Steps to reproduce

1. Navigate to the demo page: https://react.fluentui.dev/?path=/docs/components-searchbox--docs, select a tab in the demo
2. Switch computer theme via windows->settings->Accesscibility->Contrast theme. Select Contrast theme to either Aquatic or Dessert
3. View the demo page and see the selected tab

Are you reporting an Accessibility issue?

Yes

Suggested severity

High - No workaround

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.

[sopranopillow]

Makes sense, I think adding the background to match the regular look would help ensure it's understandable. I checked the spec for the circular and it seems like the expectations for HCM were not added, we should double check with a designer before doing this.

[phyyuel]

@sopranopillow Is there a way to track the progress? This is critical to our product's A11y review

[sopranopillow]

I've assigned it to the team in charge of v9 (cxe-prg) who will triage accordingly, all updates will happen here. If you would like, you could file this issue in here as well: https://dev.azure.com/microsoftdesign/fluent-ui/_wiki/wikis/fluent-ui.wiki/193/Partner-A11y-Issue-Filing-Process (internal link in case you're in MS)

[phyyuel]

Thanks. Issue fired: https://dev.azure.com/microsoftdesign/fluent-ui/_workitems/edit/24802