@primer/components 31.2.0-rc.c7f73427 → 31.2.1-rc.0e01900c

package/lib/__tests__/behaviors/focusTrap.test.jsx

@@ -0,0 +1,184 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const react_2 = require("@testing-library/react");
+const focusTrap_1 = require("../../behaviors/focusTrap");
+// Since we use strict `isTabbable` checks within focus trap, we need to mock these
+// properties that Jest does not populate.
+beforeAll(() => {
+    try {
+        Object.defineProperties(HTMLElement.prototype, {
+            offsetHeight: {
+                get: () => 42
+            },
+            offsetWidth: {
+                get: () => 42
+            },
+            getClientRects: {
+                get: () => () => [42]
+            }
+        });
+    }
+    catch {
+        // ignore
+    }
+});
+it('Should initially focus the container when activated', () => {
+    const { container } = react_2.render(<div>
+      <button tabIndex={0}>Bad Apple</button>
+      <div id="trapContainer">
+        <button tabIndex={0}>Apple</button>
+        <button tabIndex={0}>Banana</button>
+        <button tabIndex={0}>Cantaloupe</button>
+      </div>
+    </div>);
+    const trapContainer = container.querySelector('#trapContainer');
+    const controller = focusTrap_1.focusTrap(trapContainer);
+    expect(document.activeElement).toEqual(trapContainer);
+    controller.abort();
+});
+it('Should initially focus the initialFocus element when specified', () => {
+    const { container } = react_2.render(<div id="trapContainer">
+      <button tabIndex={0}>Apple</button>
+      <button tabIndex={0}>Banana</button>
+      <button tabIndex={0}>Cantaloupe</button>
+    </div>);
+    const trapContainer = container.querySelector('#trapContainer');
+    const secondButton = trapContainer.querySelectorAll('button')[1];
+    const controller = focusTrap_1.focusTrap(trapContainer, secondButton);
+    expect(document.activeElement).toEqual(secondButton);
+    controller.abort();
+});
+it('Should prevent focus from exiting the trap, returns focus to previously-focused element', async () => {
+    const { container } = react_2.render(<div>
+      <div id="trapContainer">
+        <button tabIndex={0}>Apple</button>
+        <button tabIndex={0}>Banana</button>
+        <button tabIndex={0}>Cantaloupe</button>
+      </div>
+      <button id="durian" tabIndex={0}>
+        Durian
+      </button>
+    </div>);
+    const trapContainer = container.querySelector('#trapContainer');
+    const secondButton = trapContainer.querySelectorAll('button')[1];
+    const durianButton = container.querySelector('#durian');
+    const controller = focusTrap_1.focusTrap(trapContainer);
+    focus(durianButton);
+    expect(document.activeElement).toEqual(trapContainer);
+    focus(secondButton);
+    expect(document.activeElement).toEqual(secondButton);
+    focus(durianButton);
+    expect(document.activeElement).toEqual(secondButton);
+    controller.abort();
+});
+it('Should prevent focus from exiting the trap if there are no focusable children', async () => {
+    const { container } = react_2.render(<div>
+      <div id="trapContainer"></div>
+      <button id="durian" tabIndex={0}>
+        Durian
+      </button>
+    </div>);
+    const trapContainer = container.querySelector('#trapContainer');
+    const durianButton = container.querySelector('#durian');
+    const controller = focusTrap_1.focusTrap(trapContainer);
+    focus(durianButton);
+    expect(document.activeElement === durianButton).toEqual(false);
+    controller.abort();
+});
+it('Should cycle focus from last element to first element and vice-versa', async () => {
+    const { container } = react_2.render(<div>
+      <div id="trapContainer">
+        <button tabIndex={0}>Apple</button>
+        <button tabIndex={0}>Banana</button>
+        <button tabIndex={0}>Cantaloupe</button>
+      </div>
+      <button id="durian" tabIndex={0}>
+        Durian
+      </button>
+    </div>);
+    const trapContainer = container.querySelector('#trapContainer');
+    const firstButton = trapContainer.querySelector('button');
+    const lastButton = trapContainer.querySelectorAll('button')[2];
+    const controller = focusTrap_1.focusTrap(trapContainer);
+    lastButton.focus();
+    react_2.fireEvent(lastButton, new KeyboardEvent('keydown', { bubbles: true, key: 'Tab' }));
+    expect(document.activeElement).toEqual(firstButton);
+    react_2.fireEvent(firstButton, new KeyboardEvent('keydown', { bubbles: true, key: 'Tab', shiftKey: true }));
+    expect(document.activeElement).toEqual(lastButton);
+    controller.abort();
+});
+it('Should should release the trap when the signal is aborted', async () => {
+    const { container } = react_2.render(<div>
+      <div id="trapContainer">
+        <button tabIndex={0}>Apple</button>
+        <button tabIndex={0}>Banana</button>
+        <button tabIndex={0}>Cantaloupe</button>
+      </div>
+      <button id="durian" tabIndex={0}>
+        Durian
+      </button>
+    </div>);
+    const trapContainer = container.querySelector('#trapContainer');
+    const durianButton = container.querySelector('#durian');
+    const controller = focusTrap_1.focusTrap(trapContainer);
+    focus(durianButton);
+    expect(document.activeElement).toEqual(trapContainer);
+    controller.abort();
+    focus(durianButton);
+    expect(document.activeElement).toEqual(durianButton);
+});
+it('Should should release the trap when the container is removed from the DOM', async () => {
+    const { container } = react_2.render(<div>
+      <div id="trapContainer">
+        <button tabIndex={0}>Apple</button>
+      </div>
+      <button id="durian" tabIndex={0}>
+        Durian
+      </button>
+    </div>);
+    const trapContainer = container.querySelector('#trapContainer');
+    const durianButton = container.querySelector('#durian');
+    const firstButton = trapContainer.querySelector('button');
+    focusTrap_1.focusTrap(trapContainer);
+    focus(durianButton);
+    expect(document.activeElement).toEqual(trapContainer);
+    // empty trap and remove it from the DOM
+    trapContainer.removeChild(firstButton);
+    trapContainer.parentElement?.removeChild(trapContainer);
+    focus(durianButton);
+    expect(document.activeElement).toEqual(durianButton);
+});
+it('Should handle dynamic content', async () => {
+    const { container } = react_2.render(<div>
+      <div id="trapContainer">
+        <button tabIndex={0}>Apple</button>
+        <button tabIndex={0}>Banana</button>
+        <button tabIndex={0}>Cantaloupe</button>
+      </div>
+      <button id="durian" tabIndex={0}>
+        Durian
+      </button>
+    </div>);
+    const trapContainer = container.querySelector('#trapContainer');
+    const [firstButton, secondButton, thirdButton] = trapContainer.querySelectorAll('button');
+    const controller = focusTrap_1.focusTrap(trapContainer);
+    secondButton.focus();
+    trapContainer.removeChild(thirdButton);
+    react_2.fireEvent(secondButton, new KeyboardEvent('keydown', { bubbles: true, key: 'Tab' }));
+    expect(document.activeElement).toEqual(firstButton);
+    react_2.fireEvent(firstButton, new KeyboardEvent('keydown', { bubbles: true, key: 'Tab', shiftKey: true }));
+    expect(document.activeElement).toEqual(secondButton);
+    controller.abort();
+});
+/**
+ * Helper to handle firing the focusin event, which jest/JSDOM does not do for us.
+ * @param element
+ */
+function focus(element) {
+    element.focus();
+    react_2.fireEvent(element, new FocusEvent('focusin', { bubbles: true }));
+}

package/lib/__tests__/behaviors/focusZone.test.jsx

@@ -0,0 +1,406 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const react_2 = require("@testing-library/react");
+const user_event_1 = __importDefault(require("@testing-library/user-event"));
+const focusZone_1 = require("../../behaviors/focusZone");
+async function nextTick() {
+    return new Promise(resolve => setTimeout(resolve, 0));
+}
+const moveDown = () => user_event_1.default.type(document.activeElement, '{arrowdown}');
+const moveUp = () => user_event_1.default.type(document.activeElement, '{arrowup}');
+// Since we use strict `isTabbable` checks within focus trap, we need to mock these
+// properties that Jest does not populate.
+beforeAll(() => {
+    try {
+        Object.defineProperties(HTMLElement.prototype, {
+            offsetHeight: {
+                get: () => 42
+            },
+            offsetWidth: {
+                get: () => 42
+            },
+            getClientRects: {
+                get: () => () => [42]
+            }
+        });
+    }
+    catch {
+        // ignore
+    }
+});
+it('Should allow arrow keys to move focus', () => {
+    const { container } = react_2.render(<div>
+      <button tabIndex={0}>Bad Apple</button>
+      <div id="focusZone">
+        <button tabIndex={0}>Apple</button>
+        <button tabIndex={0}>Banana</button>
+        <button tabIndex={0}>Cantaloupe</button>
+      </div>
+    </div>);
+    const focusZoneContainer = container.querySelector('#focusZone');
+    const [firstButton, secondButton] = focusZoneContainer.querySelectorAll('button');
+    const controller = focusZone_1.focusZone(focusZoneContainer);
+    firstButton.focus();
+    expect(document.activeElement).toEqual(firstButton);
+    user_event_1.default.type(firstButton, '{arrowdown}');
+    expect(document.activeElement).toEqual(secondButton);
+    controller.abort();
+});
+it('Should have one tab-stop inside the focus zone when enabled', () => {
+    const { container } = react_2.render(<div>
+      <button tabIndex={0}>Bad Apple</button>
+      <div id="focusZone">
+        <button tabIndex={0}>Apple</button>
+        <button tabIndex={0}>Banana</button>
+        <button tabIndex={0}>Cantaloupe</button>
+      </div>
+      <button tabIndex={0}>Next Apple</button>
+    </div>);
+    const focusZoneContainer = container.querySelector('#focusZone');
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const [one, two, three, four, five] = container.querySelectorAll('button');
+    const controller = focusZone_1.focusZone(focusZoneContainer);
+    one.focus();
+    user_event_1.default.tab();
+    user_event_1.default.tab();
+    expect(document.activeElement).toEqual(five);
+    controller.abort();
+    one.focus();
+    user_event_1.default.tab();
+    user_event_1.default.tab();
+    expect(document.activeElement).toEqual(three);
+    controller.abort();
+});
+it('Should prevent moving focus outside the zone', () => {
+    const { container } = react_2.render(<div>
+      <button tabIndex={0}>Bad Apple</button>
+      <div id="focusZone">
+        <button tabIndex={0}>Apple</button>
+        <button tabIndex={0}>Banana</button>
+        <button tabIndex={0}>Cantaloupe</button>
+      </div>
+    </div>);
+    const focusZoneContainer = container.querySelector('#focusZone');
+    const [firstButton, secondButton, thirdButton] = focusZoneContainer.querySelectorAll('button');
+    const controller = focusZone_1.focusZone(focusZoneContainer);
+    firstButton.focus();
+    expect(document.activeElement).toEqual(firstButton);
+    user_event_1.default.type(firstButton, '{arrowup}');
+    expect(document.activeElement).toEqual(firstButton);
+    user_event_1.default.type(firstButton, '{arrowdown}');
+    expect(document.activeElement).toEqual(secondButton);
+    user_event_1.default.type(secondButton, '{arrowdown}');
+    expect(document.activeElement).toEqual(thirdButton);
+    user_event_1.default.type(thirdButton, '{arrowdown}');
+    expect(document.activeElement).toEqual(thirdButton);
+    controller.abort();
+});
+it('Should do focus wrapping correctly', () => {
+    const { container } = react_2.render(<div>
+      <button tabIndex={0}>Bad Apple</button>
+      <div id="focusZone">
+        <button tabIndex={0}>Apple</button>
+        <button tabIndex={0}>Banana</button>
+        <button tabIndex={0}>Cantaloupe</button>
+      </div>
+    </div>);
+    const focusZoneContainer = container.querySelector('#focusZone');
+    const [firstButton, secondButton, thirdButton] = focusZoneContainer.querySelectorAll('button');
+    const controller = focusZone_1.focusZone(focusZoneContainer, { focusOutBehavior: 'wrap' });
+    firstButton.focus();
+    expect(document.activeElement).toEqual(firstButton);
+    user_event_1.default.type(firstButton, '{arrowup}');
+    expect(document.activeElement).toEqual(thirdButton);
+    user_event_1.default.type(thirdButton, '{arrowup}');
+    expect(document.activeElement).toEqual(secondButton);
+    user_event_1.default.type(secondButton, '{arrowdown}');
+    expect(document.activeElement).toEqual(thirdButton);
+    user_event_1.default.type(thirdButton, '{arrowdown}');
+    expect(document.activeElement).toEqual(firstButton);
+    controller.abort();
+});
+it('Should call custom getNextFocusable callback', () => {
+    const { container } = react_2.render(<div>
+      <button tabIndex={0}>Bad Apple</button>
+      <div id="focusZone">
+        <button tabIndex={0}>Apple</button>
+        <button tabIndex={0}>Banana</button>
+        <button tabIndex={0}>Cantaloupe</button>
+      </div>
+    </div>);
+    const focusZoneContainer = container.querySelector('#focusZone');
+    const [firstButton, secondButton] = focusZoneContainer.querySelectorAll('button');
+    const getNextFocusableCallback = jest.fn();
+    const controller = focusZone_1.focusZone(focusZoneContainer, { getNextFocusable: getNextFocusableCallback });
+    firstButton.focus();
+    expect(document.activeElement).toEqual(firstButton);
+    user_event_1.default.type(firstButton, '{arrowdown}');
+    expect(getNextFocusableCallback).toHaveBeenCalledWith('next', firstButton, expect.anything());
+    user_event_1.default.type(secondButton, '{home}');
+    expect(getNextFocusableCallback).toHaveBeenCalledWith('start', secondButton, expect.anything());
+    controller.abort();
+});
+it('Should focus-in to the most recently-focused element', () => {
+    const { container } = react_2.render(<div>
+      <button tabIndex={0} id="outside">
+        Bad Apple
+      </button>
+      <div id="focusZone">
+        <button tabIndex={0}>Apple</button>
+        <button tabIndex={0}>Banana</button>
+        <button tabIndex={0}>Cantaloupe</button>
+      </div>
+    </div>);
+    const focusZoneContainer = container.querySelector('#focusZone');
+    const outsideButton = container.querySelector('#outside');
+    const [firstButton, secondButton] = focusZoneContainer.querySelectorAll('button');
+    const controller = focusZone_1.focusZone(focusZoneContainer);
+    firstButton.focus();
+    expect(document.activeElement).toEqual(firstButton);
+    user_event_1.default.type(firstButton, '{arrowdown}');
+    expect(document.activeElement).toEqual(secondButton);
+    outsideButton.focus();
+    user_event_1.default.tab();
+    expect(document.activeElement).toEqual(secondButton);
+    controller.abort();
+});
+it('Should focus-in to the first element when focusInStrategy is "first"', () => {
+    const { container } = react_2.render(<div>
+      <button tabIndex={0} id="outside">
+        Bad Apple
+      </button>
+      <div id="focusZone">
+        <button tabIndex={0}>Apple</button>
+        <button tabIndex={0}>Banana</button>
+        <button tabIndex={0}>Cantaloupe</button>
+      </div>
+    </div>);
+    const focusZoneContainer = container.querySelector('#focusZone');
+    const outsideButton = container.querySelector('#outside');
+    const [firstButton, secondButton] = focusZoneContainer.querySelectorAll('button');
+    const controller = focusZone_1.focusZone(focusZoneContainer, { focusInStrategy: 'first' });
+    firstButton.focus();
+    expect(document.activeElement).toEqual(firstButton);
+    user_event_1.default.type(firstButton, '{arrowdown}');
+    expect(document.activeElement).toEqual(secondButton);
+    outsideButton.focus();
+    user_event_1.default.tab();
+    expect(document.activeElement).toEqual(firstButton);
+    controller.abort();
+});
+it('Should focus-in to the closest element when focusInStrategy is "closest"', () => {
+    const { container } = react_2.render(<div>
+      <button tabIndex={0} id="outsideBefore">
+        Bad Apple
+      </button>
+      <div id="focusZone">
+        <button id="apple" tabIndex={0}>
+          Apple
+        </button>
+        <button id="banana" tabIndex={0}>
+          Banana
+        </button>
+        <button id="cantaloupe" tabIndex={0}>
+          Cantaloupe
+        </button>
+      </div>
+      <button tabIndex={0} id="outsideAfter">
+        Good Apple
+      </button>
+    </div>);
+    const focusZoneContainer = container.querySelector('#focusZone');
+    const outsideBefore = container.querySelector('#outsideBefore');
+    const outsideAfter = container.querySelector('#outsideAfter');
+    const [firstButton, secondButton, thirdButton] = focusZoneContainer.querySelectorAll('button');
+    const controller = focusZone_1.focusZone(focusZoneContainer, { focusInStrategy: 'closest' });
+    firstButton.focus();
+    expect(document.activeElement).toEqual(firstButton);
+    user_event_1.default.type(firstButton, '{arrowdown}');
+    expect(document.activeElement).toEqual(secondButton);
+    outsideBefore.focus();
+    user_event_1.default.tab();
+    expect(document.activeElement).toEqual(firstButton);
+    outsideAfter.focus();
+    user_event_1.default.tab({ shift: true });
+    expect(document.activeElement).toEqual(thirdButton);
+    controller.abort();
+});
+it('Should call the custom focusInStrategy callback', () => {
+    const { container } = react_2.render(<div>
+      <button tabIndex={0} id="outside">
+        Bad Apple
+      </button>
+      <div id="focusZone">
+        <button tabIndex={0}>Apple</button>
+        <button tabIndex={0}>Banana</button>
+        <button tabIndex={0}>Cantaloupe</button>
+      </div>
+    </div>);
+    const focusZoneContainer = container.querySelector('#focusZone');
+    const outsideButton = container.querySelector('#outside');
+    const [, secondButton] = focusZoneContainer.querySelectorAll('button');
+    const focusInCallback = jest.fn().mockReturnValue(secondButton);
+    const controller = focusZone_1.focusZone(focusZoneContainer, { focusInStrategy: focusInCallback });
+    outsideButton.focus();
+    user_event_1.default.tab();
+    expect(focusInCallback).toHaveBeenCalledWith(outsideButton);
+    expect(document.activeElement).toEqual(secondButton);
+    controller.abort();
+});
+it('Should respect inputs by not moving focus if key would have some other effect', () => {
+    const { container } = react_2.render(<div>
+      <button tabIndex={0} id="outside">
+        Bad Apple
+      </button>
+      <div id="focusZone">
+        <button tabIndex={0}>Apple</button>
+        <input type="text" defaultValue="Banana" tabIndex={0}/>
+        <button tabIndex={0}>Cantaloupe</button>
+      </div>
+    </div>);
+    const focusZoneContainer = container.querySelector('#focusZone');
+    const [firstButton, secondButton] = focusZoneContainer.querySelectorAll('button');
+    const input = focusZoneContainer.querySelector('input');
+    const controller = focusZone_1.focusZone(focusZoneContainer, { bindKeys: focusZone_1.FocusKeys.ArrowHorizontal | focusZone_1.FocusKeys.HomeAndEnd });
+    firstButton.focus();
+    user_event_1.default.type(firstButton, '{arrowright}');
+    expect(document.activeElement).toEqual(input);
+    user_event_1.default.type(input, '{arrowleft}');
+    expect(document.activeElement).toEqual(input);
+    user_event_1.default.type(input, '{arrowright}');
+    expect(document.activeElement).toEqual(input);
+    user_event_1.default.type(input, '{arrowright}');
+    expect(document.activeElement).toEqual(secondButton);
+    controller.abort();
+});
+it('Should focus-in to the first element if the last-focused element is removed', async () => {
+    const { container } = react_2.render(<div>
+      <button tabIndex={0} id="outside">
+        Bad Apple
+      </button>
+      <div id="focusZone">
+        <button tabIndex={0}>Apple</button>
+        <button tabIndex={0}>Banana</button>
+        <button tabIndex={0}>Cantaloupe</button>
+      </div>
+    </div>);
+    const focusZoneContainer = container.querySelector('#focusZone');
+    const [firstButton, secondButton, thirdButton] = focusZoneContainer.querySelectorAll('button');
+    const outsideButton = container.querySelector('#outside');
+    const controller = focusZone_1.focusZone(focusZoneContainer);
+    firstButton.focus();
+    user_event_1.default.type(firstButton, '{arrowdown}');
+    expect(document.activeElement).toEqual(secondButton);
+    outsideButton.focus();
+    focusZoneContainer.removeChild(secondButton);
+    // The mutation observer fires asynchronously
+    await nextTick();
+    user_event_1.default.tab();
+    expect(document.activeElement).toEqual(firstButton);
+    user_event_1.default.type(firstButton, '{arrowdown}');
+    expect(document.activeElement).toEqual(thirdButton);
+    controller.abort();
+});
+it('Should call onActiveDescendantChanged properly', () => {
+    const { container } = react_2.render(<div>
+      <button tabIndex={0} id="outside">
+        Bad Apple
+      </button>
+      <input id="control" defaultValue="control input" tabIndex={0}/>
+      <div id="focusZone">
+        <button tabIndex={0}>Apple</button>
+        <button tabIndex={0}>Banana</button>
+        <button tabIndex={0}>Cantaloupe</button>
+      </div>
+    </div>);
+    const focusZoneContainer = container.querySelector('#focusZone');
+    const [firstButton, secondButton] = focusZoneContainer.querySelectorAll('button');
+    const control = container.querySelector('#control');
+    const activeDescendantChangedCallback = jest.fn();
+    const controller = focusZone_1.focusZone(focusZoneContainer, {
+        activeDescendantControl: control,
+        onActiveDescendantChanged: activeDescendantChangedCallback
+    });
+    control.focus();
+    expect(activeDescendantChangedCallback).toHaveBeenLastCalledWith(firstButton, undefined, false);
+    user_event_1.default.type(control, '{arrowdown}');
+    expect(activeDescendantChangedCallback).toHaveBeenLastCalledWith(secondButton, firstButton, true);
+    user_event_1.default.type(control, '{arrowup}');
+    expect(activeDescendantChangedCallback).toHaveBeenLastCalledWith(firstButton, secondButton, true);
+    react_2.fireEvent.mouseMove(secondButton);
+    expect(activeDescendantChangedCallback).toHaveBeenLastCalledWith(secondButton, firstButton, false);
+    user_event_1.default.type(control, '{arrowup}');
+    expect(activeDescendantChangedCallback).toHaveBeenLastCalledWith(firstButton, secondButton, true);
+    user_event_1.default.type(control, '{arrowUp}');
+    expect(activeDescendantChangedCallback).toHaveBeenLastCalledWith(firstButton, firstButton, true);
+    activeDescendantChangedCallback.mockReset();
+    react_2.fireEvent.mouseMove(firstButton);
+    expect(activeDescendantChangedCallback).not.toBeCalled();
+    controller.abort();
+});
+it('Should set aria-activedescendant correctly', () => {
+    const { container } = react_2.render(<div>
+      <button tabIndex={0} id="outside">
+        Bad Apple
+      </button>
+      <input id="control" defaultValue="control input" tabIndex={0}/>
+      <div id="focusZone">
+        <button tabIndex={0}>Apple</button>
+        <button tabIndex={0}>Banana</button>
+        <button tabIndex={0}>Cantaloupe</button>
+      </div>
+    </div>);
+    const focusZoneContainer = container.querySelector('#focusZone');
+    const [firstButton, secondButton] = focusZoneContainer.querySelectorAll('button');
+    const outsideButton = container.querySelector('#outside');
+    const control = container.querySelector('#control');
+    const controller = focusZone_1.focusZone(focusZoneContainer, { activeDescendantControl: control });
+    control.focus();
+    expect(control.getAttribute('aria-activedescendant')).toEqual(firstButton.id);
+    user_event_1.default.type(control, '{arrowdown}');
+    expect(control.getAttribute('aria-activedescendant')).toEqual(secondButton.id);
+    user_event_1.default.type(control, '{arrowup}');
+    expect(control.getAttribute('aria-activedescendant')).toEqual(firstButton.id);
+    expect(document.activeElement).toEqual(control);
+    user_event_1.default.type(control, '{arrowup}');
+    expect(control.getAttribute('aria-activedescendant')).toEqual(firstButton.id);
+    outsideButton.focus();
+    expect(control.hasAttribute('aria-activedescendant')).toBeFalsy();
+    controller.abort();
+});
+it('Should handle elements being reordered', async () => {
+    const { container } = react_2.render(<div>
+      <div id="focusZone">
+        <button tabIndex={0}>Apple</button>
+        <button tabIndex={0}>Banana</button>
+        <button tabIndex={0}>Cantaloupe</button>
+        <button tabIndex={0}>Durian</button>
+      </div>
+    </div>);
+    const focusZoneContainer = container.querySelector('#focusZone');
+    const [firstButton, secondButton, thirdButton, fourthButton] = focusZoneContainer.querySelectorAll('button');
+    const controller = focusZone_1.focusZone(focusZoneContainer);
+    firstButton.focus();
+    expect(document.activeElement).toEqual(firstButton);
+    moveDown();
+    expect(document.activeElement).toEqual(secondButton);
+    moveUp();
+    expect(document.activeElement).toEqual(firstButton);
+    // move secondButton and thirdButton to the end of the zone, in reverse order
+    focusZoneContainer.appendChild(thirdButton);
+    focusZoneContainer.appendChild(secondButton);
+    // The mutation observer fires asynchronously
+    await nextTick();
+    expect(document.activeElement).toEqual(firstButton);
+    moveDown();
+    expect(document.activeElement).toEqual(fourthButton);
+    moveDown();
+    expect(document.activeElement).toEqual(thirdButton);
+    moveDown();
+    expect(document.activeElement).toEqual(secondButton);
+    controller.abort();
+});

package/lib/__tests__/behaviors/iterateFocusableElements.test.jsx

@@ -0,0 +1,58 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const iterateFocusableElements_1 = require("../../utils/iterateFocusableElements");
+const react_2 = require("@testing-library/react");
+it('Should iterate through focusable elements only', () => {
+    const { container } = react_2.render(<div>
+      <div>
+        <textarea></textarea>
+      </div>
+      <input />
+      <button>Hello</button>
+      <p>Not focusable</p>
+      {/* eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex */}
+      <div tabIndex={0}>
+        <a tabIndex={-1} href="#boo">
+          Not focusable
+        </a>
+        <a href="#yah">Focusable</a>
+      </div>
+    </div>);
+    const focusable = Array.from(iterateFocusableElements_1.iterateFocusableElements(container, { onlyTabbable: true }));
+    expect(focusable.length).toEqual(5);
+    expect(focusable[0].tagName.toLowerCase()).toEqual('textarea');
+    expect(focusable[1].tagName.toLowerCase()).toEqual('input');
+    expect(focusable[2].tagName.toLowerCase()).toEqual('button');
+    expect(focusable[3].tagName.toLowerCase()).toEqual('div');
+    expect(focusable[4].tagName.toLowerCase()).toEqual('a');
+    expect(focusable[4].getAttribute('href')).toEqual('#yah');
+});
+it('Should iterate through focusable elements in reverse', () => {
+    const { container } = react_2.render(<div>
+      <div>
+        <textarea></textarea>
+      </div>
+      <input />
+      <button>Hello</button>
+      <p>Not focusable</p>
+      {/* eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex */}
+      <div tabIndex={0}>
+        <a tabIndex={-1} href="#boo">
+          Not focusable
+        </a>
+        <a href="#yah">Focusable</a>
+      </div>
+    </div>);
+    const focusable = Array.from(iterateFocusableElements_1.iterateFocusableElements(container, { reverse: true, onlyTabbable: true }));
+    expect(focusable.length).toEqual(5);
+    expect(focusable[0].tagName.toLowerCase()).toEqual('a');
+    expect(focusable[0].getAttribute('href')).toEqual('#yah');
+    expect(focusable[1].tagName.toLowerCase()).toEqual('div');
+    expect(focusable[2].tagName.toLowerCase()).toEqual('button');
+    expect(focusable[3].tagName.toLowerCase()).toEqual('input');
+    expect(focusable[4].tagName.toLowerCase()).toEqual('textarea');
+});