Traps keyboard focus within a container, improving accessibility for modal dialogs.
// Source: https://github.com/zeroclaw-labs/zeroclaw | License: Apache-2.0 | Copyright 2025 ZeroClaw Labs
// Provided via justclaw.it.com; keep this notice with the code.
import { useEffect, useRef, type RefObject } from 'react';
/**
* The focusable-element selector most of the console's modals share. Components
* that allow `<select>` / `<textarea>` controls inside the trap pass the wider
* `FOCUSABLE_SELECTOR_FORM` variant instead.
*/
export const FOCUSABLE_SELECTOR =
'a[href], button:not([disabled]), input:not([disabled]), [tabindex]:not([tabindex="-1"])';
/** Wider selector for dialogs that also contain `<select>` / `<textarea>`. */
export const FOCUSABLE_SELECTOR_FORM =
'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]),
... (truncated -- full source via MCP)
See the full source, get the GitHub permalink, and search for more like it.
Get a free API key