From f1ca64d0d5e51aae8a6b36bb4d7f99a9ca3d2715 Mon Sep 17 00:00:00 2001 From: Cole Bemis Date: Mon, 26 Sep 2022 14:45:24 -0700 Subject: [PATCH 1/4] Update active descendant styles --- src/TreeView/TreeView.tsx | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/src/TreeView/TreeView.tsx b/src/TreeView/TreeView.tsx index 5c752e62666..4b53af86001 100644 --- a/src/TreeView/TreeView.tsx +++ b/src/TreeView/TreeView.tsx @@ -89,7 +89,7 @@ const Item: React.FC = ({ onToggle, children }) => { - const {setActiveDescendant} = React.useContext(RootContext) + const {activeDescendant, setActiveDescendant} = React.useContext(RootContext) const itemId = useSSRSafeId() const labelId = useSSRSafeId() const itemRef = React.useRef(null) @@ -182,8 +182,9 @@ const Item: React.FC = ({ '&:hover': { backgroundColor: 'actionListItem.default.hoverBg' }, - [`[role=tree][aria-activedescendant="${itemId}"]:focus-visible &`]: { - boxShadow: (theme: Theme) => `0 0 0 2px ${theme.colors.accent.emphasis}` + [`[role=tree]:focus-visible &`]: { + boxShadow: (theme: Theme) => + activeDescendant === itemId ? `0 0 0 2px ${theme.colors.accent.emphasis}` : undefined }, '[role=treeitem][aria-current=true] > &': { bg: 'actionListItem.default.selectedBg', From 5e420640c33bd236515ed1de6c8338f3001015bb Mon Sep 17 00:00:00 2001 From: Cole Bemis Date: Mon, 26 Sep 2022 15:16:01 -0700 Subject: [PATCH 2/4] Update CSS selectors --- src/TreeView/TreeView.tsx | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/src/TreeView/TreeView.tsx b/src/TreeView/TreeView.tsx index 4b53af86001..81487061c06 100644 --- a/src/TreeView/TreeView.tsx +++ b/src/TreeView/TreeView.tsx @@ -89,7 +89,7 @@ const Item: React.FC = ({ onToggle, children }) => { - const {activeDescendant, setActiveDescendant} = React.useContext(RootContext) + const {setActiveDescendant} = React.useContext(RootContext) const itemId = useSSRSafeId() const labelId = useSSRSafeId() const itemRef = React.useRef(null) @@ -182,11 +182,10 @@ const Item: React.FC = ({ '&:hover': { backgroundColor: 'actionListItem.default.hoverBg' }, - [`[role=tree]:focus-visible &`]: { - boxShadow: (theme: Theme) => - activeDescendant === itemId ? `0 0 0 2px ${theme.colors.accent.emphasis}` : undefined + [`[role=tree][aria-activedescendant="${itemId}"]:focus-visible #${itemId} > &:is(div)`]: { + boxShadow: (theme: Theme) => `0 0 0 2px ${theme.colors.accent.emphasis}` }, - '[role=treeitem][aria-current=true] > &': { + '[role=treeitem][aria-current=true] > &:is(div)': { bg: 'actionListItem.default.selectedBg', '&::after': { position: 'absolute', From b6a0c638ef28c1533bd30937d7c8406107b390d3 Mon Sep 17 00:00:00 2001 From: Cole Bemis Date: Mon, 26 Sep 2022 15:17:13 -0700 Subject: [PATCH 3/4] Create brown-bees-tap.md --- .changeset/brown-bees-tap.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/brown-bees-tap.md diff --git a/.changeset/brown-bees-tap.md b/.changeset/brown-bees-tap.md new file mode 100644 index 00000000000..6dd5c496416 --- /dev/null +++ b/.changeset/brown-bees-tap.md @@ -0,0 +1,5 @@ +--- +"@primer/react": patch +--- + +TreeView: Fix focus styles in styled-components v5.2+ From 1df8304b1a99976cef3b231f0b30a8860dca2e38 Mon Sep 17 00:00:00 2001 From: Cole Bemis Date: Mon, 26 Sep 2022 16:08:44 -0700 Subject: [PATCH 4/4] Add comment about CSS selectors --- src/TreeView/TreeView.tsx | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/TreeView/TreeView.tsx b/src/TreeView/TreeView.tsx index 81487061c06..0659b9412c8 100644 --- a/src/TreeView/TreeView.tsx +++ b/src/TreeView/TreeView.tsx @@ -182,6 +182,10 @@ const Item: React.FC = ({ '&:hover': { backgroundColor: 'actionListItem.default.hoverBg' }, + // WARNING: styled-components v5.2 introduced a bug that changed + // how it expands `&` in CSS selectors. The following selectors + // are unnecessarily specific to work around that styled-components bug. + // Reference issue: https://github.com/styled-components/styled-components/issues/3265 [`[role=tree][aria-activedescendant="${itemId}"]:focus-visible #${itemId} > &:is(div)`]: { boxShadow: (theme: Theme) => `0 0 0 2px ${theme.colors.accent.emphasis}` },