[bugfix][a11y] participantitem icon color contrast requirement (#4640)

* Change icon colors for accessibility contrast requirements

* Change files

* Update packages/react-composites CallWithChatComposite browser test snapshots

* Update packages/react-composites CallWithChatComposite 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: edwardlee-msft

change-beta/@azure-communication-react-d3f22ec7-457c-4d53-906a-35d71b5aedc8.json

@@ -0,0 +1,9 @@
+{
+  "type": "patch",
+  "area": "fix",
+  "workstream": "Accessibility",
+  "comment": "Change icon colors for accessibility contrast requirements",
+  "packageName": "@azure/communication-react",
+  "email": "edwardlee@microsoft.com",
+  "dependentChangeType": "patch"
+}

change/@azure-communication-react-d3f22ec7-457c-4d53-906a-35d71b5aedc8.json

@@ -0,0 +1,9 @@
+{
+  "type": "patch",
+  "area": "fix",
+  "workstream": "Accessibility",
+  "comment": "Change icon colors for accessibility contrast requirements",
+  "packageName": "@azure/communication-react",
+  "email": "edwardlee@microsoft.com",
+  "dependentChangeType": "patch"
+}

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

@@ -207,10 +207,10 @@ export const ParticipantItem = (props: ParticipantItemProps): JSX.Element => {
     () =>
       mergeStyles(
         iconContainerStyle,
-        { color: theme.palette.neutralTertiary, marginLeft: 'auto' },
+        { color: theme.palette.neutralSecondary, marginLeft: 'auto' },
         styles?.iconContainer
       ),
-    [theme.palette.neutralTertiary, styles?.iconContainer]
+    [theme.palette.neutralSecondary, styles?.iconContainer]
   );
 
   const onDismissMenu = (): void => {