Merge 73b3995 into f86692f

jamesplease · Jun 17, 2021 · 6d1044a · 6d1044a
2 parents f86692f + 73b3995
commit 6d1044a
Show file tree

Hide file tree

Showing 2 changed files with 413 additions and 30 deletions.
diff --git a/src/tests/focus-trap.test.js b/src/tests/focus-trap.test.js
@@ -191,8 +191,106 @@ describe('Focus Traps', () => {
 
     expect(focusStore.getState().focusedNodeId).toEqual('nodeB-A');
 
+    // Now we test that the focus trap restores focus
+    fireEvent.keyDown(window, {
+      code: 'ArrowRight',
+      key: 'ArrowRight',
+    });
+
+    expect(focusStore.getState().focusedNodeId).toEqual('nodeB-B');
+
     setFocus('nodeA');
     expect(focusStore.getState().focusedNodeId).toEqual('nodeA-A-A');
+
+    setFocus('nodeB');
+    expect(focusStore.getState().focusedNodeId).toEqual('nodeB-B');
+  });
+
+  it('supports restoreTrapFocusHierarchy=false', () => {
+    let focusStore;
+    let setFocus;
+
+    function TestComponent() {
+      focusStore = useFocusStoreDangerously();
+      setFocus = useSetFocus();
+
+      return (
+        <FocusNode focusId="testRoot">
+          <FocusNode focusId="nodeA" data-testid="nodeA">
+            <FocusNode focusId="nodeA-A" data-testid="nodeA-A">
+              <FocusNode focusId="nodeA-A-A" data-testid="nodeA-A-A">
+                A
+              </FocusNode>
+            </FocusNode>
+            <FocusNode focusId="nodeA-B" data-testid="nodeA-B" />
+          </FocusNode>
+          <FocusNode
+            focusId="nodeB"
+            data-testid="nodeB"
+            isTrap
+            restoreTrapFocusHierarchy={false}>
+            <FocusNode focusId="nodeB-A" data-testid="nodeB-A" />
+            <FocusNode focusId="nodeB-B" data-testid="nodeB-B" />
+          </FocusNode>
+        </FocusNode>
+      );
+    }
+
+    render(
+      <FocusRoot>
+        <TestComponent />
+      </FocusRoot>
+    );
+
+    expect(focusStore.getState().focusedNodeId).toEqual('nodeA-A-A');
+    setFocus('nodeB');
+    expect(focusStore.getState().focusedNodeId).toEqual('nodeB-A');
+
+    fireEvent.keyDown(window, {
+      code: 'ArrowLeft',
+      key: 'ArrowLeft',
+    });
+
+    fireEvent.keyDown(window, {
+      code: 'ArrowLeft',
+      key: 'ArrowLeft',
+    });
+
+    fireEvent.keyDown(window, {
+      code: 'ArrowLeft',
+      key: 'ArrowLeft',
+    });
+
+    fireEvent.keyDown(window, {
+      code: 'ArrowLeft',
+      key: 'ArrowLeft',
+    });
+
+    fireEvent.keyDown(window, {
+      code: 'ArrowLeft',
+      key: 'ArrowLeft',
+    });
+
+    fireEvent.keyDown(window, {
+      code: 'ArrowLeft',
+      key: 'ArrowLeft',
+    });
+
+    expect(focusStore.getState().focusedNodeId).toEqual('nodeB-A');
+
+    // Now we test that the focus trap does NOT restore focus
+    fireEvent.keyDown(window, {
+      code: 'ArrowRight',
+      key: 'ArrowRight',
+    });
+
+    expect(focusStore.getState().focusedNodeId).toEqual('nodeB-B');
+
+    setFocus('nodeA');
+    expect(focusStore.getState().focusedNodeId).toEqual('nodeA-A-A');
+
+    setFocus('nodeB');
+    expect(focusStore.getState().focusedNodeId).toEqual('nodeB-A');
   });
 
   it('cannot be arrowed into when its deeply nested', () => {
@@ -242,4 +340,95 @@ describe('Focus Traps', () => {
 
     expect(focusStore.getState().focusedNodeId).toEqual('nodeA-B');
   });
+
+  it('behaves well with grids', () => {
+    let focusStore;
+    let setFocus;
+
+    function TestComponent() {
+      focusStore = useFocusStoreDangerously();
+      setFocus = useSetFocus();
+
+      return (
+        <FocusNode focusId="testRoot">
+          <FocusNode focusId="nodeA">
+            <FocusNode focusId="nodeA-A">
+              <FocusNode focusId="nodeA-A-A">A</FocusNode>
+            </FocusNode>
+            <FocusNode focusId="nodeA-B" />
+          </FocusNode>
+          <FocusNode focusId="gridRoot" isTrap isGrid>
+            <FocusNode focusId="gridRow1">
+              <FocusNode focusId="gridItem1-1" />
+              <FocusNode focusId="gridItem1-2" />
+            </FocusNode>
+            <FocusNode focusId="gridRow2">
+              <FocusNode focusId="gridItem2-1" />
+              <FocusNode focusId="gridItem2-2" />
+            </FocusNode>
+          </FocusNode>
+        </FocusNode>
+      );
+    }
+
+    render(
+      <FocusRoot>
+        <TestComponent />
+      </FocusRoot>
+    );
+
+    expect(focusStore.getState().focusedNodeId).toEqual('nodeA-A-A');
+    setFocus('gridRoot');
+    expect(focusStore.getState().focusedNodeId).toEqual('gridItem1-1');
+    expect(focusStore.getState().focusHierarchy).toEqual([
+      'root',
+      'testRoot',
+      'gridRoot',
+      'gridRow1',
+      'gridItem1-1',
+    ]);
+
+    fireEvent.keyDown(window, {
+      code: 'ArrowLeft',
+      key: 'ArrowLeft',
+    });
+
+    expect(focusStore.getState().focusedNodeId).toEqual('gridItem1-1');
+    expect(focusStore.getState().focusHierarchy).toEqual([
+      'root',
+      'testRoot',
+      'gridRoot',
+      'gridRow1',
+      'gridItem1-1',
+    ]);
+
+    fireEvent.keyDown(window, {
+      code: 'ArrowRight',
+      key: 'ArrowRight',
+    });
+
+    expect(focusStore.getState().focusedNodeId).toEqual('gridItem1-2');
+    expect(focusStore.getState().focusHierarchy).toEqual([
+      'root',
+      'testRoot',
+      'gridRoot',
+      'gridRow1',
+      'gridItem1-2',
+    ]);
+
+    // We move focus out of the trap, and then back in, to ensure that the position
+    // is retained
+    setFocus('nodeA');
+    expect(focusStore.getState().focusedNodeId).toEqual('nodeA-A-A');
+
+    setFocus('gridRoot');
+    expect(focusStore.getState().focusedNodeId).toEqual('gridItem1-2');
+    expect(focusStore.getState().focusHierarchy).toEqual([
+      'root',
+      'testRoot',
+      'gridRoot',
+      'gridRow1',
+      'gridItem1-2',
+    ]);
+  });
 });