fix: Left nav lacks clear tab or focus indicators with Windows HC modes

src/DetailsView/components/base-left-nav.scss

@@ -23,6 +23,11 @@
                 a,
                 button {
                     background-color: $nav-link-selected !important;
+
+                    @media (forced-colors: active) {
+                        forced-color-adjust: none;
+                        background-color: Highlight !important;
+                    }
                 }
             }
 
@@ -36,6 +41,10 @@
             a,
             button {
                 background-color: $nav-link-hover;
+
+                @media (forced-colors: active) {
+                    background-color: Highlight !important;
+                }
             }
         }
     }

src/DetailsView/components/left-nav/common-left-nav-link.scss

@@ -17,7 +17,19 @@
         color: $always-black;
     }
 
-    .link-icon {
-        font-size: 24px;
+    @media (forced-colors: active) {
+        :global(.is-selected) & {
+            forced-color-adjust: none;
+            color: HighlightText;
+        }
+
+        :global(.ms-Nav-compositeLink):hover & {
+            forced-color-adjust: none;
+            color: HighlightText !important;
+        }
+
+        .link-icon {
+            font-size: 24px;
+        }
     }
 }

src/DetailsView/components/left-nav/details-view-left-nav.scss

@@ -13,10 +13,6 @@
     height: calc(100vh - (#{$details-view-header-bar-height}));
 
     :global {
-        .left-nav-icon {
-            color: $neutral-60;
-        }
-
         .ms-Nav-groupContent {
             margin-bottom: 0;
         }
@@ -48,7 +44,6 @@
         }
 
         .overview-percent {
-            color: $neutral-55;
             line-height: 16px;
             font-size: 12px;
         }
@@ -64,10 +59,6 @@
                 border-bottom: 0;
             }
 
-            .ms-Button-label {
-                color: $neutral-100;
-            }
-
             &.is-selected {
                 .ms-Button-label {
                     color: $always-black;
@@ -80,10 +71,20 @@
                     .ms-Button-label,
                     .overview-percent {
                         color: $highlighted-text;
+
+                        @media (forced-colors: active) {
+                            forced-color-adjust: none;
+                            color: HighlightText !important;
+                        }
                     }
 
                     .left-nav-icon {
                         color: $left-nav-icon;
+
+                        @media (forced-colors: active) {
+                            forced-color-adjust: none;
+                            color: HighlightText !important;
+                        }
                     }
                 }
 

src/DetailsView/components/left-nav/left-nav-icon.scss

@@ -21,4 +21,15 @@
         background: $index-circle-background;
         border-color: $neutral-0;
     }
+
+    @media (forced-colors: active) {
+        li :global(.is-expanded) &,
+        :global(.ms-Nav-compositeLink):hover &,
+        :global(.ms-Nav-compositeLink.is-selected) & {
+            forced-color-adjust: none;
+            background-color: ButtonFace !important;
+            color: ButtonText !important;
+            border-color: ButtonText !important;
+        }
+    }
 }

src/DetailsView/components/requirement-context-section.scss

@@ -46,13 +46,15 @@
 
         &:hover {
             color: $link-hover;
+            text-decoration: underline;
         }
 
         @media screen and (forced-colors: active) {
             color: linktext;
 
             &:hover {
-                color: linktext;
+                color: ButtonText !important;
+                text-decoration: underline;
             }
         }
     }

src/common/components/new-tab-link-with-tooltip.scss

@@ -18,8 +18,25 @@
 .insights-link {
     display: flex;
 
+    &:hover,
+    &:active {
+        text-decoration: underline !important;
+    }
+}
+
+.insights-link-icon {
+    display: flex;
+
     &:hover,
     &:active {
         text-decoration: none !important;
     }
 }
+
+@media screen and (forced-colors: active) {
+    .insights-link:hover,
+    .insights-link-icon:hover {
+        forced-color-adjust: none;
+        color: ButtonText !important;
+    }
+}

src/common/components/new-tab-link-with-tooltip.tsx

@@ -6,12 +6,15 @@ import * as React from 'react';
 import { NamedFC } from '../react/named-fc';
 import styles from './new-tab-link-with-tooltip.scss';
 
-export type NewTabLinkWithTooltipProps = ILinkProps & { tooltipContent: string | undefined };
+export type NewTabLinkWithTooltipProps = ILinkProps & {
+    tooltipContent: string | undefined;
+    className?: string | undefined;
+};
 
 export const NewTabLinkWithTooltip = NamedFC<NewTabLinkWithTooltipProps>(
     'NewTabLinkWithTooltip',
     props => {
-        const { tooltipContent, ...linkProps } = props;
+        const { tooltipContent, className, ...linkProps } = props;
         const hostStyles: Partial<ITooltipHostStyles> = {
             root: styles.insightsTooltipHost,
         };
@@ -23,7 +26,10 @@ export const NewTabLinkWithTooltip = NamedFC<NewTabLinkWithTooltipProps>(
         };
         return (
             <TooltipHost content={tooltipContent} styles={hostStyles} calloutProps={calloutProps}>
-                <NewTabLink className={styles.insightsLink} {...linkProps} />
+                <NewTabLink
+                    className={typeof className === 'undefined' ? styles.insightsLink : className}
+                    {...linkProps}
+                />
             </TooltipHost>
         );
     },

src/tests/unit/tests/views/content/__snapshots__/content-link.test.tsx.snap

@@ -6,6 +6,7 @@ exports[`ContentLink renders from content, only have the icon 1`] = `
 <DocumentFragment>
   <mock-newtablinkwithtooltip
     aria-label="Guidance"
+    classname="insightsLinkIcon"
     href="/insights.html#/content/for/testing"
     tooltipcontent="Guidance"
   >
@@ -20,6 +21,7 @@ exports[`ContentLink renders from path, only have the icon 1`] = `
 <DocumentFragment>
   <mock-newtablinkwithtooltip
     aria-label="Guidance"
+    classname="insightsLinkIcon"
     href="/insights.html#/content/for/testing"
     tooltipcontent="Guidance"
   >
@@ -34,6 +36,7 @@ exports[`ContentLink renders with both text and icon 1`] = `
 <DocumentFragment>
   <mock-newtablinkwithtooltip
     aria-label="test guidance"
+    classname="insightsLinkIcon"
     href="/insights.html#/content/for/testing"
     tooltipcontent="Guidance"
   >
@@ -49,6 +52,7 @@ exports[`ContentLink renders with only text 1`] = `
 <DocumentFragment>
   <mock-newtablinkwithtooltip
     aria-label="test guidance"
+    classname="insightsLinkIcon"
     href="/insights.html#/content/for/testing"
     tooltipcontent="Guidance"
   >

src/views/content/content-link.tsx

@@ -3,6 +3,7 @@
 import { Icon } from '@fluentui/react';
 import { NewTabLink } from 'common/components/new-tab-link';
 import { NewTabLinkWithTooltip } from 'common/components/new-tab-link-with-tooltip';
+import styles from 'common/components/new-tab-link-with-tooltip.scss';
 import * as React from 'react';
 
 import { ContentActionMessageCreator } from '../../common/message-creators/content-action-message-creator';
@@ -52,6 +53,7 @@ export const ContentLink = NamedFC<ContentLinkProps>(
                 onClick={handleLinkClick}
                 tooltipContent={'Guidance'}
                 aria-label={ariaLabel}
+                className={styles.insightsLinkIcon}
             >
                 {icon}
                 {linkText}