About the Tabbing API

The Tabbing API keeps keyboard focus inside an overlay, such as a dialog, a popup, or a menu, while it's open. Use it so site visitors who move through the page with Tab and Shift+Tab can't reach controls hidden behind an overlay.

With the Tabbing API, you can:

• Trap keyboard focus in one or more containers, such as a dialog, or a menu and the button that opens it.
• Release the trap and restore the page's Tab order.

Before you begin

It's important to note the following points before starting to code:

• There's one focus trap for the whole page, shared by every component. Each setParentComponents() call replaces it, and reset() releases it whichever component set it.

Use cases

• Keep keyboard focus inside an open dialog
• Keep keyboard focus in a menu and the button that opens it

Terminology

• Focus trap: The state in which Tab and Shift+Tab move only between elements inside specific containers, while the rest of the page is out of the Tab order.
• Container: An element whose id attribute value you specify in setParentComponents().

SDK setup

To use the API, install the @wix/site-service-tabbing package:

Import the package

Resolve the service

In a React component, resolve the service with the useService hook: