fix(TreeView): add outline transparent for visible focus indicators (#…

…2433) * fix(TreeView): add outline transparent for visible focus indicators * fix(TreeView): update hover styles for WHCM * chore: add changeset
primer · Oct 14, 2022 · a08997b · a08997b
1 parent 76a3115
commit a08997b
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 2 deletions.
diff --git a/.changeset/large-bulldogs-dance.md b/.changeset/large-bulldogs-dance.md
@@ -0,0 +1,5 @@
+---
+'@primer/react': patch
+---
+
+Update TreeView hover and focus styles to work in Windows High Contrast Mode
diff --git a/src/TreeView/TreeView.tsx b/src/TreeView/TreeView.tsx
@@ -216,7 +216,11 @@ const Item: React.FC<TreeViewItemProps> = ({
             borderRadius: 2,
             cursor: 'pointer',
             '&:hover': {
-              backgroundColor: 'actionListItem.default.hoverBg'
+              backgroundColor: 'actionListItem.default.hoverBg',
+              '@media (forced-colors: active)': {
+                outline: '2px solid transparent',
+                outlineOffset: -2
+              }
             },
             '@media (pointer: coarse)': {
               '--toggle-width': '1.5rem', // 24px
@@ -227,7 +231,11 @@ const Item: React.FC<TreeViewItemProps> = ({
             // 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) => `inset 0 0 0 2px ${theme.colors.accent.emphasis}`
+              boxShadow: (theme: Theme) => `inset 0 0 0 2px ${theme.colors.accent.emphasis}`,
+              '@media (forced-colors: active)': {
+                outline: '2px solid SelectedItem',
+                outlineOffset: -2
+              }
             },
             '[role=treeitem][aria-current=true] > &:is(div)': {
               bg: 'actionListItem.default.selectedBg',