| 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\n**Status:** PASS\n**Components Tested:** 1\n**Violations Found:** 0\n**Keyboard Nav Tests:** 3\n\n## Violations Report\n| Component | Violations | Status |\n|-----------|-----------|--------|\n| LoginForm | 0 | PASS |\n\n## Handoff to Next Gate\n- Ready for Gate 2 (Unit Testing): YES\n"}] |
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)
⛔ 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:
| 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 |
