From react-rtk
WCAG accessibility patterns — semantic HTML, ARIA, focus management, keyboard navigation. Use when working with aria attributes, role attributes, dialog/nav elements, form elements, or focus management code.
npx claudepluginhub surfertas/claude-react-rtk --plugin react-rtkThis skill uses the workspace's default tool permissions.
```
Creates isolated Git worktrees for feature branches with prioritized directory selection, gitignore safety checks, auto project setup for Node/Python/Rust/Go, and baseline verification.
Executes implementation plans in current session by dispatching fresh subagents per independent task, with two-stage reviews: spec compliance then code quality.
Dispatches parallel agents to independently tackle 2+ tasks like separate test failures or subsystems without shared state or dependencies.
clickable action → <button> NOT <div onClick>
navigation link → <a href> NOT <span onClick>
navigation section → <nav> NOT <div class="nav">
main content → <main> NOT <div class="content">
modal/dialog → <dialog> NOT <div class="modal">
list of items → <ul>/<ol>/<li> NOT <div> repeated
section heading → <h1>-<h6> NOT <div class="title">
form field → <input> + <label> NOT unlabeled input
// Modal: trap focus, restore on close
const previousFocus = useRef<HTMLElement>(null);
const openModal = () => {
previousFocus.current = document.activeElement as HTMLElement;
// focus first focusable in modal
};
const closeModal = () => {
previousFocus.current?.focus();
};
// Route change: focus main heading
useEffect(() => {
document.querySelector('h1')?.focus();
}, [pathname]);
role="tablist", role="tab", aria-selected, aria-controlsaria-expanded, aria-controls, button triggeraria-haspopup, aria-expanded, aria-activedescendantrole="status", aria-live="polite"role="alert", aria-live="assertive"aria-busy="true", role="status" with textFor detailed patterns, see references/ directory.