fix(Tablist): subtle-circular appearance variant shows selected tab in high contrast (#34294)

Author: smhigley

change/@fluentui-react-tabs-74f15f82-3c33-4e73-8abe-9ef2d9c3d35c.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: filled-circular appearance variant shows selected tab in high contrast",
+  "packageName": "@fluentui/react-tabs",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

packages/react-components/react-tabs/library/src/components/Tab/useTabStyles.styles.ts

@@ -217,6 +217,9 @@ const useCircularAppearanceStyles = makeStyles({
       border: `solid ${tokens.strokeWidthThin} ${tokens.colorCompoundBrandStrokePressed}`,
       color: tokens.colorBrandForeground2Pressed,
     },
+    '@media (forced-colors: active)': {
+      border: `solid ${tokens.strokeWidthThin} Highlight`,
+    },
   },
   subtleDisabled: {
     backgroundColor: tokens.colorSubtleBackground,

packages/react-components/react-tabs/stories/src/Tabs/TabListAppearance.stories.tsx

@@ -30,16 +30,16 @@ export const Appearance = () => {
 
   return (
     <div className={styles.root}>
-      <TabList defaultSelectedValue="tab2" appearance="transparent">
+      <TabList defaultSelectedValue="tab3" appearance="transparent">
         {renderTabs()}
       </TabList>
-      <TabList defaultSelectedValue="tab2" appearance="subtle">
+      <TabList defaultSelectedValue="tab3" appearance="subtle">
         {renderTabs()}
       </TabList>
-      <TabList defaultSelectedValue="tab2" appearance="subtle-circular">
+      <TabList defaultSelectedValue="tab3" appearance="subtle-circular">
         {renderTabs()}
       </TabList>
-      <TabList defaultSelectedValue="tab2" appearance="filled-circular">
+      <TabList defaultSelectedValue="tab3" appearance="filled-circular">
         {renderTabs()}
       </TabList>
     </div>