How to use the @zendeskgarden/container-utilities.KEY_CODES.TAB function in @zendeskgarden/container-utilities

To help you get started, we’ve selected a few @zendeskgarden/container-utilities examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github zendeskgarden / react-containers / packages / focusjail / src / FocusJailContainer.spec.tsx View on Github external
it("doesn't intercept tab key if not the first or last tabbable item", () => {
        const focusableChildren = (
          <>
            <button>Focusable button</button>
            <input> setTimeout(() =&gt; ref &amp;&amp; ref.focus())} /&gt;
            <button>Another button</button>
          
        );
        const { getByTestId } = render(
          
        );

        fireEvent.keyDown(getByTestId('container'), { keyCode: KEY_CODES.TAB });

        expect(focusSpy).toHaveBeenCalledTimes(3);
      });
github zendeskgarden / react-containers / packages / focusjail / src / FocusJailContainer.spec.tsx View on Github external
it('focuses container if no tabbable elements found', () =&gt; {
        const { getByTestId } = render();
        const container = getByTestId('container');

        fireEvent.keyDown(container, { keyCode: KEY_CODES.TAB });

        expect(focusSpy).toHaveBeenCalledTimes(3);
        expect(focusSpy).toHaveBeenLastCalledWith(container);
      });
github zendeskgarden / react-containers / packages / focusjail / src / useFocusJail.ts View on Github external
onKeyDown: composeEventHandlers(onKeyDown, (event: KeyboardEvent) => {
        if (event.keyCode !== KEY_CODES.TAB) {
          return;
        }
        validateContainerRef();

        const tabbableNodes = getTabbableNodes();

        if (
          event.shiftKey &&
          (event.target === tabbableNodes.firstItem || event.target === currentRef)
        ) {
          focusElement(tabbableNodes.lastItem);
          event.preventDefault();
        }

        if (!event.shiftKey && event.target === tabbableNodes.lastItem) {
          focusElement(tabbableNodes.firstItem);