TreeView: Fix focus styles in styled-components v5.2+ (#2375)

* Update active descendant styles * Update CSS selectors * Create brown-bees-tap.md * Add comment about CSS selectors
primer · Sep 26, 2022 · 96f3b8a · 96f3b8a
1 parent 143286e
commit 96f3b8a
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 2 deletions.
diff --git a/.changeset/brown-bees-tap.md b/.changeset/brown-bees-tap.md
@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+TreeView: Fix focus styles in styled-components v5.2+
diff --git a/src/TreeView/TreeView.tsx b/src/TreeView/TreeView.tsx
@@ -182,10 +182,14 @@ const Item: React.FC<TreeViewItemProps> = ({
             '&:hover': {
               backgroundColor: 'actionListItem.default.hoverBg'
             },
-            [`[role=tree][aria-activedescendant="${itemId}"]:focus-visible &`]: {
+            // 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}`
             },
-            '[role=treeitem][aria-current=true] > &': {
+            '[role=treeitem][aria-current=true] > &:is(div)': {
               bg: 'actionListItem.default.selectedBg',
               '&::after': {
                 position: 'absolute',