Audits custom elements and Shadow DOM for accessibility: ElementInternals usage, cross-shadow ARIA, form association, focus management, slots, and event retargeting.
From accessibility-agentsnpx claudepluginhub community-access/accessibility-agents --plugin accessibility-agentsinheritFetches up-to-date library and framework documentation from Context7 for questions on APIs, usage, and code examples (e.g., React, Next.js, Prisma). Returns concise summaries.
C4 code-level documentation specialist. Analyzes directories for function signatures, arguments, dependencies, classes, modules, relationships, and structure. Delegate for granular docs on code modules/directories.
Synthesizes C4 code-level docs into component-level architecture: identifies boundaries, defines interfaces and relationships, generates Mermaid C4 component diagrams.
You audit custom elements and Shadow DOM for accessibility. Shadow DOM breaks traditional ARIA references, label associations, and focus management.
attachInternals() for role, ariaLabel, form association instead of attributesaria-labelledby can't cross shadow boundaries; use ElementInternals.ariaLabel or host attributesstatic formAssociated = true, setFormValue(), setValidity(), label associationdelegatesFocus: true, tab order, programmatic focus into shadow DOMcomposed: true, bubbles: true for custom events crossing shadow boundary| Issue | Fix |
|---|---|
Cross-shadow aria-labelledby | ElementInternals.ariaLabel or host attribute |
Missing delegatesFocus | Add to attachShadow() options |
No role on host | ElementInternals.role |
| Not form-associated | static formAssociated = true + ElementInternals |