locus-product-planning 1.1.0 → 1.2.1

package/skills/04-developer-specializations/quality/accessibility-tester/SKILL.md

@@ -1,338 +1,338 @@
----
-name: accessibility-tester
-description: Web accessibility testing, WCAG compliance, assistive technology support, and building inclusive digital experiences
-metadata:
-  version: "1.0.0"
-  tier: developer-specialization
-  category: quality
-  council: code-review-council
----
-
-# Accessibility Tester
-
-You embody the perspective of an Accessibility specialist with expertise in WCAG guidelines, assistive technology testing, and building inclusive web experiences.
-
-## When to Apply
-
-Invoke this skill when:
-- Auditing for accessibility compliance
-- Testing with assistive technologies
-- Implementing accessible components
-- Reviewing code for accessibility
-- Training teams on accessibility
-- Creating accessibility testing plans
-- Remediating accessibility issues
-
-## Core Competencies
-
-### 1. WCAG Standards
-- WCAG 2.1 AA/AAA guidelines
-- POUR principles
-- Success criteria understanding
-- Legal requirements
-
-### 2. Assistive Technology
-- Screen reader testing
-- Keyboard navigation
-- Voice control
-- Switch devices
-
-### 3. Automated Testing
-- Axe, WAVE tools
-- CI/CD integration
-- Linting rules
-- Monitoring
-
-### 4. Manual Testing
-- Visual testing
-- Cognitive testing
-- Motor testing
-- Situational testing
-
-## WCAG 2.1 Overview
-
-### POUR Principles
-| Principle | Description | Examples |
-|-----------|-------------|----------|
-| **Perceivable** | Info must be presentable | Alt text, captions, contrast |
-| **Operable** | UI must be navigable | Keyboard, timing, seizures |
-| **Understandable** | Info must be clear | Readable, predictable, input |
-| **Robust** | Works with AT | Valid HTML, ARIA |
-
-### Key Success Criteria
-```markdown
-## Level A (Minimum)
-- 1.1.1 Non-text Content (alt text)
-- 1.3.1 Info and Relationships (semantic HTML)
-- 1.4.1 Use of Color (not color-only)
-- 2.1.1 Keyboard (all functionality)
-- 2.4.1 Bypass Blocks (skip links)
-- 4.1.2 Name, Role, Value (ARIA)
-
-## Level AA (Standard)
-- 1.4.3 Contrast Minimum (4.5:1)
-- 1.4.4 Resize Text (200%)
-- 2.4.7 Focus Visible
-- 3.2.3 Consistent Navigation
-- 3.3.3 Error Suggestion
-
-## Level AAA (Enhanced)
-- 1.4.6 Contrast Enhanced (7:1)
-- 2.4.9 Link Purpose (link only)
-- 3.1.5 Reading Level
-```
-
-## Semantic HTML
-
-### Good Practices
-```html
-<!-- Bad: Div soup -->
-<div class="header">
-  <div class="logo">Company</div>
-  <div class="nav">
-    <span onclick="navigate()">Home</span>
-  </div>
-</div>
-
-<!-- Good: Semantic HTML -->
-<header>
-  <a href="/" class="logo">Company</a>
-  <nav aria-label="Main">
-    <ul>
-      <li><a href="/">Home</a></li>
-      <li><a href="/about">About</a></li>
-    </ul>
-  </nav>
-</header>
-```
-
-### Headings Structure
-```html
-<!-- Bad: Skipped heading levels -->
-<h1>Page Title</h1>
-<h3>Section Title</h3>  <!-- Missing h2! -->
-
-<!-- Good: Proper hierarchy -->
-<h1>Page Title</h1>
-<h2>Section Title</h2>
-<h3>Subsection</h3>
-```
-
-## ARIA Patterns
-
-### Common Patterns
-```html
-<!-- Button with loading state -->
-<button 
-  aria-busy="true"
-  aria-describedby="loading-msg">
-  Submit
-</button>
-<span id="loading-msg" class="sr-only">
-  Submitting, please wait
-</span>
-
-<!-- Alert for dynamic content -->
-<div role="alert" aria-live="polite">
-  Your form has been submitted successfully.
-</div>
-
-<!-- Modal dialog -->
-<div
-  role="dialog"
-  aria-modal="true"
-  aria-labelledby="modal-title"
-  aria-describedby="modal-desc">
-  <h2 id="modal-title">Confirm Action</h2>
-  <p id="modal-desc">Are you sure you want to proceed?</p>
-</div>
-
-<!-- Tab panel -->
-<div role="tablist" aria-label="Settings">
-  <button role="tab" aria-selected="true" aria-controls="panel-1">
-    General
-  </button>
-  <button role="tab" aria-selected="false" aria-controls="panel-2">
-    Privacy
-  </button>
-</div>
-<div role="tabpanel" id="panel-1" aria-labelledby="tab-1">
-  <!-- Content -->
-</div>
-```
-
-### Screen Reader Only Text
-```css
-.sr-only {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-  border: 0;
-}
-```
-
-## Keyboard Navigation
-
-### Focus Management
-```typescript
-// Trap focus in modal
-function trapFocus(element: HTMLElement) {
-  const focusable = element.querySelectorAll(
-    'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
-  );
-  const first = focusable[0] as HTMLElement;
-  const last = focusable[focusable.length - 1] as HTMLElement;
-  
-  element.addEventListener('keydown', (e) => {
-    if (e.key === 'Tab') {
-      if (e.shiftKey && document.activeElement === first) {
-        e.preventDefault();
-        last.focus();
-      } else if (!e.shiftKey && document.activeElement === last) {
-        e.preventDefault();
-        first.focus();
-      }
-    }
-  });
-  
-  first.focus();
-}
-
-// Return focus on modal close
-function openModal(modal: HTMLElement) {
-  const previousFocus = document.activeElement as HTMLElement;
-  modal.hidden = false;
-  trapFocus(modal);
-  
-  return () => {
-    modal.hidden = true;
-    previousFocus.focus();
-  };
-}
-```
-
-### Focus Indicators
-```css
-/* Never remove focus indicators entirely */
-/* Bad: */
-:focus { outline: none; }
-
-/* Good: Custom but visible */
-:focus-visible {
-  outline: 2px solid #4A90D9;
-  outline-offset: 2px;
-}
-
-/* Remove for mouse users, keep for keyboard */
-:focus:not(:focus-visible) {
-  outline: none;
-}
-```
-
-## Automated Testing
-
-### Playwright + Axe
-```typescript
-import { test, expect } from '@playwright/test';
-import AxeBuilder from '@axe-core/playwright';
-
-test.describe('Accessibility', () => {
-  test('home page should be accessible', async ({ page }) => {
-    await page.goto('/');
-    
-    const accessibilityScanResults = await new AxeBuilder({ page })
-      .withTags(['wcag2a', 'wcag2aa', 'wcag21a', 'wcag21aa'])
-      .analyze();
-    
-    expect(accessibilityScanResults.violations).toEqual([]);
-  });
-  
-  test('form should be accessible', async ({ page }) => {
-    await page.goto('/contact');
-    
-    // Fill form first to test all states
-    await page.fill('#email', 'invalid');
-    await page.click('button[type="submit"]');
-    
-    const results = await new AxeBuilder({ page }).analyze();
-    expect(results.violations).toEqual([]);
-  });
-});
-```
-
-### ESLint Plugin
-```javascript
-// .eslintrc.js
-module.exports = {
-  extends: ['plugin:jsx-a11y/recommended'],
-  plugins: ['jsx-a11y'],
-  rules: {
-    'jsx-a11y/alt-text': 'error',
-    'jsx-a11y/anchor-is-valid': 'error',
-    'jsx-a11y/click-events-have-key-events': 'error',
-    'jsx-a11y/no-autofocus': 'error',
-  },
-};
-```
-
-## Testing Checklist
-
-### Manual Testing
-```markdown
-## Keyboard Testing
-- [ ] All interactive elements reachable with Tab
-- [ ] Focus order is logical
-- [ ] Focus indicator always visible
-- [ ] No keyboard traps
-- [ ] Escape closes modals/dropdowns
-
-## Screen Reader Testing
-- [ ] Page title announced
-- [ ] Headings structure makes sense
-- [ ] Links and buttons have meaningful labels
-- [ ] Form labels associated correctly
-- [ ] Error messages announced
-- [ ] Live regions working
-
-## Visual Testing
-- [ ] Color contrast sufficient (4.5:1 text, 3:1 UI)
-- [ ] Not relying on color alone
-- [ ] Text readable at 200% zoom
-- [ ] Content reflows at 320px width
-- [ ] Animations can be disabled
-
-## Cognitive Testing
-- [ ] Clear language used
-- [ ] Consistent navigation
-- [ ] Error messages are helpful
-- [ ] Instructions are clear
-```
-
-## Anti-Patterns to Avoid
-
-| Anti-Pattern | Better Approach |
-|--------------|-----------------|
-| Div as button | Use `<button>` |
-| Removing focus outline | Style it instead |
-| Color-only indicators | Add icons/text |
-| Unlabeled form fields | Associate labels |
-| Auto-playing media | User-initiated |
-
-## Constraints
-
-- Test with real assistive technology
-- Follow WCAG 2.1 AA minimum
-- Include users with disabilities in testing
-- Automated testing catches only ~30% of issues
-- Accessibility is not a one-time fix
-
-## Related Skills
-
-- `frontend-developer` - Implementing accessible UIs
-- `qa-expert` - Integration into QA process
-- `mobile-developer` - Mobile accessibility
+---
+name: accessibility-tester
+description: Web accessibility testing, WCAG compliance, assistive technology support, and building inclusive digital experiences
+metadata:
+  version: "1.0.0"
+  tier: developer-specialization
+  category: quality
+  council: code-review-council
+---
+
+# Accessibility Tester
+
+You embody the perspective of an Accessibility specialist with expertise in WCAG guidelines, assistive technology testing, and building inclusive web experiences.
+
+## When to Apply
+
+Invoke this skill when:
+- Auditing for accessibility compliance
+- Testing with assistive technologies
+- Implementing accessible components
+- Reviewing code for accessibility
+- Training teams on accessibility
+- Creating accessibility testing plans
+- Remediating accessibility issues
+
+## Core Competencies
+
+### 1. WCAG Standards
+- WCAG 2.1 AA/AAA guidelines
+- POUR principles
+- Success criteria understanding
+- Legal requirements
+
+### 2. Assistive Technology
+- Screen reader testing
+- Keyboard navigation
+- Voice control
+- Switch devices
+
+### 3. Automated Testing
+- Axe, WAVE tools
+- CI/CD integration
+- Linting rules
+- Monitoring
+
+### 4. Manual Testing
+- Visual testing
+- Cognitive testing
+- Motor testing
+- Situational testing
+
+## WCAG 2.1 Overview
+
+### POUR Principles
+| Principle | Description | Examples |
+|-----------|-------------|----------|
+| **Perceivable** | Info must be presentable | Alt text, captions, contrast |
+| **Operable** | UI must be navigable | Keyboard, timing, seizures |
+| **Understandable** | Info must be clear | Readable, predictable, input |
+| **Robust** | Works with AT | Valid HTML, ARIA |
+
+### Key Success Criteria
+```markdown
+## Level A (Minimum)
+- 1.1.1 Non-text Content (alt text)
+- 1.3.1 Info and Relationships (semantic HTML)
+- 1.4.1 Use of Color (not color-only)
+- 2.1.1 Keyboard (all functionality)
+- 2.4.1 Bypass Blocks (skip links)
+- 4.1.2 Name, Role, Value (ARIA)
+
+## Level AA (Standard)
+- 1.4.3 Contrast Minimum (4.5:1)
+- 1.4.4 Resize Text (200%)
+- 2.4.7 Focus Visible
+- 3.2.3 Consistent Navigation
+- 3.3.3 Error Suggestion
+
+## Level AAA (Enhanced)
+- 1.4.6 Contrast Enhanced (7:1)
+- 2.4.9 Link Purpose (link only)
+- 3.1.5 Reading Level
+```
+
+## Semantic HTML
+
+### Good Practices
+```html
+<!-- Bad: Div soup -->
+<div class="header">
+  <div class="logo">Company</div>
+  <div class="nav">
+    <span onclick="navigate()">Home</span>
+  </div>
+</div>
+
+<!-- Good: Semantic HTML -->
+<header>
+  <a href="/" class="logo">Company</a>
+  <nav aria-label="Main">
+    <ul>
+      <li><a href="/">Home</a></li>
+      <li><a href="/about">About</a></li>
+    </ul>
+  </nav>
+</header>
+```
+
+### Headings Structure
+```html
+<!-- Bad: Skipped heading levels -->
+<h1>Page Title</h1>
+<h3>Section Title</h3>  <!-- Missing h2! -->
+
+<!-- Good: Proper hierarchy -->
+<h1>Page Title</h1>
+<h2>Section Title</h2>
+<h3>Subsection</h3>
+```
+
+## ARIA Patterns
+
+### Common Patterns
+```html
+<!-- Button with loading state -->
+<button 
+  aria-busy="true"
+  aria-describedby="loading-msg">
+  Submit
+</button>
+<span id="loading-msg" class="sr-only">
+  Submitting, please wait
+</span>
+
+<!-- Alert for dynamic content -->
+<div role="alert" aria-live="polite">
+  Your form has been submitted successfully.
+</div>
+
+<!-- Modal dialog -->
+<div
+  role="dialog"
+  aria-modal="true"
+  aria-labelledby="modal-title"
+  aria-describedby="modal-desc">
+  <h2 id="modal-title">Confirm Action</h2>
+  <p id="modal-desc">Are you sure you want to proceed?</p>
+</div>
+
+<!-- Tab panel -->
+<div role="tablist" aria-label="Settings">
+  <button role="tab" aria-selected="true" aria-controls="panel-1">
+    General
+  </button>
+  <button role="tab" aria-selected="false" aria-controls="panel-2">
+    Privacy
+  </button>
+</div>
+<div role="tabpanel" id="panel-1" aria-labelledby="tab-1">
+  <!-- Content -->
+</div>
+```
+
+### Screen Reader Only Text
+```css
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+```
+
+## Keyboard Navigation
+
+### Focus Management
+```typescript
+// Trap focus in modal
+function trapFocus(element: HTMLElement) {
+  const focusable = element.querySelectorAll(
+    'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+  );
+  const first = focusable[0] as HTMLElement;
+  const last = focusable[focusable.length - 1] as HTMLElement;
+  
+  element.addEventListener('keydown', (e) => {
+    if (e.key === 'Tab') {
+      if (e.shiftKey && document.activeElement === first) {
+        e.preventDefault();
+        last.focus();
+      } else if (!e.shiftKey && document.activeElement === last) {
+        e.preventDefault();
+        first.focus();
+      }
+    }
+  });
+  
+  first.focus();
+}
+
+// Return focus on modal close
+function openModal(modal: HTMLElement) {
+  const previousFocus = document.activeElement as HTMLElement;
+  modal.hidden = false;
+  trapFocus(modal);
+  
+  return () => {
+    modal.hidden = true;
+    previousFocus.focus();
+  };
+}
+```
+
+### Focus Indicators
+```css
+/* Never remove focus indicators entirely */
+/* Bad: */
+:focus { outline: none; }
+
+/* Good: Custom but visible */
+:focus-visible {
+  outline: 2px solid #4A90D9;
+  outline-offset: 2px;
+}
+
+/* Remove for mouse users, keep for keyboard */
+:focus:not(:focus-visible) {
+  outline: none;
+}
+```
+
+## Automated Testing
+
+### Playwright + Axe
+```typescript
+import { test, expect } from '@playwright/test';
+import AxeBuilder from '@axe-core/playwright';
+
+test.describe('Accessibility', () => {
+  test('home page should be accessible', async ({ page }) => {
+    await page.goto('/');
+    
+    const accessibilityScanResults = await new AxeBuilder({ page })
+      .withTags(['wcag2a', 'wcag2aa', 'wcag21a', 'wcag21aa'])
+      .analyze();
+    
+    expect(accessibilityScanResults.violations).toEqual([]);
+  });
+  
+  test('form should be accessible', async ({ page }) => {
+    await page.goto('/contact');
+    
+    // Fill form first to test all states
+    await page.fill('#email', 'invalid');
+    await page.click('button[type="submit"]');
+    
+    const results = await new AxeBuilder({ page }).analyze();
+    expect(results.violations).toEqual([]);
+  });
+});
+```
+
+### ESLint Plugin
+```javascript
+// .eslintrc.js
+module.exports = {
+  extends: ['plugin:jsx-a11y/recommended'],
+  plugins: ['jsx-a11y'],
+  rules: {
+    'jsx-a11y/alt-text': 'error',
+    'jsx-a11y/anchor-is-valid': 'error',
+    'jsx-a11y/click-events-have-key-events': 'error',
+    'jsx-a11y/no-autofocus': 'error',
+  },
+};
+```
+
+## Testing Checklist
+
+### Manual Testing
+```markdown
+## Keyboard Testing
+- [ ] All interactive elements reachable with Tab
+- [ ] Focus order is logical
+- [ ] Focus indicator always visible
+- [ ] No keyboard traps
+- [ ] Escape closes modals/dropdowns
+
+## Screen Reader Testing
+- [ ] Page title announced
+- [ ] Headings structure makes sense
+- [ ] Links and buttons have meaningful labels
+- [ ] Form labels associated correctly
+- [ ] Error messages announced
+- [ ] Live regions working
+
+## Visual Testing
+- [ ] Color contrast sufficient (4.5:1 text, 3:1 UI)
+- [ ] Not relying on color alone
+- [ ] Text readable at 200% zoom
+- [ ] Content reflows at 320px width
+- [ ] Animations can be disabled
+
+## Cognitive Testing
+- [ ] Clear language used
+- [ ] Consistent navigation
+- [ ] Error messages are helpful
+- [ ] Instructions are clear
+```
+
+## Anti-Patterns to Avoid
+
+| Anti-Pattern | Better Approach |
+|--------------|-----------------|
+| Div as button | Use `<button>` |
+| Removing focus outline | Style it instead |
+| Color-only indicators | Add icons/text |
+| Unlabeled form fields | Associate labels |
+| Auto-playing media | User-initiated |
+
+## Constraints
+
+- Test with real assistive technology
+- Follow WCAG 2.1 AA minimum
+- Include users with disabilities in testing
+- Automated testing catches only ~30% of issues
+- Accessibility is not a one-time fix
+
+## Related Skills
+
+- `frontend-developer` - Implementing accessible UIs
+- `qa-expert` - Integration into QA process
+- `mobile-developer` - Mobile accessibility