Carousel: High contrast Windows (#33411)

Author: Mitch-At-Work

change/@fluentui-react-carousel-d45f8c82-f098-4820-9e34-31862a08f3d3.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: Ensure a viable background color for nav items in high contrast windows",
+  "packageName": "@fluentui/react-carousel",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

packages/react-components/react-carousel/library/src/components/CarouselNavButton/useCarouselNavButtonStyles.styles.ts

@@ -31,6 +31,12 @@ const useStyles = makeStyles({
       width: tokens.spacingHorizontalS,
       backgroundColor: tokens.colorNeutralForeground1,
       color: tokens.colorNeutralForeground1,
+      '@media (forced-colors: active)': {
+        // Bypass OS high contrast with inverted blend mode (otherwise icon is invisible)
+        forcedColorAdjust: 'none',
+        backgroundColor: 'white',
+        mixBlendMode: 'difference',
+      },
     },
   },
   rootUnselected: {