Focus Trap Detector

WHAT IT DOES

Focus Trap Detector is a browser extension that detects and reports focus traps on any webpage—elements that trap keyboard focus and prevent navigation via Tab, Shift+Tab, or arrow keys. Common focus traps include modals, popups, overlays, dialogs, and drawers that contain focusable elements but prevent the user from navigating away. The tool highlights potential focus traps with a red outline and a warning label, shows how many focusable elements are inside and outside the trap, and provides escape suggestions. The tool also lists all detected traps in a summary panel. It is ideal for web developers, accessibility testers, QA engineers, and anyone who wants to ensure their web applications are keyboard-navigable and accessible.

WHERE IT RUNS

Focus Trap Detector runs on any webpage, overlaying a floating panel that does not interfere with page content. It operates entirely in your browser as a lightweight userscript, scanning the DOM for focusable elements and detecting focus traps. It works on any page, whether static or dynamic, with no external dependencies. All settings are stored locally using GM_setValue—no data is ever sent to any server.

HOW TO USE

After installation, open the floating panel by clicking the extension icon. The panel shows the current status (Enabled or Disabled) and a toggle button to enable or disable the detection. Toggle "Highlight focus traps on page" to visually highlight detected traps with a red outline and a warning label. Click the "Scan for Focus Traps" button to manually scan the page. The panel displays a summary of detected traps, including the element label, the number of focusable elements inside and outside the trap, and an escape suggestion for trapped modals. The tool automatically re-scans when focus changes (e.g., when a modal opens or closes). All settings are saved per website.

REAL MECHANISM — WHY THIS WORKS

Most focus trap detection tools require manual inspection or complex accessibility testing suites. Focus Trap Detector uses a DOM-scanning approach to identify potential focus traps. The tool first queries the page for all focusable elements using standard CSS selectors (a[href], button, input, select, textarea, [tabindex], details summary, [contenteditable], iframe). It then searches for elements that are likely to be focus traps: elements with role="dialog", role="alertdialog", aria-modal="true", or common class names like .modal, .dialog, .popup, .overlay, .drawer. For each candidate trap, the tool counts focusable elements inside the container and compares them to focusable elements outside. If the container contains focusable elements and there are focusable elements outside, the tool attempts to detect whether focus is trapped by simulating a focus change and checking if focus remains within the container. The tool also uses a keydown event listener to detect Tab key behavior within traps. The results are displayed in a structured list with visual highlighting using CSS classes. This approach ensures accurate, fast, and fully private focus trap detection without requiring any external services or network access.

THE PANEL

The floating panel is fully draggable and remembers its position per site, snapping to the edges of the viewport when dragged near them. You can collapse the panel to a small icon to minimize screen distraction and expand it back with a single click. The panel is resizable from the bottom-right corner, giving you more space to view results. Press the Escape key to close the panel instantly. The panel remains open across page navigation within the same domain, maintaining your current view state. All preferences—panel position, enabled state, and highlight toggle—are saved per domain for a seamless experience.

PLEASE NOTE

Focus Trap Detector requires the free BotGentz extension to be installed and enabled, as it relies on the cross-extension messaging API provided by BotGentz for DOM access permissions. The tool detects potential focus traps based on common patterns and may produce false positives or miss custom implementations. The tool does not automatically fix focus traps; it only identifies and highlights them. The highlight uses CSS outline and may not be visible on all elements. All settings are stored locally in your browser using GM_setValue. No focus data, page content, or usage information is ever sent to any server. The extension does not read, store, or transmit any personal information. It only scans and reports focus traps at your request.