Tabbing API: Sample Flows

This article presents possible use cases and corresponding sample flows that you can support. It provides a useful starting point as you plan your implementation.

Keep keyboard focus inside an open dialog

Here, a dialog is an element your component renders over the page, not a popup page that opens with @wix/site-service-lightbox.

To keep keyboard focus inside an open dialog, follow these steps:

1. Before the dialog opens, save the element that has focus, so you can return focus to it later:

   Copy

2. Once the dialog element is on the page, set the trap with the value of its id attribute:

   Copy

3. Move focus to the first control in the dialog. The service doesn't move focus:

   Copy

4. When the dialog closes, release the trap and return focus to the element you saved:

   Copy

5. If the component can unmount while the dialog is open, release the trap then too. Release it only while the dialog is open, because reset() also releases a trap that another component set. In a React component, return the release from an effect that depends on your own isOpen state for the dialog:

   Copy

Keep keyboard focus in a menu and the button that opens it

To keep keyboard focus in a menu and the button that opens it, follow these steps:

1. Collect the values of the id attributes of the menu element and its toggle button.

2. When the menu opens, set the trap with both IDs:

   Copy

3. Move focus to the first item in the menu, because the service doesn't move focus:

   Copy

4. When the menu closes, release the trap and return focus to the toggle button:

   Copy