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

package.json

@@ -98,7 +98,7 @@
         "@typescript-eslint/eslint-plugin": "^5.61.0",
         "@typescript-eslint/parser": "^6.18.1",
         "case-sensitive-paths-webpack-plugin": "^2.4.0",
-        "codecov": "^3.8.3",
+        "codecov": "3.8.2",
         "commander": "^11.1.0",
         "core-js-bundle": "^3.35.0",
         "cross-env": "^7.0.3",

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/details-view-command-bar.scss

@@ -38,6 +38,10 @@
     text-overflow: ellipsis;
     display: inline-block;
     overflow: hidden;
+
+    &:hover {
+        text-decoration: underline;
+    }
 }
 
 .target-page-link {

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,7 @@ export const NewTabLinkWithTooltip = NamedFC<NewTabLinkWithTooltipProps>(
         };
         return (
             <TooltipHost content={tooltipContent} styles={hostStyles} calloutProps={calloutProps}>
-                <NewTabLink className={styles.insightsLink} {...linkProps} />
+                <NewTabLink className={className ?? styles.insightsLink} {...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}

yarn.lock

@@ -3116,7 +3116,7 @@ __metadata:
     axe-core: 4.9.1
     case-sensitive-paths-webpack-plugin: ^2.4.0
     classnames: ^2.5.1
-    codecov: ^3.8.3
+    codecov: 3.8.2
     commander: ^11.1.0
     core-js-bundle: ^3.35.0
     cross-env: ^7.0.3
@@ -4137,18 +4137,18 @@ __metadata:
   languageName: node
   linkType: hard
 
-"codecov@npm:^3.8.3":
-  version: 3.8.3
-  resolution: "codecov@npm:3.8.3"
+"codecov@npm:3.8.2":
+  version: 3.8.2
+  resolution: "codecov@npm:3.8.2"
   dependencies:
     argv: 0.0.2
-    ignore-walk: 3.0.4
+    ignore-walk: 3.0.3
     js-yaml: 3.14.1
-    teeny-request: 7.1.1
-    urlgrey: 1.0.0
+    teeny-request: 7.0.1
+    urlgrey: 0.4.4
   bin:
     codecov: bin/codecov
-  checksum: b7cde26f225930668dce13cb8d1d908187411669debeae6d2e8e561465ca4335575f50a7932256c0fa98e22baf0205f4b2c0225a0fbde02883cc7008ce3e1b9c
+  checksum: a70fdf2e83dace9018747781e63a564c935784ab62df966eebe7f6bacfd004a6f8b0c271fc9814fea21726e118501c35a05d65c74770b0573760c96e5dfa04d9
   languageName: node
   linkType: hard
 
@@ -5793,15 +5793,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"fast-url-parser@npm:^1.1.3":
-  version: 1.1.3
-  resolution: "fast-url-parser@npm:1.1.3"
-  dependencies:
-    punycode: ^1.3.2
-  checksum: 5043d0c4a8d775ff58504d56c096563c11b113e4cb8a2668c6f824a1cd4fb3812e2fdf76537eb24a7ce4ae7def6bd9747da630c617cf2a4b6ce0c42514e4f21c
-  languageName: node
-  linkType: hard
-
 "fastest-levenshtein@npm:^1.0.12, fastest-levenshtein@npm:^1.0.16":
   version: 1.0.16
   resolution: "fastest-levenshtein@npm:1.0.16"
@@ -6953,12 +6944,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"ignore-walk@npm:3.0.4":
-  version: 3.0.4
-  resolution: "ignore-walk@npm:3.0.4"
+"ignore-walk@npm:3.0.3":
+  version: 3.0.3
+  resolution: "ignore-walk@npm:3.0.3"
   dependencies:
     minimatch: ^3.0.4
-  checksum: 9e9c5ef6c3e0ed7ef5d797991abb554dbb7e60d5fedf6cf05c7129819689eba2b462f625c6e3561e0fc79841904eb829565513eeeab1b44f4fbec4d3146b1a8d
+  checksum: 34bc6f0497276a9bfad7ba1ae301c7d16bc6424890755a21d90536eaa1f4b7acd598686a01033e64345483b2fef41dad8f93794af73c8b13a7cf21a3cae34a4e
   languageName: node
   linkType: hard
 
@@ -10003,13 +9994,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"punycode@npm:^1.3.2":
-  version: 1.4.1
-  resolution: "punycode@npm:1.4.1"
-  checksum: fa6e698cb53db45e4628559e557ddaf554103d2a96a1d62892c8f4032cd3bc8871796cae9eabc1bc700e2b6677611521ce5bb1d9a27700086039965d0cf34518
-  languageName: node
-  linkType: hard
-
 "punycode@npm:^2.1.0, punycode@npm:^2.1.1":
   version: 2.3.1
   resolution: "punycode@npm:2.3.1"
@@ -11567,16 +11551,16 @@ __metadata:
   languageName: node
   linkType: hard
 
-"teeny-request@npm:7.1.1":
-  version: 7.1.1
-  resolution: "teeny-request@npm:7.1.1"
+"teeny-request@npm:7.0.1":
+  version: 7.0.1
+  resolution: "teeny-request@npm:7.0.1"
   dependencies:
     http-proxy-agent: ^4.0.0
     https-proxy-agent: ^5.0.0
     node-fetch: ^2.6.1
     stream-events: ^1.0.5
     uuid: ^8.0.0
-  checksum: 3ac6ade7d5ea8c96b6a71c8f7b75dd3f0a939b8c25e9c4ef87edf021264ef07417f2df4ca22f0ff72b3fdccb2616a92cdf2008e0819188e79390a3e79b426a46
+  checksum: 8eba49422edc141cff2c4a4c2bc39c78d92b6a9ce0fbf1a9edd0d3a57b830f719a1030a5681c2890a7d222c7ebcb74b7a8c29b37ad7b124d34be728cacfd128b
   languageName: node
   linkType: hard
 
@@ -12131,12 +12115,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"urlgrey@npm:1.0.0":
-  version: 1.0.0
-  resolution: "urlgrey@npm:1.0.0"
-  dependencies:
-    fast-url-parser: ^1.1.3
-  checksum: bc09df2474da59f95c8577746322bfb0f219c3a084722b427a916906ea7dab538fdbaf6a5582f64f617e9405fb1c9cc437ce40ec73abdddf26d7771a3d2f088b
+"urlgrey@npm:0.4.4":
+  version: 0.4.4
+  resolution: "urlgrey@npm:0.4.4"
+  checksum: db5884ffca497430eb99fcf7bd88402ff3647c1ba7b5687c595d3af884afc198399301ec181582501ff61074d9bf342ad12825eb11aa020bc6aeae7bc815a04c
   languageName: node
   linkType: hard