fix(Tree): fix focus styles

CHANGELOG.md

@@ -26,6 +26,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 - Fix handling of `onMouseEnter` prop in `ChatMessage` @layershifter ([#1903](https://github.com/stardust-ui/react/pull/1903))
 - Fix `CreateShorthandOptions` should be typed @lucivpav ([#1886](https://github.com/stardust-ui/react/pull/1886))
 - Add `shadowLevel1Dark` in Teams themes @notandrew ([#1887](https://github.com/stardust-ui/react/pull/1887))
+- Fix focus styles for `TreeItem` and `HierarchicalTreeItem` @silviuavram ([#1912](https://github.com/stardust-ui/react/pull/1912))
 - When merging themes use deep merge for site and component variables @miroslavstastny ([#1907](https://github.com/stardust-ui/react/pull/1907))
 
 ### Features

docs/src/examples/components/Tree/Types/TreeExample.shorthand.steps.ts

@@ -0,0 +1,26 @@
+import { TreeItem, TreeTitle } from '@stardust-ui/react'
+
+const selectors = {
+  treeItem: (itemIndex: number) => `.${TreeItem.className}:nth-of-type(${itemIndex})`,
+  treeTitle: (itemIndex: number) =>
+    `.${TreeItem.className}:nth-of-type(${itemIndex}) .${TreeTitle.className}`,
+}
+
+const config: ScreenerTestsConfig = {
+  themes: ['teams', 'teamsDark', 'teamsHighContrast'],
+  steps: [
+    (builder, keys) =>
+      builder
+        .click(selectors.treeTitle(1))
+        .snapshot('Focus on click subtree')
+        .keys(selectors.treeItem(2), keys.downArrow)
+        .snapshot('Focus on keyboard subtree')
+        .click(selectors.treeTitle(2))
+        .keys(selectors.treeItem(2), keys.downArrow)
+        .snapshot('Focus on keyboard leaf')
+        .click(selectors.treeTitle(4))
+        .snapshot('Focus on click leaf'),
+  ],
+}
+
+export default config

packages/react/src/themes/teams/components/HierarchicalTree/hierarchicalTreeItemStyles.ts

@@ -7,11 +7,11 @@ const hierarchicalTreeItemStyles = {
   root: ({ theme: { siteVariables } }): ICSSInJSStyle => ({
     listStyleType: 'none',
     padding: `0 0 0 ${pxToRem(1)}`,
-    ':focus': {
-      outline: 0,
+    ...getBorderFocusStyles({ siteVariables })[':focus'],
+    ':focus-visible': {
       [`> .${HierarchicalTreeTitle.className}`]: {
         position: 'relative',
-        ...getBorderFocusStyles({ siteVariables }),
+        ...getBorderFocusStyles({ siteVariables })[':focus-visible'],
       },
     },
   }),

packages/react/src/themes/teams/components/Tree/treeItemStyles.ts

@@ -8,11 +8,12 @@ const treeItemStyles: ComponentSlotStylesPrepared<TreeItemProps> = {
   root: ({ theme: { siteVariables }, props: p }): ICSSInJSStyle => ({
     listStyleType: 'none',
     padding: `0 0 0 ${pxToRem(1 + (p.level - 1) * 10)}`,
-    ':focus': {
+    ...getBorderFocusStyles({ siteVariables })[':focus'],
+    ':focus-visible': {
       outline: 0,
       [`> .${TreeTitle.className}`]: {
         position: 'relative',
-        ...getBorderFocusStyles({ siteVariables }),
+        ...getBorderFocusStyles({ siteVariables })[':focus-visible'],
       },
     },
   }),