Tentative focus fix in action list item (#4166)

* Tentative focus fix in action list item

* Update snapshots

* Create purple-bees-warn.md

* chore(deps-dev): bump @babel/cli from 7.22.10 to 7.23.9 (#4189)

Bumps [@babel/cli](https://github.com/babel/babel/tree/HEAD/packages/babel-cli) from 7.22.10 to 7.23.9.
- [Release notes](https://github.com/babel/babel/releases)
- [Changelog](https://github.com/babel/babel/blob/main/CHANGELOG.md)
- [Commits](https://github.com/babel/babel/commits/v7.23.9/packages/babel-cli)

---
updated-dependencies:
- dependency-name: "@babel/cli"
  dependency-type: direct:development
  update-type: version-update:semver-minor
...

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* chore(deps-dev): bump terser from 5.17.6 to 5.27.0 (#4187)

Bumps [terser](https://github.com/terser/terser) from 5.17.6 to 5.27.0.
- [Changelog](https://github.com/terser/terser/blob/master/CHANGELOG.md)
- [Commits](terser/terser@v5.17.6...v5.27.0)

---
updated-dependencies:
- dependency-name: terser
  dependency-type: direct:development
  update-type: version-update:semver-minor
...

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* chore(deps-dev): bump @storybook/source-loader from 7.6.7 to 7.6.10 (#4186)

Bumps [@storybook/source-loader](https://github.com/storybookjs/storybook/tree/HEAD/code/lib/source-loader) from 7.6.7 to 7.6.10.
- [Release notes](https://github.com/storybookjs/storybook/releases)
- [Changelog](https://github.com/storybookjs/storybook/blob/next/CHANGELOG.md)
- [Commits](https://github.com/storybookjs/storybook/commits/v7.6.10/code/lib/source-loader)

---
updated-dependencies:
- dependency-name: "@storybook/source-loader"
  dependency-type: direct:development
  update-type: version-update:semver-patch
...

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* Improve aria-labels for example icon buttons and add guidance (#4191)

* Improve aria-labels for example icon buttons and add guidance

* test(vrt): update snapshots

---------

Co-authored-by: joshblack <joshblack@users.noreply.github.com>

* chore(deps): bump @github/combobox-nav from 2.1.7 to 2.3.1 (#4185)

* chore(deps): bump @github/combobox-nav from 2.1.7 to 2.3.1

Bumps [@github/combobox-nav](https://github.com/github/combobox-nav) from 2.1.7 to 2.3.1.
- [Release notes](https://github.com/github/combobox-nav/releases)
- [Commits](github/combobox-nav@v2.1.7...v2.3.1)

---
updated-dependencies:
- dependency-name: "@github/combobox-nav"
  dependency-type: direct:production
  update-type: version-update:semver-minor
...

Signed-off-by: dependabot[bot] <support@github.com>

* test: add fallback for Element#scrollIntoView

* chore: fix eslint warning

---------

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: Josh Black <joshblack@users.noreply.github.com>

* Add missing CSS vars to legacy-theme (#4193)

* oof

* Create thirty-mirrors-switch.md

* test(vrt): update snapshots

* fix missing var

* fix parens

* test(vrt): update snapshots

---------

Co-authored-by: langermank <langermank@users.noreply.github.com>

* Version Packages (#4183)

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

---------

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: Owen Niblock <owenniblock@github.com>
Co-authored-by: joshblack <joshblack@users.noreply.github.com>
Co-authored-by: Katie Langerman <18661030+langermank@users.noreply.github.com>
Co-authored-by: langermank <langermank@users.noreply.github.com>
Co-authored-by: primer[bot] <119360173+primer[bot]@users.noreply.github.com>
Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

.changeset/purple-bees-warn.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+Fix focus styles in ActionList Item to support more than focus-visible

packages/react/src/ActionList/Item.tsx

@@ -170,7 +170,7 @@ export const Item = React.forwardRef<HTMLLIElement, ActionListItemProps>(
           color: getVariantStyles(variant, disabled, inactive).hoverColor,
           boxShadow: `inset 0 0 0 max(1px, 0.0625rem) ${theme?.colors.actionListItem.default.activeBorder}`,
         },
-        '&:focus-visible, > a:focus-visible': {
+        '&:focus-visible, > a:focus-visible, &:focus.focus-visible': {
           outline: 'none',
           border: `2 solid`,
           boxShadow: `0 0 0 2px ${theme?.colors.accent.emphasis}`,

packages/react/src/NavList/__snapshots__/NavList.test.tsx.snap

@@ -261,7 +261,8 @@ exports[`NavList renders a simple list 1`] = `
   }
 
   .c2:focus-visible,
-  .c2 > a:focus-visible {
+  .c2 > a:focus-visible,
+  .c2:focus.focus-visible {
     outline: none;
     border: 2 solid;
     box-shadow: 0 0 0 2px var(--bgColor-accent-emphasis,var(--color-accent-emphasis,#0969da));
@@ -287,7 +288,8 @@ exports[`NavList renders a simple list 1`] = `
   }
 
   .c7:focus-visible,
-  .c7 > a:focus-visible {
+  .c7 > a:focus-visible,
+  .c7:focus.focus-visible {
     outline: none;
     border: 2 solid;
     box-shadow: 0 0 0 2px var(--bgColor-accent-emphasis,var(--color-accent-emphasis,#0969da));
@@ -685,7 +687,8 @@ exports[`NavList renders with groups 1`] = `
   }
 
   .c6:focus-visible,
-  .c6 > a:focus-visible {
+  .c6 > a:focus-visible,
+  .c6:focus.focus-visible {
     outline: none;
     border: 2 solid;
     box-shadow: 0 0 0 2px var(--bgColor-accent-emphasis,var(--color-accent-emphasis,#0969da));
@@ -711,7 +714,8 @@ exports[`NavList renders with groups 1`] = `
   }
 
   .c11:focus-visible,
-  .c11 > a:focus-visible {
+  .c11 > a:focus-visible,
+  .c11:focus.focus-visible {
     outline: none;
     border: 2 solid;
     box-shadow: 0 0 0 2px var(--bgColor-accent-emphasis,var(--color-accent-emphasis,#0969da));
@@ -1150,7 +1154,8 @@ exports[`NavList.Item with NavList.SubNav does not have active styles if SubNav
   }
 
   .c11:focus-visible,
-  .c11 > a:focus-visible {
+  .c11 > a:focus-visible,
+  .c11:focus.focus-visible {
     outline: none;
     border: 2 solid;
     box-shadow: 0 0 0 2px var(--bgColor-accent-emphasis,var(--color-accent-emphasis,#0969da));
@@ -1176,7 +1181,8 @@ exports[`NavList.Item with NavList.SubNav does not have active styles if SubNav
   }
 
   .c4:focus-visible,
-  .c4 > a:focus-visible {
+  .c4 > a:focus-visible,
+  .c4:focus.focus-visible {
     outline: none;
     border: 2 solid;
     box-shadow: 0 0 0 2px var(--bgColor-accent-emphasis,var(--color-accent-emphasis,#0969da));
@@ -1629,7 +1635,8 @@ exports[`NavList.Item with NavList.SubNav has active styles if SubNav contains t
   }
 
   .c11:focus-visible,
-  .c11 > a:focus-visible {
+  .c11 > a:focus-visible,
+  .c11:focus.focus-visible {
     outline: none;
     border: 2 solid;
     box-shadow: 0 0 0 2px var(--bgColor-accent-emphasis,var(--color-accent-emphasis,#0969da));
@@ -1663,7 +1670,8 @@ exports[`NavList.Item with NavList.SubNav has active styles if SubNav contains t
   }
 
   .c4:focus-visible,
-  .c4 > a:focus-visible {
+  .c4 > a:focus-visible,
+  .c4:focus.focus-visible {
     outline: none;
     border: 2 solid;
     box-shadow: 0 0 0 2px var(--bgColor-accent-emphasis,var(--color-accent-emphasis,#0969da));

packages/react/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap

@@ -747,7 +747,8 @@ exports[`snapshots renders a menu that contains an item to add to the menu 1`] =
   }
 
   .c3:focus-visible,
-  .c3 > a:focus-visible {
+  .c3 > a:focus-visible,
+  .c3:focus.focus-visible {
     outline: none;
     border: 2 solid;
     box-shadow: 0 0 0 2px var(--bgColor-accent-emphasis,var(--color-accent-emphasis,#0969da));
@@ -1489,7 +1490,8 @@ exports[`snapshots renders a multiselect input 1`] = `
   }
 
   .c3:focus-visible,
-  .c3 > a:focus-visible {
+  .c3 > a:focus-visible,
+  .c3:focus.focus-visible {
     outline: none;
     border: 2 solid;
     box-shadow: 0 0 0 2px var(--bgColor-accent-emphasis,var(--color-accent-emphasis,#0969da));
@@ -2290,7 +2292,8 @@ exports[`snapshots renders a multiselect input with selected menu items 1`] = `
   }
 
   .c3:focus-visible,
-  .c3 > a:focus-visible {
+  .c3 > a:focus-visible,
+  .c3:focus.focus-visible {
     outline: none;
     border: 2 solid;
     box-shadow: 0 0 0 2px var(--bgColor-accent-emphasis,var(--color-accent-emphasis,#0969da));
@@ -2316,7 +2319,8 @@ exports[`snapshots renders a multiselect input with selected menu items 1`] = `
   }
 
   .c8:focus-visible,
-  .c8 > a:focus-visible {
+  .c8 > a:focus-visible,
+  .c8:focus.focus-visible {
     outline: none;
     border: 2 solid;
     box-shadow: 0 0 0 2px var(--bgColor-accent-emphasis,var(--color-accent-emphasis,#0969da));
@@ -2955,7 +2959,8 @@ exports[`snapshots renders a single select input 1`] = `
   }
 
   .c3:focus-visible,
-  .c3 > a:focus-visible {
+  .c3 > a:focus-visible,
+  .c3:focus.focus-visible {
     outline: none;
     border: 2 solid;
     box-shadow: 0 0 0 2px var(--bgColor-accent-emphasis,var(--color-accent-emphasis,#0969da));
@@ -3408,7 +3413,8 @@ exports[`snapshots renders with a custom text input component 1`] = `
   }
 
   .c3:focus-visible,
-  .c3 > a:focus-visible {
+  .c3 > a:focus-visible,
+  .c3:focus.focus-visible {
     outline: none;
     border: 2 solid;
     box-shadow: 0 0 0 2px var(--bgColor-accent-emphasis,var(--color-accent-emphasis,#0969da));