diff --git a/.changeset/purple-bees-warn.md b/.changeset/purple-bees-warn.md new file mode 100644 index 00000000000..1e55fd81730 --- /dev/null +++ b/.changeset/purple-bees-warn.md @@ -0,0 +1,5 @@ +--- +"@primer/react": patch +--- + +Fix focus styles in ActionList Item to support more than focus-visible diff --git a/packages/react/src/ActionList/Item.tsx b/packages/react/src/ActionList/Item.tsx index a5736755e67..b574bef6a01 100644 --- a/packages/react/src/ActionList/Item.tsx +++ b/packages/react/src/ActionList/Item.tsx @@ -170,7 +170,7 @@ export const Item = React.forwardRef( 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}`, diff --git a/packages/react/src/NavList/__snapshots__/NavList.test.tsx.snap b/packages/react/src/NavList/__snapshots__/NavList.test.tsx.snap index e672d3964c0..1d86fc61fcb 100644 --- a/packages/react/src/NavList/__snapshots__/NavList.test.tsx.snap +++ b/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)); diff --git a/packages/react/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap b/packages/react/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap index eb4f351e329..147764080bd 100644 --- a/packages/react/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap +++ b/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));