Remove incorrect focus styles on ActionList items (#3056)

* remove incorrect focus style * Create .changeset/chilled-icons-hammer.md * test(vrt): update snapshots * test(e2e): remove DataTable snapshots --------- Co-authored-by: langermank <langermank@users.noreply.github.com> Co-authored-by: Josh Black <joshblack@users.noreply.github.com>
primer · Mar 22, 2023 · 7e4f771 · 7e4f771
1 parent 0c03e8e
commit 7e4f771
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 79 deletions.
diff --git a/.changeset/chilled-icons-hammer.md b/.changeset/chilled-icons-hammer.md
@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+Remove incorrect focus styles on ActionList items
diff --git a/src/ActionList/Item.tsx b/src/ActionList/Item.tsx
@@ -92,13 +92,7 @@ export const Item = React.forwardRef<HTMLLIElement, ActionListItemProps>(
           backgroundColor: `actionListItem.${variant}.hoverBg`,
           color: getVariantStyles(variant, disabled).hoverColor,
         },
-        ':focus:not([data-focus-visible-added]), > a:focus:not([data-focus-visible-added])': {
-          backgroundColor: `actionListItem.${variant}.selectedBg`,
-          color: getVariantStyles(variant, disabled).hoverColor,
-          outline: 'none',
-        },
-        '&[data-focus-visible-added], > a[data-focus-visible-added]': {
-          // we don't use :focus-visible because not all browsers (safari) have it yet
+        '&:focus-visible, > a:focus-visible': {
           outline: 'none',
           border: `2 solid`,
           boxShadow: `0 0 0 2px ${theme?.colors.accent.emphasis}`,

diff --git a/src/NavList/__snapshots__/NavList.test.tsx.snap b/src/NavList/__snapshots__/NavList.test.tsx.snap
@@ -239,15 +239,8 @@ exports[`NavList renders a simple list 1`] = `
     color: #24292f;
   }
 
-  .c2:focus:not([data-focus-visible-added]),
-  .c2 > a:focus:not([data-focus-visible-added]) {
-    background-color: rgba(208,215,222,0.24);
-    color: #24292f;
-    outline: none;
-  }
-
-  .c2[data-focus-visible-added],
-  .c2 > a[data-focus-visible-added] {
+  .c2:focus-visible,
+  .c2 > a:focus-visible {
     outline: none;
     border: 2 solid;
     box-shadow: 0 0 0 2px #0969da;
@@ -271,15 +264,8 @@ exports[`NavList renders a simple list 1`] = `
     color: #24292f;
   }
 
-  .c6:focus:not([data-focus-visible-added]),
-  .c6 > a:focus:not([data-focus-visible-added]) {
-    background-color: rgba(208,215,222,0.24);
-    color: #24292f;
-    outline: none;
-  }
-
-  .c6[data-focus-visible-added],
-  .c6 > a[data-focus-visible-added] {
+  .c6:focus-visible,
+  .c6 > a:focus-visible {
     outline: none;
     border: 2 solid;
     box-shadow: 0 0 0 2px #0969da;
@@ -649,15 +635,8 @@ exports[`NavList renders with groups 1`] = `
     color: #24292f;
   }
 
-  .c6:focus:not([data-focus-visible-added]),
-  .c6 > a:focus:not([data-focus-visible-added]) {
-    background-color: rgba(208,215,222,0.24);
-    color: #24292f;
-    outline: none;
-  }
-
-  .c6[data-focus-visible-added],
-  .c6 > a[data-focus-visible-added] {
+  .c6:focus-visible,
+  .c6 > a:focus-visible {
     outline: none;
     border: 2 solid;
     box-shadow: 0 0 0 2px #0969da;
@@ -681,15 +660,8 @@ exports[`NavList renders with groups 1`] = `
     color: #24292f;
   }
 
-  .c10:focus:not([data-focus-visible-added]),
-  .c10 > a:focus:not([data-focus-visible-added]) {
-    background-color: rgba(208,215,222,0.24);
-    color: #24292f;
-    outline: none;
-  }
-
-  .c10[data-focus-visible-added],
-  .c10 > a[data-focus-visible-added] {
+  .c10:focus-visible,
+  .c10 > a:focus-visible {
     outline: none;
     border: 2 solid;
     box-shadow: 0 0 0 2px #0969da;
@@ -1141,15 +1113,8 @@ exports[`NavList.Item with NavList.SubNav does not have active styles if SubNav
     color: #24292f;
   }
 
-  .c10:focus:not([data-focus-visible-added]),
-  .c10 > a:focus:not([data-focus-visible-added]) {
-    background-color: rgba(208,215,222,0.24);
-    color: #24292f;
-    outline: none;
-  }
-
-  .c10[data-focus-visible-added],
-  .c10 > a[data-focus-visible-added] {
+  .c10:focus-visible,
+  .c10 > a:focus-visible {
     outline: none;
     border: 2 solid;
     box-shadow: 0 0 0 2px #0969da;
@@ -1173,15 +1138,8 @@ exports[`NavList.Item with NavList.SubNav does not have active styles if SubNav
     color: #24292f;
   }
 
-  .c3:focus:not([data-focus-visible-added]),
-  .c3 > a:focus:not([data-focus-visible-added]) {
-    background-color: rgba(208,215,222,0.24);
-    color: #24292f;
-    outline: none;
-  }
-
-  .c3[data-focus-visible-added],
-  .c3 > a[data-focus-visible-added] {
+  .c3:focus-visible,
+  .c3 > a:focus-visible {
     outline: none;
     border: 2 solid;
     box-shadow: 0 0 0 2px #0969da;
@@ -1628,15 +1586,8 @@ exports[`NavList.Item with NavList.SubNav has active styles if SubNav contains t
     color: #24292f;
   }
 
-  .c10:focus:not([data-focus-visible-added]),
-  .c10 > a:focus:not([data-focus-visible-added]) {
-    background-color: rgba(208,215,222,0.24);
-    color: #24292f;
-    outline: none;
-  }
-
-  .c10[data-focus-visible-added],
-  .c10 > a[data-focus-visible-added] {
+  .c10:focus-visible,
+  .c10 > a:focus-visible {
     outline: none;
     border: 2 solid;
     box-shadow: 0 0 0 2px #0969da;
@@ -1660,15 +1611,8 @@ exports[`NavList.Item with NavList.SubNav has active styles if SubNav contains t
     color: #24292f;
   }
 
-  .c3:focus:not([data-focus-visible-added]),
-  .c3 > a:focus:not([data-focus-visible-added]) {
-    background-color: rgba(208,215,222,0.24);
-    color: #24292f;
-    outline: none;
-  }
-
-  .c3[data-focus-visible-added],
-  .c3 > a[data-focus-visible-added] {
+  .c3:focus-visible,
+  .c3 > a:focus-visible {
     outline: none;
     border: 2 solid;
     box-shadow: 0 0 0 2px #0969da;