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 63743cd.

* only update relevant snapshots

.changeset/actionmenu-fix-high-contrast-mode.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': patch
+---
+
+ActionMenu: Fix styles for windows high contrast mode

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'
         }
       },

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'
+    }
   }
 })
 

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 = {

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"

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"

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"
 >