Vriosrada/captions focus contrast (#6025)

* Fixing contrast on focus captions

* Adding changelog

* 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

* Update packages/react-composites CallComposite browser test snapshots

---------

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

Author: vriosrada-msft

change/@azure-communication-react-30471df7-194c-4b91-b1c5-28ff4ef15b76.json

@@ -0,0 +1,9 @@
+{
+  "type": "patch",
+  "area": "fix",
+  "workstream": "A11y",
+  "comment": "Fixing contrast on focus captions",
+  "packageName": "@azure/communication-react",
+  "email": "vriosrada@microsoft.com",
+  "dependentChangeType": "patch"
+}

packages/react-components/src/components/styles/Captions.style.ts

@@ -186,7 +186,12 @@ export const captionsBannerFullHeightClassName = (theme: ITheme): string => {
 export const loadingBannerStyles = (formFactor: 'default' | 'compact'): IStackStyles => {
   return {
     root: {
-      height: formFactor === 'compact' ? '4.5rem' : '8.75rem'
+      height: formFactor === 'compact' ? '4.5rem' : '8.75rem',
+      selectors: {
+        ':focus-visible': {
+          outlineColor: 'Highlight'
+        }
+      }
     }
   };
 };
@@ -201,7 +206,12 @@ export const loadingBannerFullHeightStyles = (theme: ITheme): IStackStyles => {
       width: '100%',
       position: 'absolute',
       left: 0,
-      backgroundColor: theme.palette.white
+      backgroundColor: theme.palette.white,
+      selectors: {
+        ':focus-visible': {
+          outlineColor: 'Highlight'
+        }
+      }
     }
   };
 };
@@ -211,7 +221,12 @@ export const loadingBannerFullHeightStyles = (theme: ITheme): IStackStyles => {
  */
 export const captionsContentContainerClassName = mergeStyles({
   width: '100%',
-  paddingInlineEnd: _pxToRem(4)
+  paddingInlineEnd: _pxToRem(4),
+  selectors: {
+    ':focus-visible': {
+      outlineColor: 'Highlight'
+    }
+  }
 });
 
 /**