opencodekit 0.9.2 → 0.11.0

package/dist/template/.opencode/command/accessibility-check.md

@@ -7,60 +7,323 @@ model: proxypal/gemini-3-flash-preview
 
 # Accessibility Check: $ARGUMENTS
 
-skill({ name: "accessibility-audit" })
+## Phase 1: Load Context
 
-Perform WCAG accessibility audit.
+**Load skill:**
 
-## Instructions
+```typescript
+skill({ name: "accessibility-audit" });
+```
+
+**Check for bead context:**
+
+```typescript
+bd_show({ id: "$ARGUMENTS" }); // If bead ID provided
+```
 
 Parse path and WCAG level from `$ARGUMENTS` (default: AA).
 
-Determine input type:
+## Phase 2: Estimate Complexity
 
-- **Image/screenshot**: Visual accessibility analysis
-- **Component path**: Code accessibility patterns
+| Signals                        | Estimate | Approach        |
+| ------------------------------ | -------- | --------------- |
+| Single component, few elements | S (~10)  | Quick audit     |
+| Page with multiple components  | M (~30)  | Full audit      |
+| Complex app, multiple pages    | L (~100) | Comprehensive   |
+| Design system audit            | XL       | Systematic scan |
 
-## Visual Analysis
+## Phase 3: Determine Input Type
 
-Check:
+- **Image/screenshot**: Visual accessibility analysis (Phase 4)
+- **Component path**: Code accessibility patterns (Phase 5)
+- **URL**: Run automated + visual analysis (Phase 4 + 5)
 
-1. **Color contrast** - Text/background ratios (AA: 4.5:1 normal, 3:1 large)
-2. **Touch targets** - Interactive elements ≥44x44px
-3. **Visual information** - Color-only cues, missing labels
-4. **Content structure** - Heading hierarchy, reading order
-5. **Interactive states** - Focus indicators, hover states
+## Phase 4: Visual Analysis
 
-## Code Analysis
+### Color & Contrast
 
-Search for:
+| Check                    | WCAG Ref    | Requirement                  |
+| ------------------------ | ----------- | ---------------------------- |
+| Text contrast            | 1.4.3 (AA)  | 4.5:1 normal, 3:1 large text |
+| UI component contrast    | 1.4.11 (AA) | 3:1 against adjacent colors  |
+| Focus indicator contrast | 1.4.11 (AA) | 3:1 contrast                 |
+| Color-only information   | 1.4.1 (A)   | Don't rely on color alone    |
 
-- Missing alt text on images
-- Click handlers on non-interactive elements
-- Form inputs without labels
-- Missing ARIA attributes
+### Touch & Interaction
 
-## Output
+| Check             | WCAG Ref    | Requirement                |
+| ----------------- | ----------- | -------------------------- |
+| Touch target size | 2.5.5 (AAA) | ≥44x44px (≥24x24 for AA)   |
+| Target spacing    | 2.5.8 (AA)  | Adequate spacing between   |
+| Pointer gestures  | 2.5.1 (A)   | Single pointer alternative |
+
+### Visual Structure
+
+| Check             | WCAG Ref    | Requirement                   |
+| ----------------- | ----------- | ----------------------------- |
+| Heading hierarchy | 1.3.1 (A)   | Logical heading order         |
+| Reading order     | 1.3.2 (A)   | Meaningful sequence           |
+| Text spacing      | 1.4.12 (AA) | Adjustable without loss       |
+| Reflow            | 1.4.10 (AA) | No horizontal scroll at 320px |
+
+### Motion & Animation
+
+| Check                   | WCAG Ref    | Requirement                     |
+| ----------------------- | ----------- | ------------------------------- |
+| Motion from interaction | 2.3.3 (AAA) | Can be disabled                 |
+| Reduced motion          | 2.3.3       | Respects prefers-reduced-motion |
+| Auto-playing media      | 1.4.2 (A)   | Pause/stop/hide controls        |
+| Flashing content        | 2.3.1 (A)   | No more than 3 flashes/second   |
+
+## Phase 5: Code Analysis
+
+### Automated Testing
+
+Run axe-core or Lighthouse:
+
+```bash
+# Using Lighthouse
+npx lighthouse <url> --only-categories=accessibility --output=json
+
+# Using axe-core in tests
+npm install -D @axe-core/playwright  # or jest-axe
+```
+
+```typescript
+// Playwright + axe example
+import { injectAxe, checkA11y } from "@axe-core/playwright";
+
+await injectAxe(page);
+await checkA11y(page);
+```
+
+### Semantic HTML Checks
+
+```typescript
+// Find images without alt text
+ast - grep({ pattern: "<img $$$>" }); // Check for alt attribute
+
+// Find click handlers on non-interactive elements
+ast - grep({ pattern: "<div onClick={$$$}>" });
+ast - grep({ pattern: "<span onClick={$$$}>" });
+
+// Find form inputs without labels
+ast - grep({ pattern: "<input $$$>" }); // Check for id + matching label
+```
+
+### ARIA Pattern Checks
+
+| Pattern         | Required ARIA                              |
+| --------------- | ------------------------------------------ |
+| Modal dialog    | role="dialog", aria-modal, aria-labelledby |
+| Dropdown menu   | role="menu", aria-expanded, aria-haspopup  |
+| Tab panel       | role="tablist/tab/tabpanel", aria-selected |
+| Accordion       | aria-expanded, aria-controls               |
+| Alert           | role="alert", aria-live="assertive"        |
+| Toast           | role="status", aria-live="polite"          |
+| Loading spinner | aria-busy, aria-live                       |
+
+### Focus Management
+
+| Check               | Requirement                         |
+| ------------------- | ----------------------------------- |
+| Focus visible       | All interactive elements show focus |
+| Focus order         | Logical tab sequence                |
+| Focus trap (modals) | Focus contained within modal        |
+| Focus restoration   | Focus returns after modal closes    |
+| Skip links          | Skip to main content available      |
+
+```typescript
+// Check for focus styles
+grep({ pattern: ":focus", include: "*.css" });
+grep({ pattern: "focus:", include: "*.tsx" }); // Tailwind
+```
+
+## Phase 6: Keyboard Navigation Testing
+
+Test manually or with Playwright:
+
+```typescript
+skill({ name: "playwright" });
+skill_mcp({
+  skill_name: "playwright",
+  tool_name: "browser_press_key",
+  arguments: '{"key": "Tab"}',
+});
+```
+
+| Action     | Expected Behavior                        |
+| ---------- | ---------------------------------------- |
+| Tab        | Moves to next interactive element        |
+| Shift+Tab  | Moves to previous element                |
+| Enter      | Activates buttons, links                 |
+| Space      | Toggles checkboxes, activates buttons    |
+| Arrow keys | Navigate within components (tabs, menus) |
+| Escape     | Closes modals, dropdowns                 |
+
+```
+Keyboard Navigation:
+━━━━━━━━━━━━━━━━━━━━
+
+- Tab order: [logical/broken at X]
+- Focus visible: [all/missing on X]
+- Enter/Space: [working/broken on X]
+- Escape: [working/not implemented]
+- Skip link: [present/missing]
+```
+
+## Phase 7: Screen Reader Guidance
+
+For manual testing, suggest:
 
-```markdown
-## Accessibility Audit
+| Platform | Screen Reader | Command to Start         |
+| -------- | ------------- | ------------------------ |
+| macOS    | VoiceOver     | Cmd + F5                 |
+| Windows  | NVDA          | Ctrl + Alt + N           |
+| Windows  | Narrator      | Win + Ctrl + Enter       |
+| iOS      | VoiceOver     | Settings > Accessibility |
+| Android  | TalkBack      | Settings > Accessibility |
 
-**WCAG Level:** [level]
+**Key things to verify:**
 
-### Critical Issues
+- [ ] All content is announced
+- [ ] Images have meaningful alt text
+- [ ] Form fields announce labels
+- [ ] Error messages are announced
+- [ ] Dynamic content updates are announced (aria-live)
 
-- [ ] Issue + WCAG ref + fix
+## Phase 8: Generate Report
+
+````markdown
+## Accessibility Audit: [Component/Page]
+
+**WCAG Level:** [A/AA/AAA]
+**Automated Score:** [Lighthouse score if available]
+
+### Summary
+
+| Category       | Critical | Major | Minor | Passed |
+| -------------- | -------- | ----- | ----- | ------ |
+| Perceivable    | [N]      | [N]   | [N]   | [N]    |
+| Operable       | [N]      | [N]   | [N]   | [N]    |
+| Understandable | [N]      | [N]   | [N]   | [N]    |
+| Robust         | [N]      | [N]   | [N]   | [N]    |
+
+### Critical Issues (Must Fix)
+
+#### [Issue Title]
+
+- **WCAG:** [criterion number and name]
+- **Location:** [file:line or element description]
+- **Problem:** [description]
+- **Fix:**
+
+```[language]
+[code fix]
+```
+````
 
 ### Major Issues
 
-- [ ] Issue + WCAG ref + fix
+[Same format]
 
 ### Minor Issues
 
-- [ ] Issue + WCAG ref + fix
+[Same format]
+
+### Passed Checks
+
+- Color contrast: [ratio] meets [level]
+- Touch targets: [size] meets requirement
+- Heading structure: Logical hierarchy
+- Keyboard navigation: All elements reachable
+- Focus indicators: Visible on all elements
+
+````
+
+## Phase 9: Create Observation
+
+If patterns discovered:
+
+```typescript
+observation({
+  type: "pattern",
+  title: "A11y pattern: [name]",
+  content: `
+## Pattern
+[Description of accessibility pattern]
+
+## Implementation
+\`\`\`tsx
+[Accessible code example]
+\`\`\`
+
+## Common Mistakes
+- [What to avoid]
+  `,
+  concepts: "accessibility, wcag, [specific area]",
+  bead_id: "<bead-id>",
+});
+````
+
+## Phase 10: Verify Fixes
+
+After fixes applied, re-run checks:
+
+```bash
+npx lighthouse <url> --only-categories=accessibility
+```
+
+```
+Verification:
+━━━━━━━━━━━━━
+
+Before: [N] issues
+After: [N] issues
+Resolved: [N]
+
+Remaining:
+- [Any outstanding issues]
+```
+
+## Phase 11: Sync
+
+```typescript
+bd_sync({ reason: "Accessibility audit for $ARGUMENTS" });
+```
+
+## Output
+
+```
+Accessibility Audit Complete: $ARGUMENTS
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+WCAG Level: [AA]
+Estimate: [S/M/L]
+
+Results:
+- Critical: [N]
+- Major: [N]
+- Minor: [N]
+- Passed: [N]
 
-### Passed
+Automated Score: [N]/100 (Lighthouse)
 
-- ✓ What passed
+Key Fixes Needed:
+1. [Most critical issue]
+2. [Second issue]
+3. [Third issue]
+
+Report: .beads/artifacts/<bead-id>/a11y-audit.md (if bead)
 ```
 
-Include code fix snippets for each issue.
+**Next steps:**
+
+```
+Fix issues:
+  /fix-ui <bead-id>   # Fix visual issues
+  /fix <bead-id>      # Fix code issues
+
+After fixing:
+  /accessibility-check <path>   # Re-run audit
+```