diff --git a/.changeset/chilled-icons-hammer.md b/.changeset/chilled-icons-hammer.md new file mode 100644 index 00000000000..aa0dfa5bdbc --- /dev/null +++ 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 index 4aef1c765c1..d30d86a2f51 100644 --- a/src/ActionList/Item.tsx +++ b/src/ActionList/Item.tsx @@ -92,13 +92,7 @@ export const Item = React.forwardRef( 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 index f60acd85674..280735a4df8 100644 --- 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;