ActionList item outlines for high contrast theme (#1856)

* fresh branch * Stylelint auto-fixes * Create few-mice-scream.md * Update src/actionlist/action-list-item.scss Co-authored-by: Vinicius Depizzol <[email protected]> * change to box-shadow * lint * compromise * add reference * lint * fix merge, lint * adjust active state * lint * Stylelint auto-fixes * Update few-mice-scream.md Co-authored-by: Actions Auto Build <[email protected]> Co-authored-by: Vinicius Depizzol <[email protected]>
primer · Jan 14, 2022 · cbe3fb5 · cbe3fb5
1 parent 815daff
commit cbe3fb5
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 9 deletions.
diff --git a/.changeset/few-mice-scream.md b/.changeset/few-mice-scream.md
@@ -0,0 +1,5 @@
+---
+"@primer/css": patch
+---
+
+ActionList item outlines for high contrast theme 
diff --git a/src/actionlist/action-list-item.scss b/src/actionlist/action-list-item.scss
@@ -1,4 +1,4 @@
-// stylelint-disable max-nesting-depth, selector-max-specificity
+// stylelint-disable max-nesting-depth, selector-max-specificity, selector-max-compound-selectors
 
 @mixin focusOutline {
   position: relative;
@@ -38,34 +38,50 @@
   }
 
   // only hover li without list as children
-  &:not(.ActionList-item--hasSubItem) {
+  &:not(.ActionList-item--hasSubItem),
+  // target contents of first child li if sub-item (li wraps item label + nested ul)
+  &.ActionList-item--hasSubItem > .ActionList-content {
     @media (hover: hover) {
       &:hover {
         cursor: pointer;
         background-color: var(--color-action-list-item-default-hover-bg);
+
+        &:not(.ActionList-item--navActive) {
+          // Support for "Windows high contrast mode"
+          outline: $border-style $border-width transparent;
+          outline-offset: -$border-width;
+          // stylelint-disable-next-line primer/box-shadow
+          box-shadow: inset 0 0 0 2px var(--color-action-list-item-default-active-border);
+        }
       }
     }
 
     &:active {
       background: var(--color-action-list-item-default-active-bg);
 
+      &:not(.ActionList-item--navActive) {
+        // Support for "Windows high contrast mode" https://sarahmhigley.com/writing/whcm-quick-tips/
+        outline: $border-style $border-width transparent;
+        outline-offset: -$border-width;
+        // stylelint-disable-next-line primer/box-shadow
+        box-shadow: inset 0 0 0 2px var(--color-action-list-item-default-active-border);
+      }
+
       @media screen and (prefers-reduced-motion: no-preference) {
         animation: ActionList-item-active-bg 4s forwards cubic-bezier(0.33, 1, 0.68, 1);
       }
 
-      // stylelint-disable primer/box-shadow
       @keyframes ActionList-item-active-bg {
         50% {
-          box-shadow: inset 0 0 0 rgba(#000, 0.04);
+          // stylelint-disable-next-line primer/box-shadow
+          box-shadow: inset 0 2px 12px 6px rgba(var(--color-canvas-default), 0.4);
           transform: scale(1);
         }
 
         100% {
-          box-shadow: inset 0 3px 9px rgba(#000, 0.04);
           transform: scale(0.97);
         }
       }
-      // stylelint-enable primer/box-shadow
     }
 
     // hide dividers
@@ -153,23 +169,20 @@
 
     // has 16px leading visual
     .ActionList-content--visual16 + .ActionList--subGroup {
-      // stylelint-disable-next-line selector-max-compound-selectors
       .ActionList-content {
         padding-left: $spacer-5;
       }
     }
 
     // has 20px leading visual
     .ActionList-content--visual20 + .ActionList--subGroup {
-      // stylelint-disable-next-line selector-max-compound-selectors
       .ActionList-content {
         padding-left: $spacer-2 * 4.5; // 36px
       }
     }
 
     // has 24px leading visual
     .ActionList-content--visual24 + .ActionList--subGroup {
-      // stylelint-disable-next-line selector-max-compound-selectors
       .ActionList-content {
         padding-left: $spacer-6;
       }