bee-dev-frontend-accessibility-vuejs

name: bee:dev-frontend-accessibility-vuejs title: Vue.js frontend development cycle accessibility testing (Gate 1) category: development-cycle-frontend-vuejs tier: 1 when_to_use: | Use after implementation (Gate 0) is complete in the Vue.js frontend dev cycle. MANDATORY for all Vue.js frontend development tasks - ensures WCAG 2.1 AA compliance. description: | Gate 1 of the Vue.js frontend development cycle - ensures all components pass axe-core automated accessibility scans with zero WCAG 2.1 AA violations.

trigger: |

• After implementation complete (Gate 0)
• MANDATORY for all Vue.js frontend development tasks
• Validates WCAG 2.1 AA compliance

NOT_skip_when: |

• "It's an internal tool" - WCAG compliance is mandatory for all applications.
• "The component library handles accessibility" - Library components can be misused.
• "We'll add accessibility later" - Retrofitting costs 10x more.

sequence: after: [bee:dev-implementation] before: [bee:dev-unit-testing]

related: complementary: [bee:dev-cycle-frontend-vuejs, bee:qa-analyst-frontend-vuejs]

input_schema: required: - name: unit_id type: string description: "Task or subtask identifier" - name: implementation_files type: array items: string description: "Files from Gate 0 implementation" - name: language type: string enum: [typescript] description: "Programming language (TypeScript only)" output_schema: format: markdown required_sections: - name: "Accessibility Testing Summary" pattern: "^## Accessibility Testing Summary" required: true - name: "Violations Report" pattern: "^## Violations Report" required: true - name: "Handoff to Next Gate" pattern: "^## Handoff to Next Gate" required: true metrics: - name: result type: enum values: [PASS, FAIL] - name: components_tested type: integer - name: violations_found type: integer - name: keyboard_nav_tests type: integer - name: iterations type: integer

verification: automated: - command: "grep -rn 'toHaveNoViolations\|axe(' --include='.test.ts' --include='.spec.ts' ." description: "axe-core tests exist" success_pattern: "toHaveNoViolations\|axe(" - command: "grep -rn 'getByRole\|getByLabel' --include='.test.ts' --include='.spec.ts' ." description: "Semantic selector tests exist" success_pattern: "getByRole\|getByLabel" manual: - "axe-core scans return 0 WCAG AA violations" - "Keyboard navigation tests cover all interactive elements" - "Focus management tests exist for modals and dialogs"

examples:

• name: "Accessibility tests for login form" input: unit_id: "task-001" implementation_files: ["src/components/LoginForm.vue"] language: "typescript" expected_output: |

  Accessibility Testing Summary

  Status: PASS Components Tested: 1 Violations Found: 0 Keyboard Nav Tests: 3

  Violations Report

  Component	Violations	Status
  LoginForm	0	PASS

  Handoff to Next Gate

  • Ready for Gate 2 (Unit Testing): YES

Dev Frontend Accessibility Testing - Vue.js (Gate 1)

Overview

Ensure all Vue.js frontend components meet WCAG 2.1 AA accessibility standards through automated axe-core scanning, keyboard navigation testing, and focus management validation.

Core principle: Accessibility is not optional. All components MUST be accessible to all users, including those using keyboard navigation, screen readers, and assistive technologies.

CRITICAL: Role Clarification

This skill ORCHESTRATES. Vue.js Frontend QA Analyst Agent (accessibility mode) EXECUTES.

Standards Reference

MANDATORY: Load testing-accessibility.md standards via WebFetch.

Step 1: Validate Input

REQUIRED INPUT:
- unit_id: [task/subtask being tested]
- implementation_files: [files from Gate 0]
- language: [typescript only]

OPTIONAL INPUT:
if any REQUIRED input is missing:
  → STOP and report: "Missing required input: [field]"

if language != "typescript":
  → STOP and report: "Vue.js frontend accessibility testing only supported for TypeScript/Vue"

Step 2: Dispatch Vue.js Frontend QA Analyst Agent (Accessibility Mode)

⛔ Agent Name Resolution: MUST resolve bee: names to runtime-qualified names before dispatch. See shared-patterns/shared-orchestrator-principle.md → "Agent Runtime Resolution".

Task tool:
  subagent_type: "bee:qa-analyst-frontend-vuejs"
  model: "opus"
  prompt: |
    **MODE:** ACCESSIBILITY TESTING (Gate 1)

    **Standards:** Load testing-accessibility.md (frontend-vuejs)

    **Input:**
    - Unit ID: {unit_id}
    - Implementation Files: {implementation_files}
    - Language: typescript
    - Framework: Vue 3 with Composition API

    **Requirements:**
    1. Run axe-core scans on all Vue components (all states: default, loading, error, empty, disabled)
    2. Test keyboard navigation (Tab, Enter, Escape, Arrow keys)
    3. Test focus management (trap, restoration, auto-focus) - use Vue's nextTick() where needed
    4. Verify semantic HTML usage within Vue templates
    5. Check ARIA attributes on dynamic Vue template bindings (v-bind:aria-*, :aria-*)
    6. Verify color contrast
    7. Test with Vue Testing Library (@testing-library/vue) + axe-core

    **Vue-Specific Checks:**
    - Teleport components (modals via <Teleport>) have proper focus trapping
    - v-show vs v-if usage does not create hidden but focusable elements unexpectedly
    - Dynamic :disabled bindings properly prevent interaction
    - Transition/animation does not cause focus loss
    - defineExpose() patterns for ref-based focus management are correctly implemented

    **Output Sections Required:**
    - ## Accessibility Testing Summary
    - ## Violations Report
    - ## Handoff to Next Gate

Step 3: Evaluate Results

Parse agent output:

if "Status: PASS" in output:
  → Gate 1 PASSED
  → Return success with metrics

if "Status: FAIL" in output:
  → Dispatch fix to implementation agent (bee:frontend-engineer-vuejs or bee:ui-engineer-vuejs)
  → Re-run accessibility tests (max 3 iterations)
  → If still failing: ESCALATE to user

Step 4: Generate Output

## Accessibility Testing Summary
**Status:** {PASS|FAIL}
**Components Tested:** {count}
**Violations Found:** {count}
**Keyboard Nav Tests:** {count}
**Focus Management Tests:** {count}

## Violations Report
| Component | States Scanned | Violations | Status |
|-----------|---------------|------------|--------|
| {component} | {states} | {count} | {PASS|FAIL} |

## Handoff to Next Gate
- Ready for Gate 2 (Unit Testing): {YES|NO}
- Iterations: {count}

Anti-Rationalization Table

See shared-patterns/shared-anti-rationalization.md for universal anti-rationalizations. Gate-specific: