Skip to content

Tentative focus fix in action list item #4166

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 14 commits into from
Feb 12, 2024
Merged

Tentative focus fix in action list item #4166

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
ee0053e
Tentative focus fix in action list item
pksjce Jan 22, 2024
a2beb45
Update snapshots
pksjce Jan 25, 2024
4c061fd
Create purple-bees-warn.md
pksjce Jan 25, 2024
5f01c80
Merge branch 'main' into pk/fix-action-menu-foxus
pksjce Jan 29, 2024
a653c2c
chore(deps-dev): bump @babel/cli from 7.22.10 to 7.23.9 (#4189)
dependabot[bot] Jan 29, 2024
58e9dee
chore(deps-dev): bump terser from 5.17.6 to 5.27.0 (#4187)
dependabot[bot] Jan 29, 2024
262352d
chore(deps-dev): bump @storybook/source-loader from 7.6.7 to 7.6.10 (…
dependabot[bot] Jan 29, 2024
5d47efb
Improve aria-labels for example icon buttons and add guidance (#4191)
owenniblock Jan 29, 2024
4384d73
chore(deps): bump @github/combobox-nav from 2.1.7 to 2.3.1 (#4185)
dependabot[bot] Jan 29, 2024
0df9985
Add missing CSS vars to legacy-theme (#4193)
langermank Jan 29, 2024
be64070
Version Packages (#4183)
primer[bot] Jan 29, 2024
fc9f7bd
Merge branch 'main' into pk/fix-action-menu-foxus
pksjce Feb 8, 2024
4382e3c
Merge branch 'main' into pk/fix-action-menu-foxus
pksjce Feb 8, 2024
ecb8af8
Merge branch 'main' into pk/fix-action-menu-foxus
pksjce Feb 8, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/purple-bees-warn.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@primer/react": patch
---

Fix focus styles in ActionList Item to support more than focus-visible
2 changes: 1 addition & 1 deletion packages/react/src/ActionList/Item.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}`,
Expand Down
24 changes: 16 additions & 8 deletions packages/react/src/NavList/__snapshots__/NavList.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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));
Expand All @@ -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));
Expand Down Expand Up @@ -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));
Expand All @@ -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));
Expand Down Expand Up @@ -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));
Expand All @@ -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));
Expand Down Expand Up @@ -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));
Expand Down Expand Up @@ -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));
Expand Down
18 changes: 12 additions & 6 deletions packages/react/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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));
Expand Down Expand Up @@ -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));
Expand Down Expand Up @@ -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));
Expand All @@ -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));
Expand Down Expand Up @@ -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));
Expand Down Expand Up @@ -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));
Expand Down