From bee-dev-team
Gate 1 of the React Native frontend development cycle - ensures all components pass accessibility checks with zero violations: correct accessibilityLabel, accessibilityRole, accessibilityHint, VoiceOver (iOS) and TalkBack (Android) compatibility, and minimum touch target sizes.
npx claudepluginhub luanrodrigues/ia-frmwrk --plugin bee-dev-teamThis skill uses the workspace's default tool permissions.
Ensure all React Native frontend components meet **mobile accessibility standards** through correct use of accessibility props, keyboard/switch control navigation testing, and VoiceOver (iOS) / TalkBack (Android) compatibility.
Generates design tokens/docs from CSS/Tailwind/styled-components codebases, audits visual consistency across 10 dimensions, detects AI slop in UI.
Records polished WebM UI demo videos of web apps using Playwright with cursor overlay, natural pacing, and three-phase scripting. Activates for demo, walkthrough, screen recording, or tutorial requests.
Delivers idiomatic Kotlin patterns for null safety, immutability, sealed classes, coroutines, Flows, extensions, DSL builders, and Gradle DSL. Use when writing, reviewing, refactoring, or designing Kotlin code.
Ensure all React Native frontend components meet mobile accessibility standards through correct use of accessibility props, keyboard/switch control navigation testing, and VoiceOver (iOS) / TalkBack (Android) compatibility.
Core principle: Accessibility is not optional. All components MUST be accessible to all users, including those using VoiceOver, TalkBack, switch control, and other assistive technologies.
<block_condition>
This skill ORCHESTRATES. React Native Frontend QA Analyst Agent (accessibility mode) EXECUTES.
| Who | Responsibility |
|---|---|
| This Skill | Gather requirements, dispatch agent, track iterations |
| QA Analyst Frontend React Native Agent | Write RNTL accessibility tests, verify props, audit touch targets |
MANDATORY: Load testing-accessibility-rn.md standards via WebFetch.
<fetch_required> https://raw.githubusercontent.com/luanrodrigues/ia-frmwrk/master/dev-team/docs/standards/frontend-react-native/testing-accessibility.md </fetch_required>
REQUIRED INPUT:
- unit_id: [task/subtask being tested]
- implementation_files: [files from Gate 0]
- language: [typescript only]
OPTIONAL INPUT:
- platform_targets: [ios, android] (default: both)
if any REQUIRED input is missing:
→ STOP and report: "Missing required input: [field]"
if language != "typescript":
→ STOP and report: "React Native accessibility testing only supported for TypeScript/TSX"
Task tool:
subagent_type: "bee:qa-analyst-frontend-react-native"
model: "opus"
prompt: |
**MODE:** ACCESSIBILITY TESTING (Gate 1)
**Standards:** Load testing-accessibility.md (frontend-react-native)
**Input:**
- Unit ID: {unit_id}
- Implementation Files: {implementation_files}
- Language: typescript
- Framework: React Native (Expo or bare)
- Platform Targets: {platform_targets or ['ios', 'android']}
**Requirements:**
1. Verify accessibilityLabel on ALL interactive elements (Touchable*, Pressable, Button, TextInput)
2. Verify accessibilityRole on ALL interactive elements (button, link, checkbox, etc.)
3. Verify accessibilityHint where action outcome is not self-evident
4. Check accessibilityState for dynamic elements (disabled, checked, selected, expanded)
5. Verify touch target sizes (>= 44x44pt iOS, >= 48x48dp Android) using hitSlop or minHeight/minWidth
6. Test with React Native Testing Library (RNTL) using getByRole, getByLabelText, getByA11yRole
7. Verify logical reading order for VoiceOver and TalkBack
8. Check importantForAccessibility on decorative elements (set to 'no')
9. Verify Modal accessible prop and accessibility focus management
10. Check FlatList/FlashList item accessibilityLabel patterns
**React Native-Specific Checks:**
- Pressable / TouchableOpacity have accessibilityLabel (not just visible text)
- TextInput has accessibilityLabel + accessibilityHint for assistive context
- Image has accessible={true} with accessibilityLabel, OR accessible={false} for decorative images
- ScrollView content is accessible with correct reading order
- Modal uses accessible={true} and dispatches focus to first element on open
- Animated views that convey state have accessibilityLiveRegion set ('polite' or 'assertive')
- Platform-specific: iOS accessibilityTraits vs Android accessibilityRole (use accessibilityRole for both)
- accessibilityElementsHidden used correctly for visually hidden content that should be skipped
**Output Sections Required:**
- ## Accessibility Testing Summary
- ## Violations Report
- ## Handoff to Next Gate
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-react-native or bee:ui-engineer-react-native)
→ Re-run accessibility tests (max 3 iterations)
→ If still failing: ESCALATE to user
## Accessibility Testing Summary
**Status:** {PASS|FAIL}
**Components Tested:** {count}
**Violations Found:** {count}
**Touch Target Violations:** {count}
**Missing accessibilityLabel:** {count}
**Missing accessibilityRole:** {count}
## Violations Report
| Component | States Scanned | Violations | Touch Targets | Status |
|-----------|---------------|------------|---------------|--------|
| {component} | {states} | {count} | {PASS|FAIL} | {PASS|FAIL} |
## Handoff to Next Gate
- Ready for Gate 2 (Unit Testing): {YES|NO}
- Iterations: {count}
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" | Mobile accessibility is mandatory for all applications. | Run accessibility tests |
| "The library handles it" | Components can be misused. RNTL catches misuse. | Run RNTL accessibility checks |
| "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 |
| "Text label is visible, no need for accessibilityLabel" | Screen readers need explicit props. Visible text ≠ accessible. | Add accessibilityLabel |
| "Touchable is big enough visually" | Visual size ≠ hit area. Use hitSlop or minHeight/minWidth. | Verify touch target >= 44x44pt |
| "VoiceOver works, TalkBack is similar" | iOS and Android accessibility differ. Test both. | Test VoiceOver AND TalkBack |
| "Decorative image doesn't need props" | Set accessible={false} explicitly. Omitting leaves it up to OS. | Set accessible={false} on decorative images |