feat(Accessibility): Split action handlers with "OR" condition

CHANGELOG.md

@@ -20,6 +20,9 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 ### BREAKING CHANGES
 -  Add `trapFocus` and `autoFocus` props to `Popup` and remove `popupFocusTrapBehavior` and `popupAutoFocusBehavior` @sophieH29 ([#1565](https://github.com/stardust-ui/react/pull/1565))
 
+### Features
+- Split action handlers with "OR" condition in accessibility behaviors @sophieH29 ([#1622](https://github.com/stardust-ui/react/pull/1622))
+
 <!--------------------------------[ v0.34.1 ]------------------------------- -->
 ## [v0.34.1](https://github.com/stardust-ui/react/tree/v0.34.1) (2019-07-11)
 [Compare changes](https://github.com/stardust-ui/react/compare/v0.34.0...v0.34.1)

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

@@ -115,40 +115,52 @@ class TreeItem extends UIComponent<WithAsProp<TreeItemProps>> {
 
       _.invoke(this.props, 'onTitleClick', e, this.props)
     },
-    collapseOrReceiveFocus: e => {
-      const { items, open } = this.props
-
+    receiveFocus: e => {
       e.preventDefault()
+      e.stopPropagation()
 
       // Focuses the title if the event comes from a child item.
-      if (e.currentTarget !== e.target && items && items.length) {
-        e.stopPropagation()
+      if (this.eventComesFromChildItem(e)) {
         this.itemRef.current.focus()
-      } else if (open) {
-        e.stopPropagation()
-        _.invoke(this.props, 'onTitleClick', e, this.props)
       }
     },
-    expandOrPassFocus: e => {
-      const { open } = this.props
+    collapse: e => {
+      e.preventDefault()
+      e.stopPropagation()
 
+      // Handle click on title if the keyboard event was dispatched on that title
+      if (!this.eventComesFromChildItem(e)) {
+        this.handleTitleClick(e)
+      }
+    },
+    expand: e => {
       e.preventDefault()
       e.stopPropagation()
 
-      if (!open) {
-        _.invoke(this.props, 'onTitleClick', e, this.props)
-      } else {
-        const element = getFirstFocusable(this.treeRef.current, this.treeRef.current, true)
-        if (element) {
-          element.focus()
-        }
+      this.handleTitleClick(e)
+    },
+    focusSubtree: e => {
+      e.preventDefault()
+      e.stopPropagation()
+
+      const element = getFirstFocusable(this.treeRef.current, this.treeRef.current, true)
+      if (element) {
+        element.focus()
       }
     },
   }
 
+  eventComesFromChildItem = e => {
+    return e.currentTarget !== e.target
+  }
+
+  handleTitleClick = e => {
+    _.invoke(this.props, 'onTitleClick', e, this.props)
+  }
+
   handleTitleOverrides = (predefinedProps: TreeTitleProps) => ({
     onClick: (e, titleProps) => {
-      _.invoke(this.props, 'onTitleClick', e, this.props)
+      this.handleTitleClick(e)
       _.invoke(predefinedProps, 'onClick', e, titleProps)
     },
   })

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

@@ -9,8 +9,11 @@ import { IS_FOCUSABLE_ATTRIBUTE } from '../../FocusZone/focusUtilities'
  * Adds 'tabIndex' as '-1' if the item is not a leaf.
  *
  * @specification
- * Triggers 'collapseOrReceiveFocus' action with 'ArrowLeft' on 'root'.
- * Triggers 'expandOrPassFocus' action with 'ArrowRight' on 'root'.
+ * Triggers 'performClick' action with 'Enter' or 'Spacebar' on 'root'.
+ * Triggers 'receiveFocus' action with 'ArrowLeft' on 'root', when has an opened subtree.
+ * Triggers 'collapse' action with 'ArrowLeft' on 'root', when has an opened subtree.
+ * Triggers 'expand' action with 'ArrowRight' on 'root', when has a closed subtree.
+ * Triggers 'focusSubtree' action with 'ArrowRight' on 'root', when has an opened subtree.
  */
 const treeItemBehavior: Accessibility<TreeItemBehaviorProps> = props => ({
   attributes: {
@@ -30,12 +33,22 @@ const treeItemBehavior: Accessibility<TreeItemBehaviorProps> = props => ({
       performClick: {
         keyCombinations: [{ keyCode: keyboardKey.Enter }, { keyCode: keyboardKey.Spacebar }],
       },
-      collapseOrReceiveFocus: {
-        keyCombinations: [{ keyCode: keyboardKey.ArrowLeft }],
-      },
-      expandOrPassFocus: {
-        keyCombinations: [{ keyCode: keyboardKey.ArrowRight }],
-      },
+      ...(isSubtreeOpen(props) && {
+        receiveFocus: {
+          keyCombinations: [{ keyCode: keyboardKey.ArrowLeft }],
+        },
+        collapse: {
+          keyCombinations: [{ keyCode: keyboardKey.ArrowLeft }],
+        },
+        focusSubtree: {
+          keyCombinations: [{ keyCode: keyboardKey.ArrowRight }],
+        },
+      }),
+      ...(!isSubtreeOpen(props) && {
+        expand: {
+          keyCombinations: [{ keyCode: keyboardKey.ArrowRight }],
+        },
+      }),
     },
   },
 })
@@ -47,4 +60,10 @@ export type TreeItemBehaviorProps = {
   open?: boolean
 }
 
+/** Checks if current tree item has a subtree and it is opened */
+const isSubtreeOpen = (props: TreeItemBehaviorProps): boolean => {
+  const { items, open } = props
+  return !!(items && items.length && open)
+}
+
 export default treeItemBehavior

packages/react/test/specs/behaviors/testDefinitions.ts

@@ -463,44 +463,6 @@ definitions.push({
   },
 })
 
-/*
- * ********************** FOCUS TRAP ZONE **********************
- */
-definitions.push({
-  regexp: /Traps focus inside component/,
-  testMethod: (parameters: TestMethod) => {
-    const focusTrapZoneProps = parameters.behavior({}).focusTrap
-
-    expect(focusTrapZoneProps).toBeDefined()
-
-    if (typeof focusTrapZoneProps === 'boolean') {
-      expect(focusTrapZoneProps).toBe(true)
-    } else {
-      expect(focusTrapZoneProps).not.toBeNull()
-      expect(typeof focusTrapZoneProps).toBe('object')
-    }
-  },
-})
-
-/*
- * ********************** AUTO FOCUS ZONE **********************
- */
-definitions.push({
-  regexp: /Automatically focus the first focusable element inside component/,
-  testMethod: (parameters: TestMethod) => {
-    const autofocusZoneProps = parameters.behavior({}).autoFocus
-
-    expect(autofocusZoneProps).toBeDefined()
-
-    if (typeof autofocusZoneProps === 'boolean') {
-      expect(autofocusZoneProps).toBe(true)
-    } else {
-      expect(autofocusZoneProps).not.toBeNull()
-      expect(typeof autofocusZoneProps).toBe('object')
-    }
-  },
-})
-
 // Triggers 'click' action with 'Enter' or 'Spacebar' on 'root'.
 definitions.push({
   regexp: /Triggers '(\w+)' action with '(\S+)' or '(\S+)' on '(\w+)'\./g,
@@ -557,6 +519,32 @@ definitions.push({
   },
 })
 
+// Triggers 'receiveFocus' action with 'ArrowLeft' on 'root', when has an opened subtree.
+definitions.push({
+  regexp: /Triggers '(\w+)' action with '(\w+)' on '([\w-]+)', when has an opened subtree\./g,
+  testMethod: (parameters: TestMethod) => {
+    const [action, key, elementToPerformAction] = [...parameters.props]
+    const propertyOpenedSubtree = { open: true, items: [{ a: 1 }] }
+    const expectedKeyNumberVertical = parameters.behavior(propertyOpenedSubtree).keyActions[
+      elementToPerformAction
+    ][action].keyCombinations[0].keyCode
+    expect(expectedKeyNumberVertical).toBe(keyboardKey[key])
+  },
+})
+
+// Triggers 'expand' action with 'ArrowRight' on 'root', when has a closed subtree.
+definitions.push({
+  regexp: /Triggers '(\w+)' action with '(\w+)' on '([\w-]+)', when has a closed subtree\./g,
+  testMethod: (parameters: TestMethod) => {
+    const [action, key, elementToPerformAction] = [...parameters.props]
+    const propertyClosedSubtree = { open: false }
+    const expectedKeyNumberVertical = parameters.behavior(propertyClosedSubtree).keyActions[
+      elementToPerformAction
+    ][action].keyCombinations[0].keyCode
+    expect(expectedKeyNumberVertical).toBe(keyboardKey[key])
+  },
+})
+
 // Triggers 'closeMenuAndFocusTrigger' action with 'Escape' on 'wrapper', when toolbar button has submenu and it is opened.
 definitions.push({
   regexp: /Triggers '(\w+)' action with '(\w+)' on '([\w-]+)', when toolbar button has submenu and it is opened\./g,