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

Author: joshblack

.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

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',