[TreeView] Have down arrow go to first child (#2840)

src/components/TreeView/TreeNavigator.tsx

@@ -9,7 +9,7 @@ export interface TreeNavigatorProps {
 }
 
 export default function TreeNavigator(props: TreeNavigatorProps): ReactElement {
-  const { getNextSibling, getOnlyChild, getParent, getPrevSibling } =
+  const { getFirstChild, getNextSibling, getParent, getPrevSibling } =
     useTreeNavigation(props);
 
   // Navigate tree via arrow keys.
@@ -23,7 +23,7 @@ export default function TreeNavigator(props: TreeNavigatorProps): ReactElement {
       case Key.ArrowUp:
         return getParent();
       case Key.ArrowDown:
-        return getOnlyChild();
+        return getFirstChild();
     }
   };
 
@@ -43,8 +43,8 @@ export default function TreeNavigator(props: TreeNavigatorProps): ReactElement {
 }
 
 interface TreeNavigation {
+  getFirstChild: () => SemanticDomain | undefined;
   getNextSibling: () => SemanticDomain | undefined;
-  getOnlyChild: () => SemanticDomain | undefined;
   getParent: () => SemanticDomain | undefined;
   getPrevSibling: () => SemanticDomain | undefined;
 }
@@ -53,9 +53,8 @@ interface TreeNavigation {
 export function useTreeNavigation(props: TreeNavigatorProps): TreeNavigation {
   const dom = props.currentDomain;
   return {
+    getFirstChild: () => (dom.children.length ? dom.children[0] : undefined),
     getNextSibling: () => dom.next,
-    getOnlyChild: () =>
-      dom.children.length === 1 ? dom.children[0] : undefined,
     getParent: () => dom.parent,
     getPrevSibling: () => dom.previous,
   };

src/components/TreeView/tests/TreeNavigator.test.tsx

@@ -18,7 +18,12 @@ const headNode: TreeNavigatorProps = {
   currentDomain: domMap[mapIds.head],
   animate: MOCK_ANIMATE,
 };
-// Current domain with a parent, two siblings, and multiple kids
+// Current domain with a parent, no siblings, three kid
+const parentOfThree: TreeNavigatorProps = {
+  currentDomain: domMap[mapIds.parent],
+  animate: MOCK_ANIMATE,
+};
+// Current domain with a parent, two siblings, three kids
 const twoBrothersManyKids: TreeNavigatorProps = {
   currentDomain: domMap[mapIds.middleKid],
   animate: MOCK_ANIMATE,
@@ -56,26 +61,19 @@ describe("TreeNavigator", () => {
       expect(current.getPrevSibling()).toBeUndefined();
     });
 
-    it("getOnlyChild returns undefined if no children", () => {
+    it("getFirstChild returns undefined if no children", () => {
       const { current } = renderHook(() =>
         useTreeNavigation(noBrothersNoKids)
       ).result;
-      expect(current.getOnlyChild()).toBeUndefined();
+      expect(current.getFirstChild()).toBeUndefined();
     });
 
-    it("getOnlyChild returns undefined if more than one child", () => {
+    it("getFirstChild returns first if at least one child", () => {
       const { current } = renderHook(() =>
-        useTreeNavigation(twoBrothersManyKids)
+        useTreeNavigation(parentOfThree)
       ).result;
-      expect(current.getOnlyChild()).toBeUndefined();
-    });
-
-    it("getOnlyChild returns child if only one", () => {
-      const { current } = renderHook(() =>
-        useTreeNavigation(noBrothersOneKid)
-      ).result;
-      expect(current.getOnlyChild()).toEqual(
-        semDomFromTreeNode(domMap[mapIds.depth4])
+      expect(current.getFirstChild()).toEqual(
+        semDomFromTreeNode(domMap[mapIds.firstKid])
       );
     });
 
@@ -127,10 +125,10 @@ describe("TreeNavigator", () => {
       const expectedDom = semDomFromTreeNode(domMap[mapIds.parent]);
       expect(MOCK_ANIMATE).toHaveBeenCalledWith(expectedDom);
     });
-    it("down arrow does nothing when multiple kids", () => {
+    it("down arrow moves when multiple kids", () => {
       render(<TreeNavigator {...twoBrothersManyKids} />);
       simulateKey(Key.ArrowDown);
-      expect(MOCK_ANIMATE).toHaveBeenCalledTimes(0);
+      expect(MOCK_ANIMATE).toHaveBeenCalledTimes(1);
     });
     it("down arrow moves to only child", () => {
       render(<TreeNavigator {...noBrothersOneKid} />);