fix: Respond to system HC modes (#4253)

#### Details

#3272 calls out some issues in Edge in system HC modes. Upon further investigation, the same problems are also appearing in current production builds of Chrome (detailed status of the change in Chrome can be found [here](https://www.chromestatus.com/feature/5757293075365888#:~:text=Chrome%20Platform%20Status%20Feature%3A%20Forced%20colors%20mode%20Adds,a%20user-chosen%20limited%20color%20palette%20on%20the%20page.)). This PR fixes the specific issues that are called out in Edge, and updates the checks from the Edge-specific flag of `-ms-high-contrast` to the [new standard](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/forced-colors) of `forced-colors`

##### Motivation

Accessibility matters

##### Screenshots

The old and new results are identical to both Chrome and Edge

Highlights (images are slightly different sizes so scaled slightly differently; the new versions draw the outline using the highlight color and the exclamation point using the highlight text color):
HC Mode | Old  | New
--- | --- | ---
None | ![image](https://user-images.githubusercontent.com/45672944/119034715-7f164980-b963-11eb-8e0f-abad45c8e3e8.png) | ![image](https://user-images.githubusercontent.com/45672944/119033656-517cd080-b962-11eb-8f86-ac53ac70ac12.png)
HC 1 | ![image](https://user-images.githubusercontent.com/45672944/119033952-b0424a00-b962-11eb-9505-ef7908f7db86.png)  | ![image](https://user-images.githubusercontent.com/45672944/119033748-6fe2cc00-b962-11eb-9ac5-d001154fb2f2.png)
HC 2 | ![image](https://user-images.githubusercontent.com/45672944/119034097-dbc53480-b962-11eb-8526-651d43ab5b16.png) | ![image](https://user-images.githubusercontent.com/45672944/119034182-f0a1c800-b962-11eb-91dc-aeff0fd1b068.png)
HC Black | ![image](https://user-images.githubusercontent.com/45672944/119034292-1038f080-b963-11eb-86ab-c41c88e3fefe.png) | ![image](https://user-images.githubusercontent.com/45672944/119034426-25158400-b963-11eb-8f7c-8615ed27220d.png)
HC White | ![image](https://user-images.githubusercontent.com/45672944/119034489-3a8aae00-b963-11eb-86bd-bc72d1f6bfc4.png) | ![image](https://user-images.githubusercontent.com/45672944/119034529-4bd3ba80-b963-11eb-91b6-bfac28d6bf17.png)

Buttons
HC Mode | Old | New
--- | --- | ---
None | ![image](https://user-images.githubusercontent.com/45672944/119035251-38751f00-b964-11eb-9afe-690eac0cc2f2.png) | ![image](https://user-images.githubusercontent.com/45672944/119035290-42971d80-b964-11eb-9a65-cbc8ab79f178.png)
HC 1 | ![image](https://user-images.githubusercontent.com/45672944/119035403-6490a000-b964-11eb-9e7e-e23df8f907e3.png) | ![image](https://user-images.githubusercontent.com/45672944/119035475-77a37000-b964-11eb-8def-421249074d1a.png) 
HC 2 | ![image](https://user-images.githubusercontent.com/45672944/119035587-93a71180-b964-11eb-9940-75dfc9fe7758.png) | ![image](https://user-images.githubusercontent.com/45672944/119035705-b9341b00-b964-11eb-8a54-2ee39fb92121.png)
HC Black | ![image](https://user-images.githubusercontent.com/45672944/119035804-d2d56280-b964-11eb-999f-95d11394027a.png) | ![image](https://user-images.githubusercontent.com/45672944/119035867-e5e83280-b964-11eb-9b5c-4ba8ef284c97.png)
HC White | ![image](https://user-images.githubusercontent.com/45672944/119035915-f7313f00-b964-11eb-99d1-7a3434fade0c.png) | ![image](https://user-images.githubusercontent.com/45672944/119036002-1a5bee80-b965-11eb-829d-f69fb180ff60.png)

##### Context

<!-- Are there any parts that you've intentionally left out-of-scope for a later PR to handle? -->
I considered making this 2 changes--one to address #3272 and one to switch from `-ms-high-contrast` to `forced-colors`, but kept them in a single PR since it would be strange to fix them just in Edge and leave Chrome broken.

<!-- Were there any alternative approaches you considered? What tradeoffs did you consider? -->

#### Pull request checklist
<!-- If a checklist item is not applicable to this change, write "n/a" in the checkbox -->
- [x] Addresses an existing issue: #3272
- [x] Ran `yarn fastpass`
- [x] Added/updated relevant unit test(s) (and ran `yarn test`)
- [x] Verified code coverage for the changes made. Check coverage report at: `<rootDir>/test-results/unit/coverage`
- [x] PR title *AND* final merge commit title both start with a semantic tag (`fix:`, `chore:`, `feat(feature-name):`, `refactor:`). See `CONTRIBUTING.md`.
- [x] (UI changes only) Added screenshots/GIFs to description above
- [n/a] (UI changes only) Verified usability with NVDA/JAWS

Author: DaveTryon

packages/report-e2e-tests/src/examples/axe-results-with-issues.snap.html

@@ -132,7 +132,7 @@
       .ms-Fabric.is-focusVisible .ms-Nav-group .ms-nav-linkButton:focus::after {
         border: 1px solid var(--neutral-100);
       }
-      @media screen and (-ms-high-contrast: active) {
+      @media screen and (forced-colors: active) {
         .ms-Fabric.is-focusVisible
           .ms-Nav-group
           .ms-nav-linkButton:focus::after {
@@ -1038,7 +1038,7 @@
       button.kebab-menu-button--2aa2O svg {
         stroke: var(--primary-text);
       }
-      @media screen and (-ms-high-contrast: active) {
+      @media screen and (forced-colors: active) {
         button.kebab-menu-button--2aa2O svg {
           fill: inherit !important;
         }

packages/report-e2e-tests/src/examples/axe-results-without-issues.snap.html

@@ -132,7 +132,7 @@
       .ms-Fabric.is-focusVisible .ms-Nav-group .ms-nav-linkButton:focus::after {
         border: 1px solid var(--neutral-100);
       }
-      @media screen and (-ms-high-contrast: active) {
+      @media screen and (forced-colors: active) {
         .ms-Fabric.is-focusVisible
           .ms-Nav-group
           .ms-nav-linkButton:focus::after {
@@ -1038,7 +1038,7 @@
       button.kebab-menu-button--2aa2O svg {
         stroke: var(--primary-text);
       }
-      @media screen and (-ms-high-contrast: active) {
+      @media screen and (forced-colors: active) {
         button.kebab-menu-button--2aa2O svg {
           fill: inherit !important;
         }

packages/report-e2e-tests/src/examples/combined-results-with-issues.snap.html

@@ -132,7 +132,7 @@
       .ms-Fabric.is-focusVisible .ms-Nav-group .ms-nav-linkButton:focus::after {
         border: 1px solid var(--neutral-100);
       }
-      @media screen and (-ms-high-contrast: active) {
+      @media screen and (forced-colors: active) {
         .ms-Fabric.is-focusVisible
           .ms-Nav-group
           .ms-nav-linkButton:focus::after {
@@ -1038,7 +1038,7 @@
       button.kebab-menu-button--2aa2O svg {
         stroke: var(--primary-text);
       }
-      @media screen and (-ms-high-contrast: active) {
+      @media screen and (forced-colors: active) {
         button.kebab-menu-button--2aa2O svg {
           fill: inherit !important;
         }

packages/report-e2e-tests/src/examples/combined-results-without-issues.snap.html

@@ -132,7 +132,7 @@
       .ms-Fabric.is-focusVisible .ms-Nav-group .ms-nav-linkButton:focus::after {
         border: 1px solid var(--neutral-100);
       }
-      @media screen and (-ms-high-contrast: active) {
+      @media screen and (forced-colors: active) {
         .ms-Fabric.is-focusVisible
           .ms-Nav-group
           .ms-nav-linkButton:focus::after {
@@ -1038,7 +1038,7 @@
       button.kebab-menu-button--2aa2O svg {
         stroke: var(--primary-text);
       }
-      @media screen and (-ms-high-contrast: active) {
+      @media screen and (forced-colors: active) {
         button.kebab-menu-button--2aa2O svg {
           fill: inherit !important;
         }

packages/report-e2e-tests/src/examples/summary-scan-with-issues.snap.html

@@ -132,7 +132,7 @@
       .ms-Fabric.is-focusVisible .ms-Nav-group .ms-nav-linkButton:focus::after {
         border: 1px solid var(--neutral-100);
       }
-      @media screen and (-ms-high-contrast: active) {
+      @media screen and (forced-colors: active) {
         .ms-Fabric.is-focusVisible
           .ms-Nav-group
           .ms-nav-linkButton:focus::after {
@@ -1038,7 +1038,7 @@
       button.kebab-menu-button--2aa2O svg {
         stroke: var(--primary-text);
       }
-      @media screen and (-ms-high-contrast: active) {
+      @media screen and (forced-colors: active) {
         button.kebab-menu-button--2aa2O svg {
           fill: inherit !important;
         }

packages/report-e2e-tests/src/examples/summary-scan-without-issues.snap.html

@@ -132,7 +132,7 @@
       .ms-Fabric.is-focusVisible .ms-Nav-group .ms-nav-linkButton:focus::after {
         border: 1px solid var(--neutral-100);
       }
-      @media screen and (-ms-high-contrast: active) {
+      @media screen and (forced-colors: active) {
         .ms-Fabric.is-focusVisible
           .ms-Nav-group
           .ms-nav-linkButton:focus::after {
@@ -1038,7 +1038,7 @@
       button.kebab-menu-button--2aa2O svg {
         stroke: var(--primary-text);
       }
-      @media screen and (-ms-high-contrast: active) {
+      @media screen and (forced-colors: active) {
         button.kebab-menu-button--2aa2O svg {
           fill: inherit !important;
         }

src/DetailsView/Styles/detailsview.scss

@@ -53,7 +53,7 @@ body {
         .expanded-property-div,
         .property-bag-div,
         .display-name {
-            @media screen and (-ms-high-contrast: active) {
+            @media screen and (forced-colors: active) {
                 color: highlighttext !important;
             }
         }

src/DetailsView/components/assessment-instance-details-column.scss

@@ -31,7 +31,7 @@
 .instance-header {
     color: $primary-text;
     white-space: pre;
-    @media screen and (-ms-high-contrast: active) {
+    @media screen and (forced-colors: active) {
         color: inherit;
     }
 }
@@ -40,7 +40,7 @@
     white-space: nowrap;
     text-overflow: ellipsis;
     color: $secondary-text;
-    @media screen and (-ms-high-contrast: active) {
+    @media screen and (forced-colors: active) {
         color: inherit;
     }
 }

src/DetailsView/components/assessment-instance-edit-and-remove-control.scss

@@ -7,7 +7,7 @@
     font-size: 16px;
     line-height: 24px;
     color: $negative-outcome;
-    @media screen and (-ms-high-contrast: active) {
+    @media screen and (forced-colors: active) {
         color: inherit;
     }
 }

src/DetailsView/components/assessment-instance-selected-button.scss

@@ -5,13 +5,13 @@
 .instance-visibility-button {
     color: $primary-text;
     padding-bottom: 6px;
-    @media screen and (-ms-high-contrast: active) {
+    @media screen and (forced-colors: active) {
         color: highlighttext !important;
     }
 }
 
 .instance-visibility-button:focus {
-    @media screen and (-ms-high-contrast: active) {
+    @media screen and (forced-colors: active) {
         outline: 1px highlighttext solid;
     }
 }