Focus Trap Hook (hooks/useFocusTrap.ts)

zeroclaw · web/src/hooks/useFocusTrap.ts · typescript · Apache-2.0
ui, fw:react, tag:focus

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