wicked-garden 12.27.0

package/skills/product/accessibility/refs/aria-patterns-interactive.md

@@ -0,0 +1,246 @@
+---
+phase_relevance: ["clarify", "design", "review"]
+archetype_relevance: ["*"]
+---
+# ARIA Patterns - Interactive Widgets
+
+Tabs, modal dialogs, and dropdown menus.
+
+## Complex Widget Patterns
+
+### 5. Tabs
+
+Tab interface for switching between panels.
+
+```html
+<div class="tabs">
+  <div role="tablist" aria-label="Product details">
+    <button role="tab"
+            aria-selected="true"
+            aria-controls="panel1"
+            id="tab1"
+            tabindex="0">
+      Description
+    </button>
+    <button role="tab"
+            aria-selected="false"
+            aria-controls="panel2"
+            id="tab2"
+            tabindex="-1">
+      Specifications
+    </button>
+    <button role="tab"
+            aria-selected="false"
+            aria-controls="panel3"
+            id="tab3"
+            tabindex="-1">
+      Reviews
+    </button>
+  </div>
+
+  <div id="panel1" role="tabpanel" aria-labelledby="tab1">
+    <p>Product description...</p>
+  </div>
+  <div id="panel2" role="tabpanel" aria-labelledby="tab2" hidden>
+    <p>Product specifications...</p>
+  </div>
+  <div id="panel3" role="tabpanel" aria-labelledby="tab3" hidden>
+    <p>Product reviews...</p>
+  </div>
+</div>
+
+<script>
+const tablist = document.querySelector('[role="tablist"]');
+const tabs = Array.from(tablist.querySelectorAll('[role="tab"]'));
+
+tabs.forEach(tab => {
+  tab.addEventListener('click', () => selectTab(tab));
+
+  tab.addEventListener('keydown', (e) => {
+    const index = tabs.indexOf(tab);
+    let nextTab;
+
+    if (e.key === 'ArrowRight') {
+      nextTab = tabs[(index + 1) % tabs.length];
+    } else if (e.key === 'ArrowLeft') {
+      nextTab = tabs[(index - 1 + tabs.length) % tabs.length];
+    } else if (e.key === 'Home') {
+      nextTab = tabs[0];
+    } else if (e.key === 'End') {
+      nextTab = tabs[tabs.length - 1];
+    }
+
+    if (nextTab) {
+      e.preventDefault();
+      selectTab(nextTab);
+      nextTab.focus();
+    }
+  });
+});
+
+function selectTab(selectedTab) {
+  tabs.forEach(tab => {
+    const isSelected = tab === selectedTab;
+    tab.setAttribute('aria-selected', isSelected);
+    tab.tabIndex = isSelected ? 0 : -1;
+
+    const panel = document.getElementById(tab.getAttribute('aria-controls'));
+    panel.hidden = !isSelected;
+  });
+}
+</script>
+```
+
+**Keyboard:**
+- Tab: Move into/out of tab list
+- Arrow Left/Right: Navigate between tabs
+- Home/End: Jump to first/last tab
+- Enter/Space: Activate focused tab (optional - can auto-activate on focus)
+
+### 6. Modal Dialog
+
+```html
+<div role="dialog"
+     aria-modal="true"
+     aria-labelledby="dialog-title"
+     aria-describedby="dialog-desc">
+  <h2 id="dialog-title">Confirm Delete</h2>
+  <p id="dialog-desc">
+    Are you sure you want to delete this item? This action cannot be undone.
+  </p>
+  <button onclick="confirmDelete()">Delete</button>
+  <button onclick="closeDialog()">Cancel</button>
+</div>
+
+<script>
+let previousFocus;
+
+function openDialog(dialog) {
+  previousFocus = document.activeElement;
+  dialog.style.display = 'block';
+
+  // Trap focus in dialog
+  trapFocus(dialog);
+
+  // Focus first focusable element
+  const focusable = dialog.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
+  if (focusable.length) focusable[0].focus();
+
+  // Close on Escape
+  dialog.addEventListener('keydown', (e) => {
+    if (e.key === 'Escape') closeDialog(dialog);
+  });
+}
+
+function closeDialog(dialog) {
+  dialog.style.display = 'none';
+  if (previousFocus) previousFocus.focus();
+}
+
+function trapFocus(element) {
+  const focusable = element.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
+  const first = focusable[0];
+  const last = focusable[focusable.length - 1];
+
+  element.addEventListener('keydown', (e) => {
+    if (e.key === 'Tab') {
+      if (e.shiftKey) {
+        if (document.activeElement === first) {
+          last.focus();
+          e.preventDefault();
+        }
+      } else {
+        if (document.activeElement === last) {
+          first.focus();
+          e.preventDefault();
+        }
+      }
+    }
+  });
+}
+</script>
+```
+
+**Keyboard:**
+- Tab: Cycle through focusable elements in dialog only
+- Escape: Close dialog
+- Focus returns to trigger element on close
+
+### 7. Dropdown Menu
+
+```html
+<div class="menu-container">
+  <button aria-haspopup="true"
+          aria-expanded="false"
+          aria-controls="menu"
+          id="menubutton">
+    Actions
+  </button>
+
+  <ul role="menu"
+      aria-labelledby="menubutton"
+      id="menu"
+      hidden>
+    <li role="menuitem" tabindex="-1">Edit</li>
+    <li role="menuitem" tabindex="-1">Delete</li>
+    <li role="menuitem" tabindex="-1">Share</li>
+  </ul>
+</div>
+
+<script>
+const menuButton = document.getElementById('menubutton');
+const menu = document.getElementById('menu');
+const menuItems = Array.from(menu.querySelectorAll('[role="menuitem"]'));
+
+menuButton.addEventListener('click', () => toggleMenu());
+
+function toggleMenu() {
+  const expanded = menuButton.getAttribute('aria-expanded') === 'true';
+  menuButton.setAttribute('aria-expanded', !expanded);
+  menu.hidden = expanded;
+
+  if (!expanded && menuItems.length) {
+    menuItems[0].focus();
+  }
+}
+
+menu.addEventListener('keydown', (e) => {
+  const currentIndex = menuItems.indexOf(document.activeElement);
+  let nextItem;
+
+  if (e.key === 'ArrowDown') {
+    nextItem = menuItems[(currentIndex + 1) % menuItems.length];
+  } else if (e.key === 'ArrowUp') {
+    nextItem = menuItems[(currentIndex - 1 + menuItems.length) % menuItems.length];
+  } else if (e.key === 'Home') {
+    nextItem = menuItems[0];
+  } else if (e.key === 'End') {
+    nextItem = menuItems[menuItems.length - 1];
+  } else if (e.key === 'Escape') {
+    toggleMenu();
+    menuButton.focus();
+    return;
+  }
+
+  if (nextItem) {
+    e.preventDefault();
+    nextItem.focus();
+  }
+});
+
+menuItems.forEach(item => {
+  item.addEventListener('click', () => {
+    // Perform action
+    toggleMenu();
+    menuButton.focus();
+  });
+});
+</script>
+```
+
+**Keyboard:**
+- Enter/Space: Open menu
+- Arrow Down/Up: Navigate items
+- Home/End: Jump to first/last item
+- Escape: Close menu
+- Enter: Select item and close

package/skills/product/accessibility/refs/audit-report-findings.md

@@ -0,0 +1,248 @@
+---
+phase_relevance: ["clarify", "design", "review"]
+archetype_relevance: ["*"]
+---
+# Accessibility Audit Report: Findings Template
+
+Template for executive summary, methodology, and detailed findings sections of an accessibility audit.
+
+## Executive Summary
+
+**Project**: [Project name]
+**Audit Date**: [YYYY-MM-DD]
+**Auditor**: [Name/Team]
+**WCAG Target**: [Level AA | Level AAA]
+**Pages Tested**: [List or count]
+
+### Overall Result
+
+**Compliance Status**: [✓ Compliant | ⚠ Partial Compliance | ✗ Non-Compliant]
+
+**WCAG 2.1 Principles:**
+- Perceivable: [✓ | ⚠ | ✗]
+- Operable: [✓ | ⚠ | ✗]
+- Understandable: [✓ | ⚠ | ✗]
+- Robust: [✓ | ⚠ | ✗]
+
+### Summary Metrics
+
+| Severity | Count | % Fixed |
+|----------|-------|---------|
+| Critical (Level A) | X | 0% |
+| Major (Level AA) | X | 0% |
+| Minor (AAA/Best Practice) | X | 0% |
+| **Total** | **X** | **0%** |
+
+### Key Findings
+
+**Top 3 Issues:**
+1. [Most impactful issue]
+2. [Second most impactful]
+3. [Third most impactful]
+
+**Positive Observations:**
+- [Good practice found]
+- [Another good practice]
+
+---
+
+## Methodology
+
+### Testing Approach
+
+**Automated Tools:**
+- axe DevTools [version]
+- Lighthouse [version]
+- WAVE
+- Pa11y
+
+**Manual Testing:**
+- Keyboard navigation (Chrome, Safari)
+- Screen readers:
+  - VoiceOver + Safari (macOS)
+  - NVDA + Firefox (Windows)
+- Color contrast analyzer
+- Code review
+
+**User Flows Tested:**
+1. [Primary user flow]
+2. [Secondary flow]
+3. [Form submission flow]
+
+**Browsers Tested:**
+- Chrome [version]
+- Firefox [version]
+- Safari [version]
+- Edge [version]
+
+**Devices:**
+- Desktop (1920x1080)
+- Tablet (iPad)
+- Mobile (iPhone)
+
+---
+
+## Detailed Findings
+
+### Critical Issues (Level A)
+
+Blocking issues that prevent access for users with disabilities.
+
+#### 1. [Issue Title]
+
+**WCAG Criterion**: [e.g., 1.1.1 Non-text Content (Level A)]
+
+**Impact**: [High | Medium | Low]
+**Affected Users**: [Screen reader users | Keyboard users | Low vision users | etc.]
+**Frequency**: [How often this occurs - e.g., "All pages" | "Form pages only"]
+
+**Description:**
+[Detailed description of the issue and why it's a problem]
+
+**Location:**
+```
+File: src/components/Header.tsx
+Line: 45-52
+URL: /dashboard
+Element: <img src="logo.png">
+```
+
+**Current State:**
+```html
+<img src="logo.png">
+```
+
+**Expected State (WCAG):**
+```html
+<img src="logo.png" alt="Company Name - Home">
+```
+
+**How to Reproduce:**
+1. Navigate to /dashboard
+2. Turn on screen reader
+3. Tab to logo image
+4. Image announced as "logo.png" instead of company name
+
+**Recommendation:**
+Add descriptive alt text to the logo image. The alt text should identify the company and indicate that it's a link to the homepage.
+
+**Code Fix:**
+```html
+<a href="/">
+  <img src="logo.png" alt="Company Name - Home">
+</a>
+```
+
+**Resources:**
+- [WebAIM: Alternative Text](https://webaim.org/techniques/alttext/)
+- [WCAG 1.1.1 Understanding Doc](https://www.w3.org/WAI/WCAG21/Understanding/non-text-content.html)
+
+**Priority**: P0 (Must fix before release)
+**Estimated Effort**: 1 hour
+
+---
+
+#### 2. [Next Critical Issue]
+
+[Repeat structure above for each critical issue]
+
+---
+
+### Major Issues (Level AA)
+
+Significant barriers that impact usability for many users.
+
+#### 3. [Issue Title]
+
+**WCAG Criterion**: [e.g., 1.4.3 Contrast (Minimum) (Level AA)]
+
+**Impact**: [High | Medium | Low]
+**Affected Users**: [Low vision users | Color blind users | etc.]
+**Frequency**: [Throughout site | Specific components]
+
+**Description:**
+[Detailed description]
+
+**Location:**
+```
+File: src/styles/theme.css
+Line: 23
+Components: Buttons, Links
+```
+
+**Current State:**
+```css
+.button-secondary {
+  color: #999999;
+  background: #ffffff;
+}
+```
+Contrast ratio: 2.8:1 (Fails - needs 4.5:1)
+
+**Expected State:**
+```css
+.button-secondary {
+  color: #666666;
+  background: #ffffff;
+}
+```
+Contrast ratio: 4.7:1 (Passes)
+
+**Recommendation:**
+Darken the text color to meet WCAG AA contrast requirements. Test with a contrast checker tool.
+
+**Tool to Verify:**
+Compute the WCAG contrast ratio for `#666666` on `#ffffff` (or use a contrast
+checker such as axe / WebAIM): 4.7:1 — PASS (AA).
+
+**Priority**: P1 (Fix before public release)
+**Estimated Effort**: 2 hours (update theme + test all instances)
+
+---
+
+### Minor Issues (AAA / Best Practices)
+
+Enhancements that improve accessibility beyond minimum compliance.
+
+#### [Issue Number]. [Issue Title]
+
+**WCAG Criterion**: [e.g., 2.4.8 Location (Level AAA)] or [Best Practice]
+
+**Impact**: Low
+**Affected Users**: [All users benefit]
+
+**Description:**
+[Brief description]
+
+**Recommendation:**
+[Quick fix suggestion]
+
+**Priority**: P3 (Nice to have)
+**Estimated Effort**: [Time estimate]
+
+---
+
+## Test Results by Page
+
+### Homepage (/)
+
+**Status**: [✓ Pass | ⚠ Issues | ✗ Fail]
+
+**Issues Found**: [Count]
+- Critical: [Count]
+- Major: [Count]
+- Minor: [Count]
+
+**Detailed Issues:**
+- Issue #1: [Brief description]
+- Issue #3: [Brief description]
+
+**Keyboard Navigation**: [✓ Pass | ✗ Fail]
+**Screen Reader**: [✓ Pass | ✗ Fail]
+**Color Contrast**: [✓ Pass | ✗ Fail]
+
+---
+
+### Dashboard (/dashboard)
+
+[Repeat structure for each tested page]