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 <[email protected]>
Co-authored-by: Josh Black <[email protected]>

Author: langermank

.changeset/chilled-icons-hammer.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+Remove incorrect focus styles on ActionList items

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

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;