From a280bbcbf8027f8e5cb0c318197c3cf54fdfe755 Mon Sep 17 00:00:00 2001 From: neha Date: Tue, 19 May 2026 12:39:23 +0100 Subject: [PATCH 1/3] Add Vega TV accessibility skill Co-authored-by: Cursor --- README.md | 5 + vega-tv-accessibility/LICENSE | 21 ++++ vega-tv-accessibility/SKILL.md | 114 ++++++++++++++++++ .../templates/ACCESSIBILITY_CHECKLIST.md | 75 ++++++++++++ .../references/TV_APP_VALIDATION.md | 80 ++++++++++++ .../VEGA_REACT_NATIVE_ACCESSIBILITY.md | 105 ++++++++++++++++ .../references/VEGA_WEBVIEW_ACCESSIBILITY.md | 96 +++++++++++++++ .../references/WCAG_WAI_REFERENCE.md | 73 +++++++++++ 8 files changed, 569 insertions(+) create mode 100644 vega-tv-accessibility/LICENSE create mode 100644 vega-tv-accessibility/SKILL.md create mode 100644 vega-tv-accessibility/assets/templates/ACCESSIBILITY_CHECKLIST.md create mode 100644 vega-tv-accessibility/references/TV_APP_VALIDATION.md create mode 100644 vega-tv-accessibility/references/VEGA_REACT_NATIVE_ACCESSIBILITY.md create mode 100644 vega-tv-accessibility/references/VEGA_WEBVIEW_ACCESSIBILITY.md create mode 100644 vega-tv-accessibility/references/WCAG_WAI_REFERENCE.md diff --git a/README.md b/README.md index 5d5bc53..932db13 100644 --- a/README.md +++ b/README.md @@ -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 | +| [vega-tv-accessibility](vega-tv-accessibility/SKILL.md) | Audit and fix accessibility for Vega WebView and native React Native for Vega TV apps | ## Installation @@ -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 vega-tv-accessibility +``` + For more options, see the [skills CLI documentation](https://skills.sh/docs/cli). ### 2. Manual Installation diff --git a/vega-tv-accessibility/LICENSE b/vega-tv-accessibility/LICENSE new file mode 100644 index 0000000..ed3afcb --- /dev/null +++ b/vega-tv-accessibility/LICENSE @@ -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. diff --git a/vega-tv-accessibility/SKILL.md b/vega-tv-accessibility/SKILL.md new file mode 100644 index 0000000..d07bdb2 --- /dev/null +++ b/vega-tv-accessibility/SKILL.md @@ -0,0 +1,114 @@ +--- +name: vega-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| 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. diff --git a/vega-tv-accessibility/assets/templates/ACCESSIBILITY_CHECKLIST.md b/vega-tv-accessibility/assets/templates/ACCESSIBILITY_CHECKLIST.md new file mode 100644 index 0000000..58d8198 --- /dev/null +++ b/vega-tv-accessibility/assets/templates/ACCESSIBILITY_CHECKLIST.md @@ -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. diff --git a/vega-tv-accessibility/references/TV_APP_VALIDATION.md b/vega-tv-accessibility/references/TV_APP_VALIDATION.md new file mode 100644 index 0000000..bd97175 --- /dev/null +++ b/vega-tv-accessibility/references/TV_APP_VALIDATION.md @@ -0,0 +1,80 @@ +# TV App Accessibility Validation + +Use this guide after fixing issues in Vega WebView, native Vega RN, or mixed TV apps. + +Primary sources: +- Vega WebView accessibility test cases: 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 +- WCAG 2.2: https://w3.org/TR/2024/REC-WCAG22-20241212 + +## Validation Setup + +Before testing: +- Identify app type: WebView, native Vega RN, or mixed. +- Identify critical flows: launch, navigation, search, details, playback, captions, settings, sign-in, errors, dialogs, and exit. +- Enable VoiceView where available. +- Prepare a TV remote/D-pad and keyboard if supported. +- Enable magnifier and larger text settings if available. +- Capture expected spoken output for key controls and screens. + +## VoiceView + +Verify: +- VoiceView can be enabled and disabled. +- Focused controls are spoken with name, role, state, hint, and useful context. +- New screens announce enough orientation for the user to understand where they are. +- Static text needed to understand a control is reachable or associated with the control. +- Dynamic updates are announced through live regions or appropriate app APIs. +- Duplicate announcements are removed. +- Review Mode can reach important text and controls. + +## Remote and Keyboard Navigation + +Verify with D-pad, Select, Back, and supported keyboard input: +- All actionable items are reachable. +- Focus order matches visual and task order. +- Focus is always visible. +- Focus never lands on hidden, disabled, or offscreen content. +- There are no trap zones. +- Dialogs trap focus while open and return focus when closed. +- Carousels, rows, grids, and menus handle edges predictably. +- Back exits overlays or screens without losing focus context. + +## Magnifier and Text Size + +Verify: +- Magnifier follows the focused item. +- Text can increase without clipping critical content. +- Controls remain visible and operable after zoom or text-size changes. +- Layout remains readable and scrollable. +- User settings persist if the app supports persistence. + +## Captions and Media + +Verify: +- Captions/subtitles can be enabled and disabled with the remote. +- Caption settings persist when required. +- Captions are accurate, synchronized, and readable. +- Media controls expose clear names and states. +- Loading, buffering, restrictions, offline errors, and playback failures are announced or visibly communicated. + +## Regression Checks + +After each fix: +- Re-test the exact failed path. +- Re-test neighboring controls and screens. +- Confirm no duplicate announcements were introduced. +- Confirm visual focus still matches spoken focus. +- Confirm the change works with VoiceView off and on. +- Map the result to the finding's WCAG/platform reference. + +## Evidence to Collect + +For each validated fix, record: +- Device/emulator and app build. +- App surface tested: WebView, native Vega RN, or mixed. +- Assistive technology setting, such as VoiceView on/off. +- Remote/keyboard path. +- Actual spoken output before and after. +- Screenshot or short screen recording if useful. +- Remaining risk or untested condition. diff --git a/vega-tv-accessibility/references/VEGA_REACT_NATIVE_ACCESSIBILITY.md b/vega-tv-accessibility/references/VEGA_REACT_NATIVE_ACCESSIBILITY.md new file mode 100644 index 0000000..692720f --- /dev/null +++ b/vega-tv-accessibility/references/VEGA_REACT_NATIVE_ACCESSIBILITY.md @@ -0,0 +1,105 @@ +# Vega React Native Accessibility + +Use this guide when the app is a native React Native for Vega app, not primarily a WebView-rendered app. + +Primary sources: +- React Native for Vega accessibility: https://developer.amazon.com/docs/react-native-vega/0.72/accessibility.html +- React Native accessibility: https://reactnative.dev/docs/accessibility.html +- Vega app manifest: https://developer.amazon.com/docs/vega/0.22/app-manifest.html +- Vega Yarn workspaces: https://developer.amazon.com/docs/vega/0.22/yarn-workspaces.html + +## Detection + +Check for: +- `manifest.toml` at the Vega package root +- React Native for Vega app entry points and components +- `@amazon-devices/react-native-kepler` +- `build:app`, `vega project`, or Yarn workspace scripts for React Native for Vega apps +- `packages/application`, `packages/*`, or Vega workspace layout +- Native RN surfaces without `WebView` as the main content renderer + +If the app also embeds `WebView`, audit the native shell and WebView content separately. + +## Core Model + +React Native for Vega accessibility generally follows React Native accessibility guidance, with Vega-specific behavior and newer recommendations. + +Key points: +- VoiceView follows input focus on TV, so focus behavior directly affects screen reader behavior. +- Touchable or D-pad-navigable elements are accessible by default in many cases, but do not rely on `accessible` alone for focusability. +- In React Native for Vega, prefer `role` over legacy `accessibilityRole`. +- Prefer Vega-supported `aria-*` props where the React Native for Vega docs recommend them. +- Use direct screen reader announcements sparingly; prefer roles, labels, descriptions, and live regions. + +## Labels, Roles, Hints, and State + +For each actionable component: +- Provide a clear accessible name with visible text, `aria-label`, or React Native label APIs as appropriate. +- Use `role` for purpose, such as button, link, image, text, checkbox, or progressbar. +- Use `accessibilityHint` only when the result of the action is not clear from the label. +- Expose state with `aria-checked`, `aria-disabled`, `aria-expanded`, `aria-selected`, or related props where supported. +- Use range value props such as `aria-valuemin`, `aria-valuemax`, `aria-valuenow`, and `aria-valuetext` for progress or sliders. + +Avoid: +- Names that duplicate visible text unnecessarily. +- Multiple controls with identical spoken names. +- Forcing announcements for normal focus movement. +- Grouping child text into a parent `accessible={true}` element when the child text must be independently reachable. + +## Vega-Specific Guidance + +Use these when applicable: +- `accessibilityOrientationText`: describe screen layout or navigation model the first time a user encounters a screen or container. +- `accessibilityDescribedBy`: reference static text or details that describe the focused component, especially when screen reader focus follows TV input focus. +- `aria-live`: communicate dynamic updates without moving focus. +- `AccessibilityInfo.announceForAccessibility()`: reserve for cases where semantic roles, labels, or live regions cannot communicate the update. + +When a screen opens: +- Focus the most useful initial element. +- Provide orientation text for complex layouts. +- Ensure static details related to focused tiles are associated with the tile. + +When a dialog closes: +- Return focus to the triggering element or the next logical control. + +## Focus and D-pad Navigation + +Validate: +- Up, Down, Left, Right, Select, and Back all behave predictably. +- The visually focused item and spoken item match. +- Every actionable item is reachable. +- Focus does not land on hidden or disabled content. +- Lists, grids, and carousels have predictable edge behavior. +- Screen transitions restore or move focus intentionally. + +Fix issues by correcting component structure and focus behavior before adding extra announcements. + +## Media and TV Patterns + +For playback: +- Media controls must have names, roles, states, and remote actions. +- Play/pause, captions, audio tracks, seek, scrub, and settings controls need clear state. +- Captions/subtitles must be discoverable and operable with the remote. +- Loading, buffering, errors, and restricted content states need spoken and visual feedback. + +For rows, rails, and tiles: +- Tile labels should include enough context to be unique. +- Use descriptions for metadata that matters to selection, such as title, episode, progress, price, or availability. +- Avoid reading all metadata on every focus if it creates excessive speech. + +## Verification + +Test with: +- VoiceView enabled. +- Standard TV remote/D-pad. +- Magnifier and text-size settings when available. +- Captions/subtitles enabled and disabled. +- Screen transitions, modal flows, search, playback, settings, and error states. + +Report native Vega RN findings with: +- Component/file +- Focus path +- Spoken output +- Expected output +- API or prop to change +- WCAG or platform reference diff --git a/vega-tv-accessibility/references/VEGA_WEBVIEW_ACCESSIBILITY.md b/vega-tv-accessibility/references/VEGA_WEBVIEW_ACCESSIBILITY.md new file mode 100644 index 0000000..250f019 --- /dev/null +++ b/vega-tv-accessibility/references/VEGA_WEBVIEW_ACCESSIBILITY.md @@ -0,0 +1,96 @@ +# Vega WebView Accessibility + +Use this guide when the app renders web content through Vega WebView, such as `@amazon-devices/webview`, a `WebView` component, `webview.html`, hosted HTML, `window.ReactNativeWebView.postMessage`, or web assets inside a Vega package. + +Primary source: https://developer.amazon.com/docs/vega/0.22/webview-accessibility-guide.html + +## Detection + +Check for: +- `@amazon-devices/webview` in `package.json` +- `WebView` usage in `tsx`, `jsx`, or native app entry points +- `webview.html`, hosted `source={{ uri }}`, bundled HTML, or web build output +- `postMessage` from web content to the Vega WebView container +- `manifest.toml` package/component configuration for the Vega app + +If native React Native screens wrap the WebView, audit both native and web surfaces. + +## Core Requirements + +Vega WebView integrates with Vega OS APIs for HTML5 accessibility, but the app must expose correct semantics and focus behavior. + +Prioritize: +- Semantic HTML: use meaningful elements such as `main`, `nav`, `footer`, `button`, `a`, headings, lists, forms, and labels. +- ARIA only when native HTML is insufficient: expose role, name, state, and description for custom widgets. +- Logical focus order: remote/D-pad and keyboard focus should follow the visual and task order. +- Visible focus: every actionable item needs a clear focus indicator. +- Focus trapping and restoration: dialogs and menus trap focus while open and restore focus to the trigger when closed. +- Text alternatives: images and icons need useful alt text or labels; decorative content should not be announced. +- Dynamic updates: use `aria-live` for status and content changes that VoiceView should announce. +- Typography and color: meet WCAG contrast and readability expectations. + +## Programmatic Announcements + +Prefer semantic markup and live regions before direct announcements. + +Use direct announcements only when web content cannot expose the update naturally, such as canvas, diagrams, highly custom navigation, or non-DOM-rendered experiences. + +For WebView-to-native announcements: +1. Web content sends a typed message through `window.ReactNativeWebView.postMessage`. +2. The Vega WebView container handles `onMessage`. +3. Native code calls `AccessibilityInfo.announceForAccessibility()` with the announcement text. + +Do not use direct announcements for routine focus changes or duplicate content that VoiceView already speaks. + +## VoiceView + +Verify: +- VoiceView can be enabled and disabled from Accessibility Settings. +- Every actionable item is spoken with the right name, role, state, hint, and description. +- New screens speak meaningful context such as title, orientation, description, and focused item. +- Review Mode can reach static text and controls. +- Duplicate announcements are removed. +- The video player does not trigger continuous reading. + +## Focus and Remote Navigation + +Test with D-pad, Select, Back, and supported keyboard input: +- All actionable elements are reachable. +- There are no dead ends or trap zones. +- Modal close returns focus to the launching control. +- Carousels and menus can be entered and exited predictably. +- Magnifier follows focus. +- Focus is not moved to hidden, offscreen, or collapsed content. + +## Media Requirements + +For media apps: +- Captions/subtitles can be enabled and disabled. +- Captions are accurate, synchronized, readable, and persist if the app supports persistence. +- Media controls have labels, states, and remote-operable actions. +- Loading, buffering, errors, and offline states communicate through more than color alone. + +## Common Fix Patterns + +- Replace clickable `div`/`span` with `button` or `a` where possible. +- Add `aria-label` only when the visible text is missing or insufficient. +- Use `aria-describedby` for helper text, error text, or longer context. +- Use `aria-expanded`, `aria-pressed`, `aria-selected`, and `aria-current` for stateful controls. +- Use `aria-live="polite"` for non-urgent updates; reserve assertive announcements for urgent interruptions. +- Avoid repeated labels such as many identical "Play" or "More" controls; include nearby context. +- Do not hide focusable interactive content with `aria-hidden="true"` alone. + +## Troubleshooting + +If VoiceView says only "button": +- Add or correct the accessible name. +- Confirm the element has the right role and visible/semantic text. + +If VoiceView reads duplicate text: +- Remove redundant `aria-label`, duplicated live-region content, or duplicate announcements. + +If VoiceView reads a different element than the visual focus: +- Check focus management, hidden content, stale DOM nodes, and custom focus code. + +If navigation gets stuck: +- Inspect focus traps, custom key handlers, carousel edge handling, overlays, and hidden focusable elements. diff --git a/vega-tv-accessibility/references/WCAG_WAI_REFERENCE.md b/vega-tv-accessibility/references/WCAG_WAI_REFERENCE.md new file mode 100644 index 0000000..281e4ea --- /dev/null +++ b/vega-tv-accessibility/references/WCAG_WAI_REFERENCE.md @@ -0,0 +1,73 @@ +# WCAG and WAI Reference + +Use this reference to map accessibility findings to shared standards after selecting the correct app surface. + +Primary sources: +- WCAG 2.2 Recommendation: https://w3.org/TR/2024/REC-WCAG22-20241212 +- WCAG 2.2 Understanding: https://w3.org/WAI/WCAG22/Understanding +- WAI-ARIA Authoring Practices Guide: https://www.w3.org/WAI/ARIA/apg/ + +## Conformance Target + +Default to WCAG 2.2 Level A and AA unless the user or app release criteria specify otherwise. + +WCAG 2.2 is organized around four principles: +- **Perceivable**: users can perceive content, alternatives, captions, structure, contrast, and text. +- **Operable**: users can operate controls with keyboard/remote, enough time, no traps, visible focus, and predictable navigation. +- **Understandable**: users can understand content, instructions, errors, labels, and interactions. +- **Robust**: content exposes name, role, value, and state in ways assistive technologies can consume. + +## High-Value Success Criteria for TV Apps + +Prioritize these for TV/WebView/RN reviews: +- 1.1.1 Non-text Content: images, icons, thumbnails, badges, and controls need text alternatives. +- 1.2.2 Captions (Prerecorded): prerecorded synchronized media needs captions. +- 1.2.4 Captions (Live): live synchronized media needs captions. +- 1.3.1 Info and Relationships: structure and relationships must be programmatically available. +- 1.4.1 Use of Color: do not rely on color alone. +- 1.4.3 Contrast (Minimum): normal text needs 4.5:1; large text needs 3:1. +- 1.4.10 Reflow: content should remain usable when scaled or constrained. +- 1.4.11 Non-text Contrast: focus indicators and UI components need sufficient contrast. +- 2.1.1 Keyboard: remote/keyboard users need equivalent operation. +- 2.1.2 No Keyboard Trap: users must be able to move away from focused controls. +- 2.4.3 Focus Order: focus order must preserve meaning and operability. +- 2.4.7 Focus Visible: keyboard/remote focus must be visible. +- 2.4.11 Focus Not Obscured (Minimum): focused controls should not be hidden by overlays. +- 2.5.8 Target Size (Minimum): pointer targets should meet minimum sizing where applicable. +- 3.2.1 On Focus and 3.2.2 On Input: focus/input should not trigger surprising context changes. +- 3.3.1 Error Identification and 3.3.2 Labels or Instructions: forms and settings need clear errors and instructions. +- 4.1.2 Name, Role, Value: custom controls must expose correct role, name, state, and value. +- 4.1.3 Status Messages: status updates must be announced without moving focus when appropriate. + +## WAI-ARIA APG Usage + +Use APG patterns for WebView custom widgets and HTML-like app surfaces: +- Dialogs: modal role, title, focus trap, Escape/Back behavior, and focus return. +- Buttons and toggles: name, role, pressed/checked state, Enter/Select activation. +- Tabs: tablist/tab/tabpanel semantics and arrow-key behavior. +- Menus/listboxes: clear ownership, active item, arrow navigation, selection state. +- Carousels: pause/stop controls, accessible names, and predictable navigation. +- Grids: row/column navigation, selected/current state, and cell names. + +For native Vega RN, use APG conceptually for roles, names, states, and keyboard patterns, but implement with React Native for Vega-supported props and components. + +## Severity Mapping + +- **Critical**: blocks a user from completing a flow, such as unreachable controls, missing accessible names on primary actions, no captions for required media, trapped focus, or invisible focus. +- **Serious**: creates major friction, such as wrong role/state, poor contrast, duplicate announcements, confusing focus order, or missing error association. +- **Minor**: improves clarity or consistency, such as overly verbose labels, inconsistent hints, or optional orientation copy. + +## Reporting Format + +Use this format for findings: + +```markdown +Severity: Critical | Serious | Minor +Surface: Vega WebView | Native Vega RN | Mixed +Location: file/component/screen +Issue: What fails +Impact: Which user is affected and how +Reference: WCAG/APG/Vega/RN source +Fix: Concrete code or implementation change +Verification: How to prove the fix works +``` From 3d9bae6a090f60e0daaf5d2c9565e61910b37f41 Mon Sep 17 00:00:00 2001 From: neha Date: Tue, 19 May 2026 12:42:05 +0100 Subject: [PATCH 2/3] Add Vega TV accessibility evals Co-authored-by: Cursor --- vega-tv-accessibility/SKILL.md | 4 + vega-tv-accessibility/evals/README.md | 45 ++++++ vega-tv-accessibility/evals/RUNBOOK.md | 68 ++++++++ vega-tv-accessibility/evals/SCORING_RUBRIC.md | 89 ++++++++++ vega-tv-accessibility/evals/TASK_SCENARIOS.md | 152 ++++++++++++++++++ .../evals/TRIGGER_PROMPTS.md | 46 ++++++ 6 files changed, 404 insertions(+) create mode 100644 vega-tv-accessibility/evals/README.md create mode 100644 vega-tv-accessibility/evals/RUNBOOK.md create mode 100644 vega-tv-accessibility/evals/SCORING_RUBRIC.md create mode 100644 vega-tv-accessibility/evals/TASK_SCENARIOS.md create mode 100644 vega-tv-accessibility/evals/TRIGGER_PROMPTS.md diff --git a/vega-tv-accessibility/SKILL.md b/vega-tv-accessibility/SKILL.md index d07bdb2..32602d0 100644 --- a/vega-tv-accessibility/SKILL.md +++ b/vega-tv-accessibility/SKILL.md @@ -76,6 +76,10 @@ rg "@amazon-devices/react-native-kepler|build:app|vega project|react-native-vega 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 | diff --git a/vega-tv-accessibility/evals/README.md b/vega-tv-accessibility/evals/README.md new file mode 100644 index 0000000..c54b642 --- /dev/null +++ b/vega-tv-accessibility/evals/README.md @@ -0,0 +1,45 @@ +# Vega TV Accessibility Evals + +Use these evals to measure whether `vega-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. diff --git a/vega-tv-accessibility/evals/RUNBOOK.md b/vega-tv-accessibility/evals/RUNBOOK.md new file mode 100644 index 0000000..04b94ab --- /dev/null +++ b/vega-tv-accessibility/evals/RUNBOOK.md @@ -0,0 +1,68 @@ +# Eval Runbook + +Use this runbook to compare baseline agent behavior with behavior after installing or enabling `vega-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. diff --git a/vega-tv-accessibility/evals/SCORING_RUBRIC.md b/vega-tv-accessibility/evals/SCORING_RUBRIC.md new file mode 100644 index 0000000..73b464a --- /dev/null +++ b/vega-tv-accessibility/evals/SCORING_RUBRIC.md @@ -0,0 +1,89 @@ +# Scoring Rubric + +Score each task scenario from 1 to 5. A score of 4 or 5 is a pass. + +## Overall Score + +| Score | Meaning | +|-------|---------| +| 5 | Excellent: correct, source-aligned, app-type-aware, actionable, and includes validation | +| 4 | Good: mostly correct with minor omissions | +| 3 | Partial: useful generic advice but misses one important Vega/TV requirement | +| 2 | Poor: misses app type or gives mostly generic/mobile/web advice | +| 1 | Harmful: likely to cause incorrect accessibility behavior or applies the wrong platform guidance | + +## Criteria + +### 1. App Type Detection + +Score 1-5: +- 5: Explicitly detects WebView, native Vega RN, mixed, or unknown before fixing. +- 3: Mentions app type but does not use it to guide recommendations. +- 1: Applies one platform's guidance without checking. + +### 2. Correct Platform Guidance + +Score 1-5: +- 5: Uses the right path for Vega WebView, native React Native for Vega, or both. +- 3: Gives mostly correct guidance but mixes APIs or terms. +- 1: Recommends WebView-only ARIA for native RN or RN-only props for WebView. + +### 3. Official Source Alignment + +Score 1-5: +- 5: Reflects official Vega WebView, React Native for Vega, React Native, WCAG 2.2, and WAI-ARIA guidance where relevant. +- 3: Uses general accessibility knowledge but lacks platform specificity. +- 1: Conflicts with official guidance. + +### 4. TV Interaction Coverage + +Score 1-5: +- 5: Covers VoiceView, D-pad/remote, Select, Back, focus visibility, focus order, and no trap zones. +- 3: Covers some focus or screen reader behavior but misses TV remote specifics. +- 1: Treats the app like a mouse/touch web app only. + +### 5. Fix Quality + +Score 1-5: +- 5: Provides concrete, implementable fixes with clear priorities. +- 3: Gives plausible but high-level recommendations. +- 1: Gives vague or unsafe fixes. + +### 6. Validation Quality + +Score 1-5: +- 5: Includes verification with VoiceView, remote/D-pad, magnifier/text size, captions/media where relevant, and regression checks. +- 3: Includes only basic manual testing. +- 1: Does not include verification. + +## Automatic Failure Conditions + +Set overall score to 1 if the output: +- Skips app-type detection and applies the wrong platform guidance. +- Suggests hiding focusable interactive content with `aria-hidden="true"` alone. +- Recommends direct `announceForAccessibility()` for routine updates without considering semantic roles, labels, or live regions. +- Ignores VoiceView and D-pad/remote behavior for a TV accessibility task. +- Claims WCAG conformance without validation or scope. + +## Quantitative Metrics + +Record these for each run: +- Prompt ID. +- Skill available: yes/no. +- Overall score. +- Criteria scores. +- Pass/fail. +- Time to first answer if available. +- Total runtime if available. +- Token usage if available. +- Notes on missing or harmful guidance. + +## Aggregate Review + +After running all scenarios, calculate: +- Trigger precision and non-trigger specificity. +- Task pass rate. +- Average overall score. +- Number of automatic failures. +- Most common missing behavior. +- Whether the skill needs description changes, content changes, or new examples. diff --git a/vega-tv-accessibility/evals/TASK_SCENARIOS.md b/vega-tv-accessibility/evals/TASK_SCENARIOS.md new file mode 100644 index 0000000..74e3d54 --- /dev/null +++ b/vega-tv-accessibility/evals/TASK_SCENARIOS.md @@ -0,0 +1,152 @@ +# Task Scenarios + +Run each scenario twice: once without the skill and once with `vega-tv-accessibility` available. Score both outputs with [SCORING_RUBRIC.md](SCORING_RUBRIC.md). + +## Scenario 1: Mixed App Detection + +Prompt: + +```text +Review accessibility for a Vega TV app. The repo has `manifest.toml`, `@amazon-devices/webview`, a WebView wrapper for browse and details screens, and native React Native for Vega settings screens. Tell me how you would audit it before making fixes. +``` + +Expected high-quality behavior: +- Classifies the app as mixed. +- Audits WebView and native RN surfaces separately. +- Checks cross-surface focus restoration and announcements. +- Uses official Vega WebView, React Native for Vega, React Native, WCAG, and WAI-ARIA guidance. +- Produces a prioritized audit workflow. + +## Scenario 2: Vega WebView Duplicate VoiceView Output + +Prompt: + +```text +In a Vega WebView app, VoiceView says the movie title twice on each tile. The HTML has visible title text and `aria-label` with the same title on the tile button. What should we fix and how do we verify it? +``` + +Expected high-quality behavior: +- Identifies duplicate accessible names/announcements. +- Recommends one source of truth for the accessible name. +- Preserves context needed for unique tile labels. +- Verifies with VoiceView normal navigation and Review Mode. +- Avoids unnecessary direct announcements. + +## Scenario 3: Native Vega RN Rail Details + +Prompt: + +```text +In a native React Native for Vega home screen, VoiceView only announces "button" for each content tile. The selected tile updates a details panel with title, episode, and progress, but that text is not reachable by screen reader focus. Suggest a fix. +``` + +Expected high-quality behavior: +- Treats this as native Vega RN, not WebView. +- Recommends useful labels and `role`. +- Uses `accessibilityDescribedBy` for related static details when appropriate. +- Mentions `accessibilityOrientationText` for complex TV layout if useful. +- Verifies spoken output and D-pad navigation. + +## Scenario 4: Modal Focus Trap + +Prompt: + +```text +A TV sign-in modal opens from a settings button. With the remote, focus sometimes moves behind the modal, and after closing it, focus jumps to the top nav. Give a fix plan for Vega TV accessibility. +``` + +Expected high-quality behavior: +- Starts by asking/detecting WebView vs native Vega RN if unspecified. +- Requires focus containment while modal is open. +- Requires focus return to the triggering settings button or next logical control. +- Checks Back/Escape behavior. +- Maps to WCAG focus order, no trap, and focus visible. + +## Scenario 5: Captions and Playback Controls + +Prompt: + +```text +Audit a Vega media playback screen for accessibility. It has play/pause, seek, captions, audio track, and settings controls. What issues should be checked and what evidence should be collected? +``` + +Expected high-quality behavior: +- Checks captions/subtitles enablement, sync, accuracy, readability, and persistence. +- Checks media control names, roles, states, and remote operability. +- Includes loading, buffering, offline, and error states. +- Includes VoiceView and D-pad evidence. +- Includes magnifier/text-size validation where applicable. + +## Scenario 6: Announcement Choice + +Prompt: + +```text +Our Vega WebView search page updates results after the user types. Should we use `aria-live`, `postMessage` plus `AccessibilityInfo.announceForAccessibility`, or both? +``` + +Expected high-quality behavior: +- Prefers semantic updates/live regions for routine dynamic web content. +- Reserves WebView-to-native announcements for cases that cannot be expressed semantically. +- Avoids duplicate announcements. +- Suggests polite announcements for result counts/status. +- Verifies VoiceView output and timing. + +## Scenario 7: Native RN Prop Modernization + +Prompt: + +```text +Review this React Native for Vega component. It uses `accessibilityRole="button"` and `accessibilityState={{ expanded: true }}` on a custom expandable row. What should change? +``` + +Expected high-quality behavior: +- Recognizes React Native for Vega guidance to prefer `role`. +- Recommends supported `aria-*` state props, such as `aria-expanded`, where appropriate. +- Keeps label, hint, and state synchronized with UI. +- Verifies VoiceView spoken role and expanded/collapsed state. +- Avoids generic web-only ARIA advice without RN context. + +## Scenario 8: Hidden Focusable Content + +Prompt: + +```text +In a Vega WebView menu, collapsed menu items are offscreen and have `aria-hidden="true"`, but D-pad focus can still move to them. How should this be fixed? +``` + +Expected high-quality behavior: +- Explains that hidden focusable content must not remain focusable. +- Recommends removing from DOM, using `hidden`/`display: none`, `inert` where supported, or disabling/removing focusability. +- Keeps `aria-hidden` for non-interactive hidden content only. +- Verifies D-pad cannot reach hidden controls. +- Verifies VoiceView no longer announces hidden menu items. + +## Scenario 9: Unknown App Type + +Prompt: + +```text +Help fix accessibility for a Vega TV app. I am not sure whether it is WebView or React Native for Vega. What should you inspect first? +``` + +Expected high-quality behavior: +- Does not start with fixes. +- Checks `manifest.toml`, dependencies, app entry points, WebView indicators, RN for Vega indicators, scripts, and rendered UI. +- Explains the different paths for WebView and native RN. +- Recommends auditing mixed apps separately. + +## Scenario 10: Contrast and Focus Indicator + +Prompt: + +```text +Our TV app uses a subtle gray focus ring on dark gray cards. It looks polished but users miss the focused item. Review this accessibility issue. +``` + +Expected high-quality behavior: +- Identifies focus visibility and non-text contrast risk. +- Recommends a clear high-contrast focus indicator. +- Mentions magnifier and VoiceView validation. +- Maps to WCAG focus visible, non-text contrast, and focus not obscured where applicable. +- Includes remote/D-pad verification. diff --git a/vega-tv-accessibility/evals/TRIGGER_PROMPTS.md b/vega-tv-accessibility/evals/TRIGGER_PROMPTS.md new file mode 100644 index 0000000..0cf4f0b --- /dev/null +++ b/vega-tv-accessibility/evals/TRIGGER_PROMPTS.md @@ -0,0 +1,46 @@ +# Trigger and Non-Trigger Prompts + +Use these prompts to evaluate whether the skill description activates at the right time. + +Expected behavior: +- **Trigger** prompts should use `vega-tv-accessibility`. +- **Non-trigger** prompts should not use `vega-tv-accessibility` unless the user adds accessibility context. + +## Trigger Prompts + +1. "Review accessibility for our Vega TV app. It has both WebView screens and native React Native for Vega settings pages." +2. "VoiceView reads every movie tile twice in my Vega WebView app. Help me fix it." +3. "Audit this native React Native for Vega playback screen for screen reader and D-pad accessibility." +4. "Our TV app loses focus after closing a modal with the Back button. What should we check?" +5. "Check whether this app should use `aria-live` or `AccessibilityInfo.announceForAccessibility` for loading messages." +6. "Create an accessibility checklist for a Vega media app with captions, magnifier, and remote navigation." +7. "The focused item and spoken item do not match in VoiceView on a React Native for Vega rail." +8. "Fix accessibility labels and roles for a Vega WebView carousel." +9. "Review our TV app for WCAG 2.2 AA issues around contrast, focus visible, and captions." +10. "Determine if this Vega app is WebView or native RN before giving accessibility fixes." + +## Non-Trigger Prompts + +1. "Migrate our Vega app into a multi-platform React Native monorepo." +2. "Set up Yarn workspaces for an Android TV and Apple TV project." +3. "Debug Metro module resolution for `@amazon-devices/react-native-kepler`." +4. "Add a new GitHub Actions workflow for weekly triage summaries." +5. "Update the README with installation instructions for skills.sh." +6. "Create a package.json for an Expo TV app." +7. "Explain how VMRP maps React Native imports for Vega." +8. "Convert this JavaScript component to TypeScript." +9. "Fix a failing unit test in the media playback reducer." +10. "Create a release note for a new Fire TV app version." + +## Description Optimization Notes + +If trigger prompts miss the skill, add or clarify terms in the description such as: +- Vega TV accessibility +- VoiceView +- D-pad or remote navigation +- Vega WebView accessibility +- React Native for Vega accessibility +- captions/subtitles +- magnifier + +If non-trigger prompts activate the skill too often, narrow the description around accessibility-specific work instead of generic Vega, migration, or monorepo tasks. From 63c3e0ff9f993d8f3b633ba0315232ee58489fd9 Mon Sep 17 00:00:00 2001 From: neha Date: Tue, 19 May 2026 13:29:22 +0100 Subject: [PATCH 3/3] Rename accessibility skill Co-authored-by: Cursor --- README.md | 4 ++-- .../LICENSE | 0 .../SKILL.md | 2 +- .../assets/templates/ACCESSIBILITY_CHECKLIST.md | 0 .../evals/README.md | 2 +- .../evals/RUNBOOK.md | 2 +- .../evals/SCORING_RUBRIC.md | 0 .../evals/TASK_SCENARIOS.md | 2 +- .../evals/TRIGGER_PROMPTS.md | 4 ++-- .../references/TV_APP_VALIDATION.md | 0 .../references/VEGA_REACT_NATIVE_ACCESSIBILITY.md | 0 .../references/VEGA_WEBVIEW_ACCESSIBILITY.md | 0 .../references/WCAG_WAI_REFERENCE.md | 0 13 files changed, 8 insertions(+), 8 deletions(-) rename {vega-tv-accessibility => react-native-tv-accessibility}/LICENSE (100%) rename {vega-tv-accessibility => react-native-tv-accessibility}/SKILL.md (99%) rename {vega-tv-accessibility => react-native-tv-accessibility}/assets/templates/ACCESSIBILITY_CHECKLIST.md (100%) rename {vega-tv-accessibility => react-native-tv-accessibility}/evals/README.md (93%) rename {vega-tv-accessibility => react-native-tv-accessibility}/evals/RUNBOOK.md (97%) rename {vega-tv-accessibility => react-native-tv-accessibility}/evals/SCORING_RUBRIC.md (100%) rename {vega-tv-accessibility => react-native-tv-accessibility}/evals/TASK_SCENARIOS.md (97%) rename {vega-tv-accessibility => react-native-tv-accessibility}/evals/TRIGGER_PROMPTS.md (92%) rename {vega-tv-accessibility => react-native-tv-accessibility}/references/TV_APP_VALIDATION.md (100%) rename {vega-tv-accessibility => react-native-tv-accessibility}/references/VEGA_REACT_NATIVE_ACCESSIBILITY.md (100%) rename {vega-tv-accessibility => react-native-tv-accessibility}/references/VEGA_WEBVIEW_ACCESSIBILITY.md (100%) rename {vega-tv-accessibility => react-native-tv-accessibility}/references/WCAG_WAI_REFERENCE.md (100%) diff --git a/README.md b/README.md index 932db13..c2aef30 100644 --- a/README.md +++ b/README.md @@ -9,7 +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 | -| [vega-tv-accessibility](vega-tv-accessibility/SKILL.md) | Audit and fix accessibility for Vega WebView and native React Native for Vega TV apps | +| [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 @@ -30,7 +30,7 @@ npx skills add AmazonAppDev/devices-agent-skills --skill vega-multi-tv-migration ``` ```bash -npx skills add AmazonAppDev/devices-agent-skills --skill vega-tv-accessibility +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). diff --git a/vega-tv-accessibility/LICENSE b/react-native-tv-accessibility/LICENSE similarity index 100% rename from vega-tv-accessibility/LICENSE rename to react-native-tv-accessibility/LICENSE diff --git a/vega-tv-accessibility/SKILL.md b/react-native-tv-accessibility/SKILL.md similarity index 99% rename from vega-tv-accessibility/SKILL.md rename to react-native-tv-accessibility/SKILL.md index 32602d0..01eb818 100644 --- a/vega-tv-accessibility/SKILL.md +++ b/react-native-tv-accessibility/SKILL.md @@ -1,5 +1,5 @@ --- -name: vega-tv-accessibility +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. --- diff --git a/vega-tv-accessibility/assets/templates/ACCESSIBILITY_CHECKLIST.md b/react-native-tv-accessibility/assets/templates/ACCESSIBILITY_CHECKLIST.md similarity index 100% rename from vega-tv-accessibility/assets/templates/ACCESSIBILITY_CHECKLIST.md rename to react-native-tv-accessibility/assets/templates/ACCESSIBILITY_CHECKLIST.md diff --git a/vega-tv-accessibility/evals/README.md b/react-native-tv-accessibility/evals/README.md similarity index 93% rename from vega-tv-accessibility/evals/README.md rename to react-native-tv-accessibility/evals/README.md index c54b642..2cf92ad 100644 --- a/vega-tv-accessibility/evals/README.md +++ b/react-native-tv-accessibility/evals/README.md @@ -1,6 +1,6 @@ # Vega TV Accessibility Evals -Use these evals to measure whether `vega-tv-accessibility` improves agent behavior compared with a baseline run without the skill. +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. diff --git a/vega-tv-accessibility/evals/RUNBOOK.md b/react-native-tv-accessibility/evals/RUNBOOK.md similarity index 97% rename from vega-tv-accessibility/evals/RUNBOOK.md rename to react-native-tv-accessibility/evals/RUNBOOK.md index 04b94ab..b742071 100644 --- a/vega-tv-accessibility/evals/RUNBOOK.md +++ b/react-native-tv-accessibility/evals/RUNBOOK.md @@ -1,6 +1,6 @@ # Eval Runbook -Use this runbook to compare baseline agent behavior with behavior after installing or enabling `vega-tv-accessibility`. +Use this runbook to compare baseline agent behavior with behavior after installing or enabling `react-native-tv-accessibility`. ## Preparation diff --git a/vega-tv-accessibility/evals/SCORING_RUBRIC.md b/react-native-tv-accessibility/evals/SCORING_RUBRIC.md similarity index 100% rename from vega-tv-accessibility/evals/SCORING_RUBRIC.md rename to react-native-tv-accessibility/evals/SCORING_RUBRIC.md diff --git a/vega-tv-accessibility/evals/TASK_SCENARIOS.md b/react-native-tv-accessibility/evals/TASK_SCENARIOS.md similarity index 97% rename from vega-tv-accessibility/evals/TASK_SCENARIOS.md rename to react-native-tv-accessibility/evals/TASK_SCENARIOS.md index 74e3d54..b047855 100644 --- a/vega-tv-accessibility/evals/TASK_SCENARIOS.md +++ b/react-native-tv-accessibility/evals/TASK_SCENARIOS.md @@ -1,6 +1,6 @@ # Task Scenarios -Run each scenario twice: once without the skill and once with `vega-tv-accessibility` available. Score both outputs with [SCORING_RUBRIC.md](SCORING_RUBRIC.md). +Run each scenario twice: once without the skill and once with `react-native-tv-accessibility` available. Score both outputs with [SCORING_RUBRIC.md](SCORING_RUBRIC.md). ## Scenario 1: Mixed App Detection diff --git a/vega-tv-accessibility/evals/TRIGGER_PROMPTS.md b/react-native-tv-accessibility/evals/TRIGGER_PROMPTS.md similarity index 92% rename from vega-tv-accessibility/evals/TRIGGER_PROMPTS.md rename to react-native-tv-accessibility/evals/TRIGGER_PROMPTS.md index 0cf4f0b..88e94da 100644 --- a/vega-tv-accessibility/evals/TRIGGER_PROMPTS.md +++ b/react-native-tv-accessibility/evals/TRIGGER_PROMPTS.md @@ -3,8 +3,8 @@ Use these prompts to evaluate whether the skill description activates at the right time. Expected behavior: -- **Trigger** prompts should use `vega-tv-accessibility`. -- **Non-trigger** prompts should not use `vega-tv-accessibility` unless the user adds accessibility context. +- **Trigger** prompts should use `react-native-tv-accessibility`. +- **Non-trigger** prompts should not use `react-native-tv-accessibility` unless the user adds accessibility context. ## Trigger Prompts diff --git a/vega-tv-accessibility/references/TV_APP_VALIDATION.md b/react-native-tv-accessibility/references/TV_APP_VALIDATION.md similarity index 100% rename from vega-tv-accessibility/references/TV_APP_VALIDATION.md rename to react-native-tv-accessibility/references/TV_APP_VALIDATION.md diff --git a/vega-tv-accessibility/references/VEGA_REACT_NATIVE_ACCESSIBILITY.md b/react-native-tv-accessibility/references/VEGA_REACT_NATIVE_ACCESSIBILITY.md similarity index 100% rename from vega-tv-accessibility/references/VEGA_REACT_NATIVE_ACCESSIBILITY.md rename to react-native-tv-accessibility/references/VEGA_REACT_NATIVE_ACCESSIBILITY.md diff --git a/vega-tv-accessibility/references/VEGA_WEBVIEW_ACCESSIBILITY.md b/react-native-tv-accessibility/references/VEGA_WEBVIEW_ACCESSIBILITY.md similarity index 100% rename from vega-tv-accessibility/references/VEGA_WEBVIEW_ACCESSIBILITY.md rename to react-native-tv-accessibility/references/VEGA_WEBVIEW_ACCESSIBILITY.md diff --git a/vega-tv-accessibility/references/WCAG_WAI_REFERENCE.md b/react-native-tv-accessibility/references/WCAG_WAI_REFERENCE.md similarity index 100% rename from vega-tv-accessibility/references/WCAG_WAI_REFERENCE.md rename to react-native-tv-accessibility/references/WCAG_WAI_REFERENCE.md