[A11y bugfix] EndCall button high contrast appearence (#3905)

* update end call css per A11y

* Change files

* Duplicate change files for beta release

* adjust css for Configuration title to also respect the a11y colors

* Update packages/react-composites CallWithChatComposite browser test snapshots

* Update packages/react-composites CallWithChatComposite browser test snapshots

* Update packages/react-composites CallComposite browser test snapshots

* Update packages/react-composites CallComposite browser test snapshots

---------

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

Author: dmceachernmsft

change-beta/@azure-communication-react-f80c75bf-fb46-47c0-a858-9f998796ceec.json

@@ -0,0 +1,9 @@
+{
+  "type": "patch",
+  "area": "fix",
+  "workstream": "A11y",
+  "comment": "Update EndCall button appearence to match high contrast expectations on windows",
+  "packageName": "@azure/communication-react",
+  "email": "94866715+dmceachernmsft@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

change/@azure-communication-react-f80c75bf-fb46-47c0-a858-9f998796ceec.json

@@ -0,0 +1,9 @@
+{
+  "type": "patch",
+  "area": "fix",
+  "workstream": "A11y",
+  "comment": "Update EndCall button appearence to match high contrast expectations on windows",
+  "packageName": "@azure/communication-react",
+  "email": "94866715+dmceachernmsft@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

packages/react-components/src/components/EndCallButton.tsx

@@ -80,22 +80,23 @@ const darkThemeCallButtonStyles = {
     color: darkTheme.callingPalette.iconWhite,
     background: darkTheme.callingPalette.callRed,
     '@media (forced-colors: active)': {
-      forcedColorAdjust: 'none'
+      forcedColorAdjust: 'auto',
+      border: `1px ${lightTheme.palette?.neutralQuaternaryAlt} solid`
     },
     ':focus::after': { outlineColor: `${darkTheme.callingPalette.iconWhite} !important` } // added !important to avoid override by FluentUI button styles
   },
   rootHovered: {
     color: darkTheme.callingPalette.iconWhite,
     background: darkTheme.callingPalette.callRed,
     '@media (forced-colors: active)': {
-      forcedColorAdjust: 'none'
+      forcedColorAdjust: 'auto'
     }
   },
   rootPressed: {
     color: darkTheme.callingPalette.iconWhite,
     background: darkTheme.callingPalette.callRed,
     '@media (forced-colors: active)': {
-      forcedColorAdjust: 'none'
+      forcedColorAdjust: 'auto'
     }
   },
   label: {
@@ -108,22 +109,23 @@ const lightThemeCallButtonStyles = {
     color: lightTheme.callingPalette.iconWhite,
     background: lightTheme.callingPalette.callRed,
     '@media (forced-colors: active)': {
-      forcedColorAdjust: 'none'
+      forcedColorAdjust: 'auto',
+      border: `1px ${lightTheme.palette?.neutralQuaternaryAlt} solid`
     },
     ':focus::after': { outlineColor: `${lightTheme.callingPalette.iconWhite} !important` } // added !important to avoid override by FluentUI button styles
   },
   rootHovered: {
     color: lightTheme.callingPalette.iconWhite,
     background: lightTheme.callingPalette.callRed,
     '@media (forced-colors: active)': {
-      forcedColorAdjust: 'none'
+      forcedColorAdjust: 'auto'
     }
   },
   rootPressed: {
     color: lightTheme.callingPalette.iconWhite,
     background: lightTheme.callingPalette.callRed,
     '@media (forced-colors: active)': {
-      forcedColorAdjust: 'none'
+      forcedColorAdjust: 'auto'
     }
   },
   label: {

packages/react-composites/src/composites/CallComposite/styles/CallConfiguration.styles.ts

@@ -158,6 +158,12 @@ const configurationPageTextDecoration = (theme: ITheme): IStyle => {
     strokeWidth: _pxToRem(1.5),
     text: {
       letterSpacing: '-0.02rem' // cope with extra width due to stroke width
+    },
+    '@media (forced-colors: active)': {
+      forcedColorAdjust: 'auto',
+      fill: theme.palette.neutralQuaternaryAlt,
+      textShadow: 'none',
+      stroke: 'none'
     }
   };
 };