[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.