diff --git a/package.json b/package.json index 46d77921cbf..6925727ff58 100644 --- a/package.json +++ b/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", diff --git a/src/DetailsView/components/base-left-nav.scss b/src/DetailsView/components/base-left-nav.scss index 71eeb05af13..bd220e18ec4 100644 --- a/src/DetailsView/components/base-left-nav.scss +++ b/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; + } } } } diff --git a/src/DetailsView/components/details-view-command-bar.scss b/src/DetailsView/components/details-view-command-bar.scss index 3ebdcf13238..a5fda5d0266 100644 --- a/src/DetailsView/components/details-view-command-bar.scss +++ b/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 { diff --git a/src/DetailsView/components/left-nav/common-left-nav-link.scss b/src/DetailsView/components/left-nav/common-left-nav-link.scss index 7e3b8cb4ee9..3b945d0ec79 100644 --- a/src/DetailsView/components/left-nav/common-left-nav-link.scss +++ b/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; + } } } diff --git a/src/DetailsView/components/left-nav/details-view-left-nav.scss b/src/DetailsView/components/left-nav/details-view-left-nav.scss index 31b53da6182..97c942ee29d 100644 --- a/src/DetailsView/components/left-nav/details-view-left-nav.scss +++ b/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; + } } } diff --git a/src/DetailsView/components/left-nav/left-nav-icon.scss b/src/DetailsView/components/left-nav/left-nav-icon.scss index 37e8afa94e0..cf6abb77075 100644 --- a/src/DetailsView/components/left-nav/left-nav-icon.scss +++ b/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; + } + } } diff --git a/src/DetailsView/components/requirement-context-section.scss b/src/DetailsView/components/requirement-context-section.scss index 1c664670244..74a8af60ba0 100644 --- a/src/DetailsView/components/requirement-context-section.scss +++ b/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; } } } diff --git a/src/common/components/new-tab-link-with-tooltip.scss b/src/common/components/new-tab-link-with-tooltip.scss index 3c13bd87883..e1a274697a5 100644 --- a/src/common/components/new-tab-link-with-tooltip.scss +++ b/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; + } +} diff --git a/src/common/components/new-tab-link-with-tooltip.tsx b/src/common/components/new-tab-link-with-tooltip.tsx index 811984c9dfc..6b19c340c2d 100644 --- a/src/common/components/new-tab-link-with-tooltip.tsx +++ b/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( 'NewTabLinkWithTooltip', props => { - const { tooltipContent, ...linkProps } = props; + const { tooltipContent, className, ...linkProps } = props; const hostStyles: Partial = { root: styles.insightsTooltipHost, }; @@ -23,7 +26,7 @@ export const NewTabLinkWithTooltip = NamedFC( }; return ( - + ); }, diff --git a/src/tests/unit/tests/views/content/__snapshots__/content-link.test.tsx.snap b/src/tests/unit/tests/views/content/__snapshots__/content-link.test.tsx.snap index 948d2b78643..7ef078f18d8 100644 --- a/src/tests/unit/tests/views/content/__snapshots__/content-link.test.tsx.snap +++ b/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`] = ` @@ -20,6 +21,7 @@ exports[`ContentLink renders from path, only have the icon 1`] = ` @@ -34,6 +36,7 @@ exports[`ContentLink renders with both text and icon 1`] = ` @@ -49,6 +52,7 @@ exports[`ContentLink renders with only text 1`] = ` diff --git a/src/views/content/content-link.tsx b/src/views/content/content-link.tsx index e9095aeba78..96f94bdea9f 100644 --- a/src/views/content/content-link.tsx +++ b/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( onClick={handleLinkClick} tooltipContent={'Guidance'} aria-label={ariaLabel} + className={styles.insightsLinkIcon} > {icon} {linkText} diff --git a/yarn.lock b/yarn.lock index 5f938e2ec01..e64f7cee2a2 100644 --- a/yarn.lock +++ b/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