@the-bearded-bear/claude-craft 3.0.0

package/Dev/i18n/en/Common/commands/a11y-audit.md

@@ -0,0 +1,282 @@
+---
+description: WCAG 2.2 AAA Accessibility Audit
+argument-hint: [arguments]
+---
+
+# WCAG 2.2 AAA Accessibility Audit
+
+You are a certified Accessibility Expert. You must perform a complete accessibility audit according to WCAG 2.2 level AAA criteria.
+
+## Arguments
+$ARGUMENTS
+
+Arguments:
+- Path to page/component to audit
+- (Optional) Level: AA or AAA (default: AAA)
+- (Optional) Focus: all, keyboard, contrast, aria
+
+Example: `/common:a11y-audit src/pages/Home.tsx AAA` or `/common:a11y-audit src/components/Modal.tsx AA keyboard`
+
+## MISSION
+
+### Step 1: Automated audit
+
+```bash
+# Run automated tools
+npx axe-cli {URL}
+npx pa11y {URL} --standard WCAG2AAA
+npx lighthouse {URL} --only-categories=accessibility
+
+# Check Lighthouse score
+# Objective: 100/100 on all 4 categories
+```
+
+### Step 2: Manual WCAG 2.2 audit
+
+```
+══════════════════════════════════════════════════════════════
+♿ WCAG 2.2 AAA ACCESSIBILITY AUDIT
+══════════════════════════════════════════════════════════════
+
+Page/Component: {name}
+Date: {date}
+Auditor: Claude (A11y Expert)
+Target level: AAA + Lighthouse 100/100
+
+──────────────────────────────────────────────────────────────
+📊 SCORES
+──────────────────────────────────────────────────────────────
+
+### Lighthouse
+| Category | Score | Objective | Status |
+|----------|-------|-----------|--------|
+| Performance | /100 | 100 | ✅/❌ |
+| Accessibility | /100 | 100 | ✅/❌ |
+| Best Practices | /100 | 100 | ✅/❌ |
+| SEO | /100 | 100 | ✅/❌ |
+
+### WCAG 2.2
+| Level | Criteria | Compliant | Non-compliant |
+|-------|----------|-----------|---------------|
+| A | 30 | {X} | {Y} |
+| AA | 20 | {X} | {Y} |
+| AAA | 28 | {X} | {Y} |
+
+──────────────────────────────────────────────────────────────
+1️⃣ PERCEIVABLE
+──────────────────────────────────────────────────────────────
+
+### 1.1 Text Alternatives
+
+#### 1.1.1 Non-text content (A)
+| Element | Alt text | Status | Action |
+|---------|----------|--------|--------|
+| img.logo | "Logo {name}" | ✅ | - |
+| img.hero | "" (missing) | ❌ | Add descriptive alt |
+| img.icon | aria-hidden="true" | ✅ | - |
+
+### 1.3 Adaptable
+
+#### 1.3.1 Info and Relationships (A)
+| Check | Status | Detail |
+|-------|--------|--------|
+| Heading structure | ✅/❌ | h1 → h2 → h3 sequential |
+| ARIA landmarks | ✅/❌ | header, nav, main, footer |
+| Semantic lists | ✅/❌ | ul/ol/dl appropriate |
+| Tables | ✅/❌ | th, scope, caption |
+| Forms | ✅/❌ | label + fieldset/legend |
+
+### 1.4 Distinguishable
+
+#### 1.4.3 Contrast Minimum (AA) / 1.4.6 Enhanced Contrast (AAA)
+| Element | Colors | Ratio | Required | Status |
+|---------|--------|-------|----------|--------|
+| Body text | #333 / #fff | 12.6:1 | 7:1 | ✅ |
+| Muted text | #666 / #fff | 5.7:1 | 7:1 | ❌ |
+| Primary button | #fff / #3B82F6 | 4.5:1 | 4.5:1 | ✅ |
+| Placeholder | #9CA3AF / #fff | 2.9:1 | 4.5:1 | ❌ |
+
+#### 1.4.10 Reflow (AA)
+| Test | Status | Issue |
+|------|--------|-------|
+| 320px width | ✅/❌ | {horizontal scroll?} |
+| 400% zoom | ✅/❌ | {content cut off?} |
+
+#### 1.4.11 Non-text Contrast (AA)
+| UI Element | Ratio | Status |
+|------------|-------|--------|
+| Input border | 3:1 | ✅/❌ |
+| Button border | 3:1 | ✅/❌ |
+| Action icon | 3:1 | ✅/❌ |
+| Focus ring | 3:1 | ✅/❌ |
+
+──────────────────────────────────────────────────────────────
+2️⃣ OPERABLE
+──────────────────────────────────────────────────────────────
+
+### 2.1 Keyboard Accessible
+
+#### 2.1.1 Keyboard (A) / 2.1.3 Keyboard No Exception (AAA)
+| Element | Tab | Enter | Escape | Arrows | Status |
+|---------|-----|-------|--------|--------|--------|
+| Links | ✅ | ✅ | - | - | ✅ |
+| Buttons | ✅ | ✅ | - | - | ✅ |
+| Inputs | ✅ | ✅ | - | - | ✅ |
+| Dropdown | ✅ | ✅ | ✅ | ✅ | ❌ |
+| Modal | ✅ | ✅ | ✅ | - | ✅ |
+| Custom div | ❌ | ❌ | - | - | ❌ |
+
+#### 2.1.2 No Keyboard Trap (A)
+| Zone | Entry | Exit | Status |
+|------|-------|------|--------|
+| Modal | Focus trap OK | Escape OK | ✅ |
+| Dropdown | Tab OK | Tab/Escape OK | ✅ |
+| Sidebar | Tab OK | Tab OK | ✅ |
+
+### 2.4 Navigable
+
+#### 2.4.1 Bypass Blocks (A)
+| Skip link | Destination | Status |
+|-----------|-------------|--------|
+| "Skip to content" | #main-content | ✅/❌ |
+| "Skip to navigation" | #nav | ✅/❌ |
+
+#### 2.4.3 Focus Order (A)
+| Sequence | Expected | Actual | Status |
+|----------|----------|--------|--------|
+| 1 | Skip link | Skip link | ✅ |
+| 2 | Logo | Logo | ✅ |
+| 3 | Nav item 1 | Nav item 1 | ✅ |
+| ... | ... | ... | ... |
+
+#### 2.4.7 Focus Visible (AA) / 2.4.11 Focus Enhanced (AA)
+| Element | Outline | Offset | Ratio | Status |
+|---------|---------|--------|-------|--------|
+| Links | 2px solid | 2px | 3:1 | ✅ |
+| Buttons | 2px solid | 2px | 3:1 | ✅ |
+| Inputs | 2px solid | 0 | 3:1 | ✅ |
+| Cards | ❌ | - | - | ❌ |
+
+#### 2.5.5 Target Size (AAA)
+| Element | Size | Min required | Status |
+|---------|------|--------------|--------|
+| Buttons | 44×40px | 44×44px | ❌ |
+| Menu links | 120×48px | 44×44px | ✅ |
+| Icon buttons | 32×32px | 44×44px | ❌ |
+| Checkboxes | 24×24px | 44×44px | ❌ |
+
+──────────────────────────────────────────────────────────────
+3️⃣ UNDERSTANDABLE
+──────────────────────────────────────────────────────────────
+
+### 3.1 Readable
+
+#### 3.1.1 Language of Page (A)
+```html
+<html lang="en"> <!-- ✅ Present -->
+```
+
+#### 3.1.2 Language of Parts (AA)
+| Element | Language | lang attr | Status |
+|---------|----------|-----------|--------|
+| Foreign quote | French | ❌ | ❌ |
+| Technical term | French | ❌ | ⚠️ |
+
+### 3.3 Input Assistance
+
+#### 3.3.1 Error Identification (A)
+| Field | Error message | In text | Status |
+|-------|---------------|---------|--------|
+| Email | "Invalid email" | ✅ | ✅ |
+| Password | Red border only | ❌ | ❌ |
+
+#### 3.3.2 Labels or Instructions (A)
+| Input | Label | Association | Status |
+|-------|-------|-------------|--------|
+| Email | "Email" | htmlFor OK | ✅ |
+| Search | ❌ | No label | ❌ |
+| Phone | Placeholder only | No label | ❌ |
+
+──────────────────────────────────────────────────────────────
+4️⃣ ROBUST
+──────────────────────────────────────────────────────────────
+
+### 4.1.2 Name, Role, Value (A)
+| Component | role | aria-* | Status |
+|-----------|------|--------|--------|
+| Modal | dialog | aria-modal, aria-labelledby | ✅ |
+| Dropdown | listbox | aria-expanded, aria-activedescendant | ✅ |
+| Tabs | tablist/tab | aria-selected, aria-controls | ❌ |
+| Accordion | - | aria-expanded | ❌ |
+
+### 4.1.3 Status Messages (AA)
+| Message | aria-live | aria-atomic | Status |
+|---------|-----------|-------------|--------|
+| Toast success | polite | true | ✅ |
+| Toast error | assertive | true | ✅ |
+| Loading | polite | false | ❌ |
+| Form errors | assertive | - | ❌ |
+
+──────────────────────────────────────────────────────────────
+❌ CRITICAL VIOLATIONS (Blocking)
+──────────────────────────────────────────────────────────────
+
+| # | Criterion | Element | Description | Remediation |
+|---|-----------|---------|-------------|-------------|
+| 1 | 1.4.6 | .text-muted | Contrast 5.7:1 < 7:1 | color: #595959 |
+| 2 | 2.5.5 | .btn-icon | Size 32px < 44px | min-width: 44px |
+| 3 | 3.3.2 | input[type="search"] | No label | Add label |
+
+──────────────────────────────────────────────────────────────
+⚠️ MAJOR VIOLATIONS
+──────────────────────────────────────────────────────────────
+
+| # | Criterion | Element | Description | Remediation |
+|---|-----------|---------|-------------|-------------|
+| 4 | 2.1.1 | .card-clickable | div not focusable | Use button |
+| 5 | 4.1.2 | .tabs | Incorrect ARIA | Add role="tablist" |
+
+──────────────────────────────────────────────────────────────
+ℹ️ MINOR VIOLATIONS
+──────────────────────────────────────────────────────────────
+
+| # | Criterion | Element | Description | Remediation |
+|---|-----------|---------|-------------|-------------|
+| 6 | 3.1.2 | blockquote | EN text without lang | lang="en" |
+
+──────────────────────────────────────────────────────────────
+✅ NOTABLE COMPLIANT POINTS
+──────────────────────────────────────────────────────────────
+
+- Correct semantic structure (headings, landmarks)
+- Skip link present and functional
+- Correct focus trap on modals
+- Clear text error messages
+
+──────────────────────────────────────────────────────────────
+🎯 REMEDIATION PLAN
+──────────────────────────────────────────────────────────────
+
+### Priority 1 - Critical (this week)
+1. [ ] Fix .text-muted contrast → #595959
+2. [ ] Enlarge touch targets to 44px minimum
+3. [ ] Add labels to inputs without label
+
+### Priority 2 - Major (this sprint)
+4. [ ] Replace clickable divs with button
+5. [ ] Fix ARIA on Tabs component
+6. [ ] Add aria-live on loading states
+
+### Priority 3 - Minor (backlog)
+7. [ ] Add lang="en" on English text
+```
+
+### Step 3: Screen reader test
+
+- VoiceOver (macOS): complete navigation
+- NVDA (Windows): announcement verification
+- TalkBack (Android): if mobile app
+
+### Step 4: Keyboard-only test
+
+Navigate the entire interface using only the keyboard.

package/Dev/i18n/en/Common/commands/a11y-component.md

@@ -0,0 +1,396 @@
+---
+description: Component Accessibility Specification
+argument-hint: [arguments]
+---
+
+# Component Accessibility Specification
+
+You are a certified Accessibility Expert. You must produce complete accessibility specifications for a UI component.
+
+## Arguments
+$ARGUMENTS
+
+Arguments:
+- Component name
+- (Optional) Type: button, input, modal, dropdown, tabs, accordion, tooltip, etc.
+
+Example: `/common:a11y-component Modal` or `/common:a11y-component "Date Picker" type:input`
+
+## MISSION
+
+### Step 1: Identify the ARIA pattern
+
+Consult the ARIA Authoring Practices Guide (APG) for the corresponding pattern.
+
+### Step 2: Produce the specification
+
+```
+══════════════════════════════════════════════════════════════
+♿ ACCESSIBILITY SPECIFICATION: {COMPONENT_NAME}
+══════════════════════════════════════════════════════════════
+
+Type: {Button | Input | Dialog | Listbox | Tabs | ...}
+APG Pattern: {link to official pattern}
+Date: {date}
+
+──────────────────────────────────────────────────────────────
+📋 HTML SEMANTICS
+──────────────────────────────────────────────────────────────
+
+### Recommended native element
+
+```html
+<!-- Always prefer native element -->
+<{element} ...>
+  {content}
+</{element}>
+```
+
+### If custom component required
+
+```html
+<div role="{role}" ...>
+  {content}
+</div>
+```
+
+### Complete structure
+
+```html
+<!-- Complete example with ARIA -->
+<div
+  role="{role}"
+  aria-{attribute}="{value}"
+  tabindex="0"
+>
+  <span id="{id}-label">{Label}</span>
+  <div id="{id}-description">{Description}</div>
+  {content}
+</div>
+```
+
+──────────────────────────────────────────────────────────────
+🏷️ ARIA ATTRIBUTES
+──────────────────────────────────────────────────────────────
+
+### Required attributes
+
+| Attribute | Value | When | Description |
+|-----------|-------|------|-------------|
+| role | {role} | Always (if custom) | Defines the type |
+| aria-label | "{text}" | If no visible label | Accessible label |
+| aria-labelledby | "{id}" | If visible label | Reference to label |
+
+### Conditional attributes
+
+| Attribute | Value | When | Description |
+|-----------|-------|------|-------------|
+| aria-describedby | "{id}" | If description | Reference to description |
+| aria-expanded | "true"/"false" | If expandable | Open/closed state |
+| aria-controls | "{id}" | If controls other | ID of controlled element |
+| aria-owns | "{id}" | If separate DOM | Parent relationship |
+| aria-haspopup | "dialog"/"menu"/"listbox" | If popup | Popup type |
+| aria-pressed | "true"/"false" | If toggle | Pressed state |
+| aria-selected | "true"/"false" | If selection | Selected state |
+| aria-checked | "true"/"false"/"mixed" | If checkbox | Checked state |
+| aria-disabled | "true" | If disabled | Disabled state |
+| aria-invalid | "true" | If error | Invalid state |
+| aria-required | "true" | If required | Required field |
+| aria-busy | "true" | If loading | In progress |
+| aria-live | "polite"/"assertive" | If dynamic | Announce change |
+| aria-atomic | "true" | With aria-live | Announce all |
+
+### States by interaction
+
+| State | ARIA attributes |
+|-------|-----------------|
+| Default | {base attributes} |
+| Hover | No ARIA change |
+| Focus | No ARIA change |
+| Expanded | aria-expanded="true" |
+| Collapsed | aria-expanded="false" |
+| Selected | aria-selected="true" |
+| Disabled | aria-disabled="true" |
+| Loading | aria-busy="true" |
+| Error | aria-invalid="true", aria-errormessage="{id}" |
+
+──────────────────────────────────────────────────────────────
+⌨️ KEYBOARD NAVIGATION
+──────────────────────────────────────────────────────────────
+
+### Main keys
+
+| Key | Action | Detail |
+|-----|--------|--------|
+| Tab | Focus on component | Enters the component |
+| Shift+Tab | Previous focus | Exits the component |
+| Enter | Activate | Primary action |
+| Space | Activate (toggle) | For toggle buttons |
+| Escape | Close/Cancel | If popup/modal |
+| ↑ Arrow Up | Previous item | List navigation |
+| ↓ Arrow Down | Next item | List navigation |
+| ← Arrow Left | Previous item (horizontal) | Tabs, slider |
+| → Arrow Right | Next item (horizontal) | Tabs, slider |
+| Home | First item | Quick navigation |
+| End | Last item | Quick navigation |
+
+### Focus management
+
+| Situation | Behavior |
+|-----------|----------|
+| Opening | Focus on {first focusable element} |
+| Closing | Focus returns to {trigger element} |
+| Internal navigation | Roving tabindex OR aria-activedescendant |
+| Focus trap | {Yes for modal / No for dropdown} |
+
+### Roving tabindex (if applicable)
+
+```html
+<!-- Only one focusable element at a time -->
+<div role="tablist">
+  <button role="tab" tabindex="0" aria-selected="true">Tab 1</button>
+  <button role="tab" tabindex="-1" aria-selected="false">Tab 2</button>
+  <button role="tab" tabindex="-1" aria-selected="false">Tab 3</button>
+</div>
+```
+
+──────────────────────────────────────────────────────────────
+🎯 VISIBLE FOCUS
+──────────────────────────────────────────────────────────────
+
+### Required style (WCAG 2.4.11 AAA)
+
+```css
+.{component}:focus-visible {
+  /* Visible outline */
+  outline: 2px solid var(--color-focus);
+  outline-offset: 2px;
+
+  /* Contrast ratio ≥ 3:1 */
+  /* Focus area ≥ visible perimeter */
+}
+
+/* Reset for mouse */
+.{component}:focus:not(:focus-visible) {
+  outline: none;
+}
+```
+
+### Verifications
+
+| Criterion | Value | Status |
+|-----------|-------|--------|
+| Outline thickness | ≥ 2px | ✅ |
+| Outline contrast | ≥ 3:1 | ✅ |
+| Visible area | ≥ perimeter | ✅ |
+| Visible on all backgrounds | Yes | ✅ |
+
+──────────────────────────────────────────────────────────────
+🔊 SCREEN READER ANNOUNCEMENTS
+──────────────────────────────────────────────────────────────
+
+### On entry (focus)
+
+```
+"{Label}, {role}, {state}"
+
+Examples:
+- "Submit, button"
+- "Main menu, menu, collapsed"
+- "Name, text field, required"
+- "Newsletter, checkbox, not checked"
+```
+
+### During interaction
+
+| Action | Announcement |
+|--------|--------------|
+| Expansion | "expanded" / "collapsed" |
+| Selection | "selected" |
+| Toggle | "on" / "off" |
+| Loading | "Loading" |
+| Success | "{success message}" |
+| Error | "Error: {message}" |
+
+### Dynamic content (aria-live)
+
+```html
+<!-- Polite notifications (non-urgent) -->
+<div aria-live="polite" aria-atomic="true">
+  {toast message}
+</div>
+
+<!-- Urgent notifications (errors) -->
+<div aria-live="assertive" aria-atomic="true">
+  {error message}
+</div>
+```
+
+──────────────────────────────────────────────────────────────
+📏 CONTRAST (WCAG AAA)
+──────────────────────────────────────────────────────────────
+
+### Text
+
+| Type | Required ratio | Verification |
+|------|----------------|--------------|
+| Normal text (< 18px) | ≥ 7:1 | {color} / {background} = {ratio} |
+| Large text (≥ 18px or 14px bold) | ≥ 4.5:1 | {color} / {background} = {ratio} |
+
+### UI Elements
+
+| Element | Required ratio | Verification |
+|---------|----------------|--------------|
+| Borders | ≥ 3:1 | {color} / {background} = {ratio} |
+| Icons | ≥ 3:1 | {color} / {background} = {ratio} |
+| Focus outline | ≥ 3:1 | {color} / {background} = {ratio} |
+
+### States
+
+| State | Contrast verification |
+|-------|----------------------|
+| Default | ✅ {ratio} |
+| Hover | ✅ {ratio} |
+| Focus | ✅ {ratio} |
+| Disabled | ⚠️ Not required but recommended |
+
+──────────────────────────────────────────────────────────────
+📐 TOUCH TARGETS (WCAG 2.5.5 AAA)
+──────────────────────────────────────────────────────────────
+
+### Minimum dimensions
+
+| Criterion | Value | Status |
+|-----------|-------|--------|
+| Minimum size | 44 × 44 CSS pixels | ✅/❌ |
+| Spacing between targets | ≥ 8px | ✅/❌ |
+
+### Implementation
+
+```css
+.{component} {
+  min-width: 44px;
+  min-height: 44px;
+  /* OR padding to reach 44px */
+  padding: 10px 16px; /* if text height ~24px */
+}
+
+/* Icon buttons */
+.{component}-icon {
+  width: 44px;
+  height: 44px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+```
+
+──────────────────────────────────────────────────────────────
+🧪 TESTS TO PERFORM
+──────────────────────────────────────────────────────────────
+
+### Automated
+
+- [ ] axe DevTools: 0 violations
+- [ ] Lighthouse Accessibility: 100/100
+- [ ] ESLint jsx-a11y: 0 errors
+
+### Manual
+
+- [ ] Complete keyboard navigation
+- [ ] Visible focus at each step
+- [ ] No keyboard trap
+- [ ] Logical focus order
+
+### Screen reader
+
+- [ ] VoiceOver (macOS/iOS): correct announcements
+- [ ] NVDA (Windows): list/table navigation
+- [ ] TalkBack (Android): if mobile
+
+### Edge cases
+
+- [ ] 400% zoom: no content loss
+- [ ] High contrast mode: visible
+- [ ] Reduced motion: animations respected
+
+──────────────────────────────────────────────────────────────
+💻 IMPLEMENTATION EXAMPLE
+──────────────────────────────────────────────────────────────
+
+```tsx
+// {Component}.tsx
+import { forwardRef, useId } from 'react';
+
+interface {Component}Props {
+  label: string;
+  description?: string;
+  disabled?: boolean;
+  // ...other props
+}
+
+export const {Component} = forwardRef<HTML{Element}Element, {Component}Props>(
+  ({ label, description, disabled, ...props }, ref) => {
+    const id = useId();
+    const descriptionId = description ? `${id}-description` : undefined;
+
+    return (
+      <{element}
+        ref={ref}
+        id={id}
+        role="{role}"
+        aria-label={label}
+        aria-describedby={descriptionId}
+        aria-disabled={disabled}
+        tabIndex={disabled ? -1 : 0}
+        {...props}
+      >
+        {/* Content */}
+
+        {description && (
+          <span id={descriptionId} className="sr-only">
+            {description}
+          </span>
+        )}
+      </{element}>
+    );
+  }
+);
+
+{Component}.displayName = '{Component}';
+```
+
+──────────────────────────────────────────────────────────────
+✅ VALIDATION CHECKLIST
+──────────────────────────────────────────────────────────────
+
+### Semantics
+- [ ] Native HTML element used if possible
+- [ ] Correct ARIA role if custom
+- [ ] Logical DOM structure
+
+### ARIA
+- [ ] Required attributes present
+- [ ] Conditional attributes correct
+- [ ] No ARIA overload (native > ARIA)
+
+### Keyboard
+- [ ] Focusable (appropriate tabindex)
+- [ ] All actions via keyboard
+- [ ] No keyboard trap
+- [ ] Compliant visible focus
+
+### Announcements
+- [ ] Label announced on focus
+- [ ] States announced on change
+- [ ] Errors with aria-live assertive
+
+### Contrast
+- [ ] Text ≥ 7:1 (AAA)
+- [ ] UI ≥ 3:1
+- [ ] Focus ≥ 3:1
+
+### Touch
+- [ ] Targets ≥ 44×44px
+- [ ] Spacing ≥ 8px
+```