Adding up & down key navigation (accessibility) feature for Tree component (#1219)

* Adding up & down key accessibility feature for Tree component

* Updating changelog

Author: priyankar205

CHANGELOG.md

@@ -21,6 +21,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 - Fix overflowing focus outline for `Grid` items for Teams theme @Bugaa92 ([#1195](https://github.com/stardust-ui/react/pull/1195))
 - Fix routing for accessibility documentation @sophieH29 ([#1208](https://github.com/stardust-ui/react/pull/1208))
 - Fix `content` prop type in `Dialog` @layershifter ([#1212](https://github.com/stardust-ui/react/pull/1212))
+- Add `keyboard` up & down key controls for the `Tree` component @priyankar205 ([#1219]https://github.com/stardust-ui/react/pull/1219)
 
 ### Features
 - Add `Embed` and `Video` components @stuartlong ([#1108](https://github.com/stardust-ui/react/pull/1108))

packages/react/src/components/Tree/Tree.tsx

@@ -15,7 +15,7 @@ import {
 } from '../../lib'
 import { ShorthandValue, ShorthandRenderFunction, ReactProps } from '../../types'
 import { Accessibility } from '../../lib/accessibility/types'
-import { defaultBehavior } from '../../lib/accessibility'
+import { treeBehavior } from '../../lib/accessibility'
 
 export interface TreeSlotClassNames {
   item: string
@@ -88,7 +88,7 @@ class Tree extends AutoControlledComponent<ReactProps<TreeProps>, TreeState> {
 
   public static defaultProps = {
     as: 'ul',
-    accessibility: defaultBehavior,
+    accessibility: treeBehavior,
   }
 
   static autoControlledProps = ['activeIndex']

packages/react/src/components/Tree/TreeItem.tsx

@@ -127,6 +127,7 @@ class TreeItem extends UIComponent<ReactProps<TreeItemProps>> {
         {open &&
           Tree.create(items, {
             defaultProps: {
+              accessibility: defaultBehavior,
               className: TreeItem.slotClassNames.subtree,
               exclusive,
               renderItemTitle,

packages/react/src/lib/accessibility/Behaviors/Tree/treeBehavior.ts

@@ -0,0 +1,22 @@
+import { Accessibility, FocusZoneMode } from '../../types'
+import { FocusZoneDirection } from '../../FocusZone'
+
+/**
+ * @specification
+ * Embeds FocusZone into component allowing circular arrow key navigation through the children of the component.
+ */
+const treeBehavior: Accessibility = (props: any) => ({
+  attributes: {
+    root: {},
+  },
+  focusZone: {
+    mode: FocusZoneMode.Embed,
+    props: {
+      isCircularNavigation: true,
+      preventDefaultWhenHandled: true,
+      direction: FocusZoneDirection.vertical,
+    },
+  },
+})
+
+export default treeBehavior

packages/react/src/lib/accessibility/index.ts

@@ -30,6 +30,7 @@ export { default as popupAutoFocusBehavior } from './Behaviors/Popup/popupAutoFo
 export { default as chatBehavior } from './Behaviors/Chat/chatBehavior'
 export { default as chatMessageBehavior } from './Behaviors/Chat/chatMessageBehavior'
 export { default as gridBehavior } from './Behaviors/Grid/gridBehavior'
+export { default as treeBehavior } from './Behaviors/Tree/treeBehavior'
 export { default as treeTitleBehavior } from './Behaviors/Tree/treeTitleBehavior'
 export { default as dialogBehavior } from './Behaviors/Dialog/dialogBehavior'
 export { default as statusBehavior } from './Behaviors/Status/statusBehavior'

packages/react/test/specs/behaviors/behavior-test.tsx

@@ -31,6 +31,7 @@ import {
   toggleButtonBehavior,
   toolbarBehavior,
   toolbarButtonBehavior,
+  treeBehavior,
   treeTitleBehavior,
   gridBehavior,
   statusBehavior,
@@ -70,6 +71,7 @@ testHelper.addBehavior('toolbarBehavior', toolbarBehavior)
 testHelper.addBehavior('toggleButtonBehavior', toggleButtonBehavior)
 testHelper.addBehavior('toolbarButtonBehavior', toolbarButtonBehavior)
 testHelper.addBehavior('treeTitleBehavior', treeTitleBehavior)
+testHelper.addBehavior('treeBehavior', treeBehavior)
 testHelper.addBehavior('gridBehavior', gridBehavior)
 testHelper.addBehavior('dialogBehavior', dialogBehavior)
 testHelper.addBehavior('statusBehavior', statusBehavior)