From 3b23604438b850557e7e3d0a0594a8cca119859b Mon Sep 17 00:00:00 2001
From: Siddharth Kshetrapal <siddharthkp@github.com>
Date: Thu, 17 Mar 2022 16:55:39 +0100
Subject: [PATCH] ActionMenu: Fix styles for windows high contrast mode (#1970)

* add forced-colors styles for Overlay & focused Button

* respect comment style

* add changeset

* update snapshots

* Revert "update snapshots"

This reverts commit 63743cd452f6a4bb70fee64a52b03e797eab555e.

* only update relevant snapshots
---
 .../actionmenu-fix-high-contrast-mode.md      |  5 ++++
 src/ActionList/Item.tsx                       |  3 +-
 src/Button/styles.ts                          |  6 ++++
 src/Overlay.tsx                               |  6 ++++
 .../__snapshots__/ActionMenu.test.tsx.snap    |  6 ++++
 .../AnchoredOverlay.test.tsx.snap             |  6 ++++
 .../__snapshots__/Button.test.tsx.snap        | 30 +++++++++++++++++++
 7 files changed, 60 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/actionmenu-fix-high-contrast-mode.md

diff --git a/.changeset/actionmenu-fix-high-contrast-mode.md b/.changeset/actionmenu-fix-high-contrast-mode.md
new file mode 100644
index 00000000000..c4d3c5ef3b2
--- /dev/null
+++ b/.changeset/actionmenu-fix-high-contrast-mode.md
@@ -0,0 +1,5 @@
+---
+'@primer/react': patch
+---
+
+ActionMenu: Fix styles for windows high contrast mode
diff --git a/src/ActionList/Item.tsx b/src/ActionList/Item.tsx
index 31a74a1ac52..c57eba32b85 100644
--- a/src/ActionList/Item.tsx
+++ b/src/ActionList/Item.tsx
@@ -161,8 +161,7 @@ export const Item = React.forwardRef<HTMLLIElement, ActionListItemProps>(
 
       '@media (forced-colors: active)': {
         ':focus': {
-          // we set color to be transparent and let the high contrast rules
-          // decide what color with contrast should that be corrected to
+          // Support for Windows high contrast https://sarahmhigley.com/writing/whcm-quick-tips
           outline: 'solid 1px transparent !important'
         }
       },
diff --git a/src/Button/styles.ts b/src/Button/styles.ts
index a17f6910347..a38b80b0b61 100644
--- a/src/Button/styles.ts
+++ b/src/Button/styles.ts
@@ -250,6 +250,12 @@ export const getBaseStyles = (theme?: Theme) => ({
   },
   '&:disabled svg': {
     opacity: '0.6'
+  },
+  '@media (forced-colors: active)': {
+    '&:focus': {
+      // Support for Windows high contrast https://sarahmhigley.com/writing/whcm-quick-tips
+      outline: 'solid 1px transparent'
+    }
   }
 })
 
diff --git a/src/Overlay.tsx b/src/Overlay.tsx
index 6962a1f6112..cc9c721213c 100644
--- a/src/Overlay.tsx
+++ b/src/Overlay.tsx
@@ -78,6 +78,12 @@ const StyledOverlay = styled.div<StyledOverlayProps>`
   :focus {
     outline: none;
   }
+
+  @media (forced-colors: active) {
+    /* Support for Windows high contrast https://sarahmhigley.com/writing/whcm-quick-tips */
+    outline: solid 1px transparent;
+  }
+
   ${sx};
 `
 type BaseOverlayProps = {
diff --git a/src/__tests__/__snapshots__/ActionMenu.test.tsx.snap b/src/__tests__/__snapshots__/ActionMenu.test.tsx.snap
index b7e6b825d1c..6a1ffc5e47e 100644
--- a/src/__tests__/__snapshots__/ActionMenu.test.tsx.snap
+++ b/src/__tests__/__snapshots__/ActionMenu.test.tsx.snap
@@ -104,6 +104,12 @@ exports[`ActionMenu renders consistently 1`] = `
   margin-right: -4px;
 }
 
+@media (forced-colors:active) {
+  .c1:focus {
+    outline: solid 1px transparent;
+  }
+}
+
 <div
   className="c0"
   color="fg.default"
diff --git a/src/__tests__/__snapshots__/AnchoredOverlay.test.tsx.snap b/src/__tests__/__snapshots__/AnchoredOverlay.test.tsx.snap
index 61783124d9b..82b17ad7de6 100644
--- a/src/__tests__/__snapshots__/AnchoredOverlay.test.tsx.snap
+++ b/src/__tests__/__snapshots__/AnchoredOverlay.test.tsx.snap
@@ -185,6 +185,12 @@ exports[`AnchoredOverlay should render consistently when open 1`] = `
   outline: none;
 }
 
+@media (forced-colors:active) {
+  .c2 {
+    outline: solid 1px transparent;
+  }
+}
+
 <div>
   <div
     class="c0"
diff --git a/src/__tests__/__snapshots__/Button.test.tsx.snap b/src/__tests__/__snapshots__/Button.test.tsx.snap
index f2e1657f35f..6055d1e1a3d 100644
--- a/src/__tests__/__snapshots__/Button.test.tsx.snap
+++ b/src/__tests__/__snapshots__/Button.test.tsx.snap
@@ -88,6 +88,12 @@ exports[`Button renders consistently 1`] = `
   border-color: rgba(27,31,36,0.15);
 }
 
+@media (forced-colors:active) {
+  .c0:focus {
+    outline: solid 1px transparent;
+  }
+}
+
 <button
   className="c0"
 />
@@ -198,6 +204,12 @@ exports[`Button styles danger button appropriately 1`] = `
   border-color: btn.danger.selectedBorder;
 }
 
+@media (forced-colors:active) {
+  .c0:focus {
+    outline: solid 1px transparent;
+  }
+}
+
 <button
   class="c0"
 >
@@ -294,6 +306,12 @@ exports[`Button styles invisible button appropriately 1`] = `
   background-color: btn.selectedBg;
 }
 
+@media (forced-colors:active) {
+  .c0:focus {
+    outline: solid 1px transparent;
+  }
+}
+
 <button
   class="c0"
 >
@@ -411,6 +429,12 @@ exports[`Button styles outline button appropriately 1`] = `
   border-color: btn.outline.selectedBorder;
 }
 
+@media (forced-colors:active) {
+  .c0:focus {
+    outline: solid 1px transparent;
+  }
+}
+
 <button
   class="c0"
 >
@@ -514,6 +538,12 @@ exports[`Button styles primary button appropriately 1`] = `
   box-shadow: undefined;
 }
 
+@media (forced-colors:active) {
+  .c0:focus {
+    outline: solid 1px transparent;
+  }
+}
+
 <button
   class="c0"
 >