CtrlK
BlogDocsLog inGet started
Tessl Logo

testland/wcag-focus-trap

Reference for **intentional** focus management in modal / dialog / drawer / popover components - the canonical pattern that satisfies WCAG SC 2.4.3 (Focus Order) without violating SC 2.1.2 (No Keyboard Trap). Covers focus-on-open, focus-cycle-within-container, Escape-closes-and-restores, return-to-trigger, and inert-the-rest-of-the-page. Use when authoring or reviewing any component that displays content over the page (modals, drawers, popovers, command palettes).

75

Quality

94%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide

SecuritybySnyk

Passed

No findings from the security scan

Overview
Quality
Evals
Security
Files

Quality

Content

85%

Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.

Highly actionable content with a clear 6-step workflow backed by executable tests, organized into clean sections with one-level references. The only weakness is mild verbosity in the framing and commentary prose, which keeps conciseness below the top anchor.

Suggestions

Tighten the Overview: the 'trap vs scope' explanation and WCAG rationale can be condensed to one or two sentences since the canonical pattern and tests already demonstrate the intent.

Trim the library-comparison table commentary or collapse the 'Common bugs' and 'Anti-patterns' tables, which overlap; keeping one consolidated table would reduce tokens without losing guidance.

Move the inline 'Pre-inert fallback' comment block in Step 3 into a short note or omit it unless the fallback is actually meant to be used, to avoid implying incomplete guidance.

DimensionReasoningScore

Conciseness

Mostly efficient with tight per-step code, but the Overview's 'trap vs scope' framing and the library/commentary prose add some explanation that could be trimmed; it is not a 1 because there is no generic 'what a modal is' padding and the code blocks are lean.

2 / 3

Actionability

Provides fully executable JavaScript, HTML, and TypeScript (Playwright) snippets with concrete selectors and methods — copy-paste ready — matching the anchor for fully executable guidance.

3 / 3

Workflow Clarity

A clearly sequenced 6-step canonical pattern with four explicit Playwright test scripts serving as validation checkpoints and a feedback loop (assert focus enters, cycles, restores, outside is inert); it is not a 2 because validation is explicit rather than implicit.

3 / 3

Progressive Disclosure

A single self-contained SKILL.md with well-organized sections and a References list of one-level-deep, clearly signaled external spec links; no nested-reference problem exists and no bundle files are needed.

3 / 3

Total

11

/

12

Passed

Description

100%

Based on the skill's description, can an agent find and select it at the right time? Clear, specific descriptions lead to better discovery.

A strong description: concrete capabilities, natural trigger terms, an explicit 'Use when' clause, and a sharply bounded niche with minimal conflict risk. No meaningful gaps relative to the rubric anchors.

DimensionReasoningScore

Specificity

Lists multiple concrete actions verbatim — 'focus-on-open, focus-cycle-within-container, Escape-closes-and-restores, return-to-trigger, and inert-the-rest-of-the-page' — matching the anchor for listing several specific concrete actions.

3 / 3

Completeness

Explicitly answers both what (the canonical focus-management pattern covering five named behaviors) and when ('Use when authoring or reviewing any component that displays content over the page'), with an explicit trigger clause.

3 / 3

Trigger Term Quality

Natural terms a user would say are well covered — 'modal', 'dialog', 'drawer', 'popover', 'command palette' — alongside an explicit 'Use when authoring or reviewing' clause, matching the strong-coverage anchor.

3 / 3

Distinctiveness Conflict Risk

Occupies a clear niche — WCAG focus management for overlay components — with distinct triggers unlikely to fire for unrelated skills; it is not a 2 because the scope is sharply bounded rather than overlapping.

3 / 3

Total

12

/

12

Passed

Validation

100%

Checks the skill against the spec for correct structure and formatting. All validation checks must pass before discovery and implementation can be scored.

Validation16 / 16 Passed

Validation for skill structure

No warnings or errors.

Reviewed

Table of Contents