From a77b45aabd39de7253a5d1f063172a9b1b654e7b Mon Sep 17 00:00:00 2001 From: Tyler Jones Date: Fri, 1 Mar 2024 11:05:11 -0500 Subject: [PATCH 1/4] Switch selector to class, add to ActionMenu example --- packages/react/src/ActionList/Item.tsx | 2 +- .../src/ActionMenu/ActionMenu.examples.stories.tsx | 12 +++++++++++- 2 files changed, 12 insertions(+), 2 deletions(-) diff --git a/packages/react/src/ActionList/Item.tsx b/packages/react/src/ActionList/Item.tsx index d1b41d15aae..dc33b7f6d9f 100644 --- a/packages/react/src/ActionList/Item.tsx +++ b/packages/react/src/ActionList/Item.tsx @@ -174,7 +174,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.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/ActionMenu/ActionMenu.examples.stories.tsx b/packages/react/src/ActionMenu/ActionMenu.examples.stories.tsx index fa750b7dd41..d636102cd86 100644 --- a/packages/react/src/ActionMenu/ActionMenu.examples.stories.tsx +++ b/packages/react/src/ActionMenu/ActionMenu.examples.stories.tsx @@ -1,5 +1,5 @@ import React from 'react' -import {Box, ActionMenu, ActionList, Button, IconButton} from '../' +import {Box, ActionMenu, ActionList, Button, IconButton, FormControl, TextInput} from '../' import { GearIcon, MilestoneIcon, @@ -183,6 +183,15 @@ export const ShortcutMenu = () => {

Press Shift+C to open the menu


+ {/** + * This is used to demonstrate mouse/keyboard modality + * and how it might affect `:focus-visible` styles in the menu. + */} + + Default label + + + {/** * Even though the state is controlled externally, * we can pass an Anchor for the menu to "anchor to" @@ -209,6 +218,7 @@ export const ShortcutMenu = () => { Edit comment ⌘E + View file Delete file From 61b2fa54d838d40c7288024ff3f1b2a56505e55a Mon Sep 17 00:00:00 2001 From: Tyler Jones Date: Fri, 1 Mar 2024 11:07:16 -0500 Subject: [PATCH 2/4] Account for HCM focus-visible style --- packages/react/src/ActionList/Item.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react/src/ActionList/Item.tsx b/packages/react/src/ActionList/Item.tsx index dc33b7f6d9f..140ceeb6e20 100644 --- a/packages/react/src/ActionList/Item.tsx +++ b/packages/react/src/ActionList/Item.tsx @@ -186,7 +186,7 @@ export const Item = React.forwardRef( }, '@media (forced-colors: active)': { - ':focus, &:focus-visible, > a:focus-visible': { + ':focus, &:focus-visible, > a.focus-visible': { // Support for Windows high contrast https://sarahmhigley.com/writing/whcm-quick-tips outline: 'solid 1px transparent !important', }, From a6de6963f92a7b63d20fd9f66f4bdc3ba971afc5 Mon Sep 17 00:00:00 2001 From: Tyler Jones Date: Fri, 1 Mar 2024 11:18:30 -0500 Subject: [PATCH 3/4] Add changeset --- .changeset/fluffy-pugs-care.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/fluffy-pugs-care.md diff --git a/.changeset/fluffy-pugs-care.md b/.changeset/fluffy-pugs-care.md new file mode 100644 index 00000000000..0932804bd00 --- /dev/null +++ b/.changeset/fluffy-pugs-care.md @@ -0,0 +1,5 @@ +--- +'@primer/react': patch +--- + +Switches focus styles to target `a.focus-visible` instead of `a:focus-visible`. From 76a404bcdfeb16ced3939ba8e7273bb855c5e092 Mon Sep 17 00:00:00 2001 From: Tyler Jones Date: Fri, 1 Mar 2024 11:35:32 -0500 Subject: [PATCH 4/4] Update snapshots --- .../__snapshots__/NavList.test.tsx.snap | 32 +++++++++---------- .../__snapshots__/Autocomplete.test.tsx.snap | 24 +++++++------- 2 files changed, 28 insertions(+), 28 deletions(-) diff --git a/packages/react/src/NavList/__snapshots__/NavList.test.tsx.snap b/packages/react/src/NavList/__snapshots__/NavList.test.tsx.snap index f2dd669e3f7..d398c376c45 100644 --- a/packages/react/src/NavList/__snapshots__/NavList.test.tsx.snap +++ b/packages/react/src/NavList/__snapshots__/NavList.test.tsx.snap @@ -261,7 +261,7 @@ 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; @@ -277,7 +277,7 @@ exports[`NavList renders a simple list 1`] = ` @media (forced-colors:active) { .c2:focus, .c2:focus-visible, - .c2 > a:focus-visible { + .c2 > a.focus-visible { outline: solid 1px transparent !important; } } @@ -290,7 +290,7 @@ 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; @@ -306,7 +306,7 @@ exports[`NavList renders a simple list 1`] = ` @media (forced-colors:active) { .c7:focus, .c7:focus-visible, - .c7 > a:focus-visible { + .c7 > a.focus-visible { outline: solid 1px transparent !important; } } @@ -691,7 +691,7 @@ 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; @@ -707,7 +707,7 @@ exports[`NavList renders with groups 1`] = ` @media (forced-colors:active) { .c6:focus, .c6:focus-visible, - .c6 > a:focus-visible { + .c6 > a.focus-visible { outline: solid 1px transparent !important; } } @@ -720,7 +720,7 @@ 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; @@ -736,7 +736,7 @@ exports[`NavList renders with groups 1`] = ` @media (forced-colors:active) { .c11:focus, .c11:focus-visible, - .c11 > a:focus-visible { + .c11 > a.focus-visible { outline: solid 1px transparent !important; } } @@ -1162,7 +1162,7 @@ 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; @@ -1178,7 +1178,7 @@ exports[`NavList.Item with NavList.SubNav does not have active styles if SubNav @media (forced-colors:active) { .c11:focus, .c11:focus-visible, - .c11 > a:focus-visible { + .c11 > a.focus-visible { outline: solid 1px transparent !important; } } @@ -1191,7 +1191,7 @@ 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; @@ -1207,7 +1207,7 @@ exports[`NavList.Item with NavList.SubNav does not have active styles if SubNav @media (forced-colors:active) { .c4:focus, .c4:focus-visible, - .c4 > a:focus-visible { + .c4 > a.focus-visible { outline: solid 1px transparent !important; } } @@ -1647,7 +1647,7 @@ 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; @@ -1663,7 +1663,7 @@ exports[`NavList.Item with NavList.SubNav has active styles if SubNav contains t @media (forced-colors:active) { .c11:focus, .c11:focus-visible, - .c11 > a:focus-visible { + .c11 > a.focus-visible { outline: solid 1px transparent !important; } } @@ -1684,7 +1684,7 @@ 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; @@ -1700,7 +1700,7 @@ exports[`NavList.Item with NavList.SubNav has active styles if SubNav contains t @media (forced-colors:active) { .c4:focus, .c4:focus-visible, - .c4 > a:focus-visible { + .c4 > a.focus-visible { outline: solid 1px transparent !important; } } diff --git a/packages/react/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap b/packages/react/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap index 370ff76f305..a67661a799a 100644 --- a/packages/react/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap +++ b/packages/react/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap @@ -771,7 +771,7 @@ 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; @@ -787,7 +787,7 @@ exports[`snapshots renders a menu that contains an item to add to the menu 1`] = @media (forced-colors:active) { .c3:focus, .c3:focus-visible, - .c3 > a:focus-visible { + .c3 > a.focus-visible { outline: solid 1px transparent !important; } } @@ -1524,7 +1524,7 @@ 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; @@ -1540,7 +1540,7 @@ exports[`snapshots renders a multiselect input 1`] = ` @media (forced-colors:active) { .c3:focus, .c3:focus-visible, - .c3 > a:focus-visible { + .c3 > a.focus-visible { outline: solid 1px transparent !important; } } @@ -2336,7 +2336,7 @@ 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; @@ -2352,7 +2352,7 @@ exports[`snapshots renders a multiselect input with selected menu items 1`] = ` @media (forced-colors:active) { .c3:focus, .c3:focus-visible, - .c3 > a:focus-visible { + .c3 > a.focus-visible { outline: solid 1px transparent !important; } } @@ -2365,7 +2365,7 @@ 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; @@ -2381,7 +2381,7 @@ exports[`snapshots renders a multiselect input with selected menu items 1`] = ` @media (forced-colors:active) { .c8:focus, .c8:focus-visible, - .c8 > a:focus-visible { + .c8 > a.focus-visible { outline: solid 1px transparent !important; } } @@ -3015,7 +3015,7 @@ 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; @@ -3031,7 +3031,7 @@ exports[`snapshots renders a single select input 1`] = ` @media (forced-colors:active) { .c3:focus, .c3:focus-visible, - .c3 > a:focus-visible { + .c3 > a.focus-visible { outline: solid 1px transparent !important; } } @@ -3471,7 +3471,7 @@ 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; @@ -3487,7 +3487,7 @@ exports[`snapshots renders with a custom text input component 1`] = ` @media (forced-colors:active) { .c3:focus, .c3:focus-visible, - .c3 > a:focus-visible { + .c3 > a.focus-visible { outline: solid 1px transparent !important; } }