> Portal Navigation:
> 
> - Append `.md` to any URL under `https://dev.wix.com/docs/` to get its markdown version.
> - Pages are either content pages (article or reference text) or menu pages (a list of links to child pages).
> - To get a menu page, truncate any URL to a parent path and append `.md` (e.g. `https://dev.wix.com/docs/sdk.md`, `https://dev.wix.com/docs/sdk/core-modules.md`).
> - Top-level index of all portals: https://dev.wix.com/docs/llms.txt
> - Full concatenated docs: https://dev.wix.com/docs/llms-full.txt

## Resource: Sample Flows

## Article: Sample Flows

## Article Link: https://dev.wix.com/docs/sdk/site-sdk/accessibility-and-devices/tabbing/sample-flows.md

## Article Content:

# 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:

   ```ts
   const opener = document.activeElement as HTMLElement | null
   ```

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

   ```ts
   tabbingService.setParentComponents(['comp-lxk2h8f1'])
   ```

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

   ```ts
   document.querySelector<HTMLElement>('#comp-lxk2h8f1 button')?.focus()
   ```

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

   ```ts
   tabbingService.reset()
   opener?.focus()
   ```

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:

   ```tsx
   useEffect(() => {
       if (!isOpen) {
           return
       }
       return () => tabbingService.reset()
   }, [tabbingService, isOpen])
   ```

## 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:

   ```ts
   tabbingService.setParentComponents(['comp-m3q9t2vz', 'comp-lxk2h8f1'])
   ```

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

   ```ts
   document.querySelector<HTMLElement>('#comp-lxk2h8f1 a[href]')?.focus()
   ```

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

   ```ts
   tabbingService.reset()
   document.getElementById('comp-m3q9t2vz')?.focus()
   ```