Fix troubleshooting links color in high contrast modes (#5386)

* Fix troubleshooting links color in high contrast modes

* Change files

* Fix camel case

change-beta/@azure-communication-react-95873f0b-31ec-408f-b19c-ad41f3054ef3.json

@@ -0,0 +1,9 @@
+{
+  "type": "patch",
+  "area": "fix",
+  "workstream": "",
+  "comment": "Fix troubleshooting links color in high contrast modes",
+  "packageName": "@azure/communication-react",
+  "email": "2684369+JamesBurnside@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

change/@azure-communication-react-95873f0b-31ec-408f-b19c-ad41f3054ef3.json

@@ -0,0 +1,9 @@
+{
+  "type": "patch",
+  "area": "fix",
+  "workstream": "",
+  "comment": "Fix troubleshooting links color in high contrast modes",
+  "packageName": "@azure/communication-react",
+  "email": "2684369+JamesBurnside@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

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

@@ -14,6 +14,7 @@ import {
   messageBarIconProps,
   messageBarType
 } from './utils';
+import { messageBarLinkStyles } from './styles/MessageBarLink.styles';
 
 /**
  * Strings for {@link _TroubleshootingGuideErrorBar}.
@@ -118,9 +119,8 @@ export const _TroubleshootingGuideErrorBar = (props: _TroubleshootingGuideErrorB
                 onClick={() => {
                   onPermissionsTroubleshootingClick(permissionsState);
                 }}
-                underline
               >
-                <span style={{ color: theme.palette.themeDarkAlt }}>
+                <span className={messageBarLinkStyles(theme, true)}>
                   {troubleshootingGuideStrings.devicePermissionLinkText}
                 </span>
               </Link>
@@ -133,7 +133,7 @@ export const _TroubleshootingGuideErrorBar = (props: _TroubleshootingGuideErrorB
             {strings[error.type]}{' '}
             {onNetworkingTroubleshootingClick && (
               <Link onClick={onNetworkingTroubleshootingClick} underline>
-                <span style={{ color: theme.palette.themeDarkAlt }}>
+                <span className={messageBarLinkStyles(theme, true)}>
                   {troubleshootingGuideStrings.networkTroubleshootingLinkText}
                 </span>
               </Link>

packages/react-components/src/components/styles/MessageBarLink.styles.ts

@@ -0,0 +1,23 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+import { ITheme, mergeStyles } from '@fluentui/react';
+
+/**
+ * Message Bar incorrectly applies dark theme and high contrast theme styles to links that have no hrefs.
+ * This is a workaround to ensure that the link color is correct.
+ *
+ * More info: https://github.com/microsoft/fluentui/issues/14683
+ *
+ * @private
+ */
+export const messageBarLinkStyles = (theme: ITheme, underline?: boolean): string =>
+  mergeStyles({
+    textDecoration: underline ? 'underline' : 'none',
+    color: theme.palette.themeDarkAlt,
+    textDecorationColor: theme.palette.themeDarkAlt,
+    '@media (forced-colors: active)': {
+      color: 'LinkText',
+      textDecorationColor: 'LinkText'
+    }
+  });