fix(Tree): fix focus styles (#1912)

* fix focus styles * add static Item to Tree * add screener tests for focus * fix selector * fix the selector better * removed unnecessary static item * change selector in screener tests * move all into a single test * change the test to allow all kb interactions * revert unneeded change * changelog (cherry picked from commit 2a9989e)
microsoft · Sep 13, 2019 · ec58463 · ec58463
1 parent 93cdff7
commit ec58463
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 5 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -20,6 +20,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 ### Fixes
 - Fix `Menu` and `Submenu` to use correct indicator icon and have correct width behavior [redlines] @bcalvery ([#1831](https://github.com/stardust-ui/react/pull/1831))
 - Fix order of applying unhandled props and key handlers @jurokapsiar ([#1901](https://github.com/stardust-ui/react/pull/1901))
+- Fix focus styles for `TreeItem` and `HierarchicalTreeItem` @silviuavram ([#1912](https://github.com/stardust-ui/react/pull/1912))
 
 ### Features
 - Add `navigable` `List` variant @jurokapsiar ([#1904](https://github.com/stardust-ui/react/pull/1904))

diff --git a/docs/src/examples/components/Tree/Types/TreeExample.shorthand.steps.ts b/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
diff --git a/packages/react/src/themes/teams/components/HierarchicalTree/hierarchicalTreeItemStyles.ts b/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'],
       },
     },
   }),

diff --git a/packages/react/src/themes/teams/components/Tree/treeItemStyles.ts b/packages/react/src/themes/teams/components/Tree/treeItemStyles.ts
@@ -8,11 +8,12 @@ const treeItemStyles: ComponentSlotStylesInput<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'],
       },
     },
   }),