Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ This repository contains skills that work across open-source frameworks, tools a
| Skill | Description |
|-------|-------------|
| [vega-multi-tv-migration](vega-multi-tv-migration/SKILL.md) | Migrate Vega OS (Fire TV) apps to multi-platform React Native monorepo supporting Android TV, Apple TV, and more |
| [react-native-tv-accessibility](react-native-tv-accessibility/SKILL.md) | Audit and fix accessibility for React Native TV apps, including Vega WebView and native React Native for Vega |

## Installation

Expand All @@ -28,6 +29,10 @@ Install a specific skill:
npx skills add AmazonAppDev/devices-agent-skills --skill vega-multi-tv-migration
```

```bash
npx skills add AmazonAppDev/devices-agent-skills --skill react-native-tv-accessibility
```

For more options, see the [skills CLI documentation](https://skills.sh/docs/cli).

### 2. Manual Installation
Expand Down
21 changes: 21 additions & 0 deletions react-native-tv-accessibility/LICENSE
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
MIT License

Copyright (c) 2025 Vega Skills

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
118 changes: 118 additions & 0 deletions react-native-tv-accessibility/SKILL.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,118 @@
---
name: react-native-tv-accessibility
description: Audit and fix accessibility for React Native TV and Vega TV applications, including Vega WebView apps and native React Native for Vega apps. Use when reviewing TV app accessibility, VoiceView, screen reader output, D-pad or remote navigation, focus management, captions, magnifier behavior, React Native accessibility props, Vega WebView accessibility, WCAG, WAI-ARIA, or accessible media app flows.
---

# React Native and Vega TV Accessibility

## Overview

Audit and fix accessibility in TV applications built with React Native, React Native for Vega, or Vega WebView. Always identify the app surface first because WebView apps, native Vega RN apps, and mixed apps use different APIs and validation steps.

## When to Apply

Use this skill when user mentions:
- Accessibility, a11y, WCAG, WAI-ARIA, VoiceView, screen readers, magnifier, captions, or subtitles in a TV app
- Vega WebView app accessibility
- Native React Native for Vega app accessibility
- React Native accessibility props, roles, labels, hints, states, or announcements
- D-pad, remote, Back, Select, keyboard, or focus navigation issues
- TV modals, carousels, media playback controls, settings, search, sign-in, or error flows

## Phase Priority Guide

| Priority | Phase | Impact | When to Use |
|----------|-------|--------|-------------|
| 1 | App Type Detection | CRITICAL | Before applying any accessibility guidance |
| 2 | WebView Audit | CRITICAL | App renders HTML/JS content in Vega WebView |
| 3 | Native Vega RN Audit | CRITICAL | App is built with React Native for Vega components |
| 4 | Shared Standards | HIGH | Mapping findings to WCAG 2.2 and WAI-ARIA |
| 5 | Validation | HIGH | Re-testing with VoiceView, remote, magnifier, captions |

## Quick Decision Tree

```
What kind of Vega TV app is this?
+-- Uses @amazon-devices/webview, WebView, webview.html, or hosted HTML?
| +-- YES -> Audit WebView surface using Vega WebView + W3C guidance
+-- Uses React Native for Vega components and package/build scripts?
| +-- YES -> Audit native Vega RN surface using React Native for Vega guidance
+-- Uses both WebView and native RN screens?
| +-- YES -> Audit each surface separately, then verify cross-surface focus/announcements
+-- Unknown -> Inspect manifest.toml, package.json scripts/dependencies, app entry points, and rendered UI before fixing
```

## Quick Reference

### Critical: Detect App Type First

```bash
# Vega package marker
find . -name manifest.toml -maxdepth 5

# WebView indicators
rg "@amazon-devices/webview|<WebView|webview.html|ReactNativeWebView|postMessage"

# React Native for Vega indicators
rg "@amazon-devices/react-native-kepler|build:app|vega project|react-native-vega|AccessibilityInfo"
```

### Critical: Choose the Correct Guidance

- **Vega WebView**: Use semantic HTML, ARIA, visible focus, logical tab order, focus trapping/restoration, `aria-live`, alt text, and WebView-to-native announcements when needed.
- **Native Vega RN**: Prefer React Native for Vega guidance: `role` over legacy `accessibilityRole`, `aria-*` props where recommended, `accessible`, `accessibilityHint`, `accessibilityOrientationText`, `accessibilityDescribedBy`, and careful `AccessibilityInfo` usage.
- **Both**: Target WCAG 2.2 Level A/AA, verify VoiceView output, remote navigation, magnifier, captions, and no dead-end focus zones.

## References

| File | Impact | Description |
|------|--------|-------------|
| [VEGA_WEBVIEW_ACCESSIBILITY.md](references/VEGA_WEBVIEW_ACCESSIBILITY.md) | CRITICAL | Official Vega WebView accessibility guidance for HTML/JS app surfaces |
| [VEGA_REACT_NATIVE_ACCESSIBILITY.md](references/VEGA_REACT_NATIVE_ACCESSIBILITY.md) | CRITICAL | Official React Native for Vega and React Native accessibility guidance |
| [WCAG_WAI_REFERENCE.md](references/WCAG_WAI_REFERENCE.md) | HIGH | WCAG 2.2 A/AA and WAI-ARIA APG mapping for findings |
| [TV_APP_VALIDATION.md](references/TV_APP_VALIDATION.md) | HIGH | VoiceView, remote, magnifier, captions, focus, and regression validation |

### Templates

Use [ACCESSIBILITY_CHECKLIST.md](assets/templates/ACCESSIBILITY_CHECKLIST.md) as the working checklist during audits and fixes.

### Evals

Use [evals/README.md](evals/README.md) to test trigger quality, task quality, and with-skill vs without-skill behavior.

## Problem -> Skill Mapping

| Problem | Start With |
|---------|------------|
| Unsure whether app is WebView or native Vega RN | App Type Detection |
| HTML content, web assets, or WebView container | VEGA_WEBVIEW_ACCESSIBILITY.md |
| Native RN components or React Native for Vega app | VEGA_REACT_NATIVE_ACCESSIBILITY.md |
| Mixed WebView + native screens | Audit both reference paths |
| Need conformance language or severity | WCAG_WAI_REFERENCE.md |
| Need to prove fixes work on TV | TV_APP_VALIDATION.md, then ACCESSIBILITY_CHECKLIST.md |
| VoiceView reads duplicate or wrong text | Relevant app-type reference, then TV_APP_VALIDATION.md |
| D-pad focus is lost, trapped, or invisible | Relevant app-type reference, then TV_APP_VALIDATION.md |
| Captions, subtitles, media controls, or playback flow | TV_APP_VALIDATION.md |

## Workflow

1. Detect app type from dependencies, `manifest.toml`, app entry points, and rendered UI.
2. Select the WebView, native Vega RN, or mixed-app path.
3. Audit the primary user flows: launch, navigation, search, sign-in, playback, settings, dialogs, errors, and exit.
4. Fix blocking and serious issues first: missing names, non-operable controls, lost focus, invisible focus, incorrect role/state, missing captions, unreadable contrast.
5. Map each issue to WCAG 2.2 A/AA or WAI-ARIA where applicable.
6. Validate with TV remote/D-pad, VoiceView, magnifier, captions/subtitles, and any automated checks available.
7. Report findings with app surface, file/component, issue, user impact, guideline/source, and concrete fix.

## Official Sources

- Vega WebView Accessibility Guide: https://developer.amazon.com/docs/vega/0.22/webview-accessibility-guide.html
- React Native for Vega Accessibility: https://developer.amazon.com/docs/react-native-vega/0.72/accessibility.html
- Vega App Manifest: https://developer.amazon.com/docs/vega/0.22/app-manifest.html
- React Native Accessibility: https://reactnative.dev/docs/accessibility.html
- WCAG 2.2: https://w3.org/TR/2024/REC-WCAG22-20241212
- WAI-ARIA APG: https://www.w3.org/WAI/ARIA/apg/

## Attribution

Based on official Vega WebView, React Native for Vega, React Native, WCAG 2.2, and WAI-ARIA Authoring Practices guidance.
Original file line number Diff line number Diff line change
@@ -0,0 +1,75 @@
# Accessibility Checklist

Use this checklist during React Native TV and Vega TV accessibility audits.

## App Type

- [ ] Confirmed app surface: Vega WebView, native Vega RN, or mixed.
- [ ] Checked `manifest.toml`.
- [ ] Checked `package.json` dependencies and build scripts.
- [ ] Checked app entry points and rendered screens.
- [ ] Selected the correct reference path before fixing.

## WebView Surface

- [ ] Uses semantic HTML for structure and controls.
- [ ] Custom controls expose role, name, state, and description.
- [ ] Images/icons have meaningful alt text or are correctly hidden.
- [ ] Focus order is logical with remote/D-pad and keyboard.
- [ ] Focus indicator is visible and high contrast.
- [ ] Dialogs trap focus and restore focus.
- [ ] Dynamic content uses `aria-live` or a justified WebView-to-native announcement.
- [ ] Hidden content is not focusable.

## Native Vega RN Surface

- [ ] Focused item and spoken item match.
- [ ] Controls have useful accessible names.
- [ ] Components use `role` and supported `aria-*` props where recommended by React Native for Vega.
- [ ] Hints are present only when labels do not explain the result.
- [ ] State is exposed for toggles, selected items, expanded panels, disabled controls, and progress.
- [ ] `accessibilityOrientationText` is used for complex TV layouts when helpful.
- [ ] `accessibilityDescribedBy` connects focused tiles or controls to important static details.
- [ ] Direct `AccessibilityInfo.announceForAccessibility()` calls are justified and non-duplicative.

## TV Navigation

- [ ] D-pad reaches all actionable items.
- [ ] Select activates focused controls.
- [ ] Back exits overlays/screens predictably.
- [ ] No dead ends or trap zones.
- [ ] Carousels, rows, grids, and menus handle edge navigation.
- [ ] Screen changes intentionally move or restore focus.

## VoiceView

- [ ] VoiceView can be enabled and disabled.
- [ ] Primary flows work with VoiceView enabled.
- [ ] Spoken output includes name, role, state, hint, and context where needed.
- [ ] New screens provide useful orientation.
- [ ] Review Mode reaches important non-actionable text.
- [ ] Duplicate or stale announcements are removed.

## Visual Accessibility

- [ ] Text contrast meets WCAG AA.
- [ ] Focus indicator contrast is sufficient.
- [ ] Status is not communicated by color alone.
- [ ] Text size and magnifier do not break layout.
- [ ] Motion is reduced or disabled when requested.

## Media

- [ ] Captions/subtitles can be enabled and disabled.
- [ ] Captions are accurate, synchronized, readable, and persistent when required.
- [ ] Media controls have labels and states.
- [ ] Loading, buffering, and error states are communicated visibly and accessibly.

## Reporting

- [ ] Each finding includes severity.
- [ ] Each finding identifies WebView, native Vega RN, or mixed surface.
- [ ] Each finding includes file/component/screen.
- [ ] Each finding includes user impact.
- [ ] Each finding cites Vega, React Native, WCAG, or WAI-ARIA guidance.
- [ ] Each fix includes verification steps.
45 changes: 45 additions & 0 deletions react-native-tv-accessibility/evals/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
# Vega TV Accessibility Evals

Use these evals to measure whether `react-native-tv-accessibility` improves agent behavior compared with a baseline run without the skill.

These evals follow the skill-creator loop:
1. Run each prompt without the skill.
2. Run the same prompt with the skill available.
3. Score both outputs with [SCORING_RUBRIC.md](SCORING_RUBRIC.md).
4. Compare pass rate, correctness, harmful guidance, time, and token usage.
5. Update the skill when failures show unclear instructions or missing guidance.

## Files

| File | Purpose |
|------|---------|
| [TRIGGER_PROMPTS.md](TRIGGER_PROMPTS.md) | 20 trigger/non-trigger prompts for description optimization |
| [TASK_SCENARIOS.md](TASK_SCENARIOS.md) | Realistic accessibility audit and fix prompts |
| [SCORING_RUBRIC.md](SCORING_RUBRIC.md) | Quantitative and qualitative scoring criteria |
| [RUNBOOK.md](RUNBOOK.md) | Step-by-step instructions for running and comparing evals |

## Success Targets

- Trigger precision: at least 9/10 trigger prompts should use the skill.
- Trigger specificity: at least 8/10 non-trigger prompts should avoid the skill.
- Task pass rate: at least 80% of task scenarios score 4 or 5 overall.
- Safety: zero outputs should apply WebView-only guidance to native Vega RN without checking app type, or native-only guidance to WebView content.
- Source quality: outputs should cite or reflect official Vega, React Native, WCAG, or WAI-ARIA guidance.

## Required Behaviors

An output should:
- Detect app type first: WebView, native Vega RN, mixed, or unknown.
- Use the correct reference path for the detected surface.
- Separate WebView guidance from native Vega RN guidance.
- Prioritize VoiceView, D-pad/remote navigation, focus, captions, magnifier, labels, roles, state, contrast, and validation.
- Include concrete fix steps and verification steps.

## Failure Signals

Treat these as high-priority failures:
- Skips app-type detection.
- Recommends ARIA-only fixes for native RN components without checking supported props.
- Recommends legacy React Native props when React Native for Vega guidance says to prefer newer `role` or `aria-*` props.
- Ignores VoiceView, D-pad, Back, Select, or magnifier validation.
- Gives generic web accessibility advice with no TV or Vega-specific behavior.
68 changes: 68 additions & 0 deletions react-native-tv-accessibility/evals/RUNBOOK.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,68 @@
# Eval Runbook

Use this runbook to compare baseline agent behavior with behavior after installing or enabling `react-native-tv-accessibility`.

## Preparation

1. Start from the same model and environment for both runs.
2. Use the same prompt text for baseline and skill-enabled runs.
3. Record whether the skill was available, explicitly invoked, or automatically selected.
4. Capture response text, timing, and token usage if the runner exposes those metrics.

## Trigger Eval

1. Run each prompt in [TRIGGER_PROMPTS.md](TRIGGER_PROMPTS.md).
2. Mark expected trigger prompts as pass when the agent uses or clearly follows the skill.
3. Mark expected non-trigger prompts as pass when the agent avoids the skill and uses a more relevant workflow.
4. Calculate:
- Trigger precision: trigger passes / 10
- Non-trigger specificity: non-trigger passes / 10

## Task Eval

1. Run each prompt in [TASK_SCENARIOS.md](TASK_SCENARIOS.md) without the skill.
2. Run the same prompt with the skill available.
3. Score both outputs with [SCORING_RUBRIC.md](SCORING_RUBRIC.md).
4. Mark scenarios scoring 4 or 5 as pass.
5. Compare:
- Overall score delta
- Pass/fail delta
- Automatic failures
- Missing guidance patterns

## Review Template

Use this template for each scenario:

```markdown
Prompt ID:
Skill available: yes/no
Skill selected: yes/no/unknown
Overall score:
App type detection:
Platform guidance:
Official source alignment:
TV interaction coverage:
Fix quality:
Validation quality:
Automatic failure: yes/no
Key strengths:
Key gaps:
Recommended skill change:
```

## Iteration Rules

Update the skill when:
- Two or more scenarios miss the same required behavior.
- Any scenario produces harmful platform guidance.
- Trigger precision is below 9/10.
- Non-trigger specificity is below 8/10.
- Task pass rate is below 80%.

Update the description when:
- Trigger prompts are missed despite good skill content.
- Non-trigger prompts activate because the description is too broad.

Update references or checklist when:
- The agent uses the skill but still misses platform details, validation steps, or official-source constraints.
Loading