bee:dev-frontend-accessibility-vuejs

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.

<block_condition>

• Any WCAG AA violation = FAIL
• Missing keyboard navigation tests = FAIL
• Missing focus management for modals = FAIL </block_condition>

CRITICAL: Role Clarification

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

Who	Responsibility
This Skill	Gather requirements, dispatch agent, track iterations
QA Analyst Frontend Vue.js Agent	Run axe-core, write keyboard tests, verify ARIA

---

Standards Reference

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

<fetch_required> https://raw.githubusercontent.com/luanrodrigues/ia-frmwrk/master/dev-team/docs/standards/frontend-vuejs/testing-accessibility.md </fetch_required>

---

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)

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:

Rationalization	Why It's WRONG	Required Action
"It's an internal tool"	WCAG compliance is mandatory for all applications.	Run accessibility tests
"The library handles it"	Components can be misused. axe-core catches misuse.	Run axe-core scans
"We'll fix accessibility later"	Retrofitting costs 10x. Fix now.	Fix violations now
"Only one violation, it's minor"	One violation = FAIL. No exceptions.	Fix all violations
"Keyboard nav works, I tested manually"	Manual ≠ automated. Tests must be repeatable.	Write automated tests
"Vue transitions handle focus automatically"	Transitions do not manage focus. Implement explicitly.	Add focus management tests
"v-show hides it visually, accessibility handled"	v-show keeps element in DOM. axe-core still scans it.	Use v-if or add aria-hidden

---