wehub-resource-sync
d48cda4081
CI / Test (ubuntu-latest, Node 18.x, bun) (push) Failing after 15m1s
CI / Test (ubuntu-latest, Node 18.x, npm) (push) Failing after 15m1s
CI / Test (ubuntu-latest, Node 18.x, pnpm) (push) Failing after 15m1s
CI / Test (ubuntu-latest, Node 18.x, yarn) (push) Failing after 15m1s
CI / Test (ubuntu-latest, Node 20.x, bun) (push) Failing after 17m13s
CI / Test (ubuntu-latest, Node 20.x, npm) (push) Failing after 18m42s
CI / Test (ubuntu-latest, Node 20.x, pnpm) (push) Failing after 15m0s
CI / Test (ubuntu-latest, Node 20.x, yarn) (push) Failing after 49m44s
CI / Test (ubuntu-latest, Node 22.x, bun) (push) Failing after 51m55s
CI / Test (ubuntu-latest, Node 22.x, pnpm) (push) Failing after 21m57s
CI / Test (ubuntu-latest, Node 22.x, npm) (push) Failing after 37m39s
CI / Test (ubuntu-latest, Node 22.x, yarn) (push) Failing after 34m7s
CI / Validate Components (push) Failing after 37m15s
CI / Python Tests (push) Failing after 10m1s
CI / Security Scan (push) Failing after 10m1s
CI / Lint (push) Failing after 17m12s
CI / Coverage (push) Failing after 20m19s
CI / Test (macos-latest, Node 18.x, bun) (push) Has been cancelled
CI / Test (macos-latest, Node 18.x, npm) (push) Has been cancelled
CI / Test (macos-latest, Node 18.x, pnpm) (push) Has been cancelled
CI / Test (macos-latest, Node 18.x, yarn) (push) Has been cancelled
CI / Test (windows-latest, Node 18.x, npm) (push) Has been cancelled
CI / Test (windows-latest, Node 18.x, pnpm) (push) Has been cancelled
CI / Test (windows-latest, Node 18.x, yarn) (push) Has been cancelled
CI / Test (macos-latest, Node 20.x, bun) (push) Has been cancelled
CI / Test (macos-latest, Node 20.x, npm) (push) Has been cancelled
CI / Test (macos-latest, Node 20.x, pnpm) (push) Has been cancelled
CI / Test (macos-latest, Node 20.x, yarn) (push) Has been cancelled
CI / Test (windows-latest, Node 20.x, npm) (push) Has been cancelled
CI / Test (windows-latest, Node 20.x, pnpm) (push) Has been cancelled
CI / Test (windows-latest, Node 20.x, yarn) (push) Has been cancelled
CI / Test (macos-latest, Node 22.x, bun) (push) Has been cancelled
CI / Test (macos-latest, Node 22.x, npm) (push) Has been cancelled
CI / Test (macos-latest, Node 22.x, pnpm) (push) Has been cancelled
CI / Test (macos-latest, Node 22.x, yarn) (push) Has been cancelled
CI / Test (windows-latest, Node 22.x, npm) (push) Has been cancelled
CI / Test (windows-latest, Node 22.x, pnpm) (push) Has been cancelled
CI / Test (windows-latest, Node 22.x, yarn) (push) Has been cancelled
56 lines
2.3 KiB
Markdown
56 lines
2.3 KiB
Markdown
---
|
|
paths:
|
|
- "**/*.ts"
|
|
- "**/*.tsx"
|
|
---
|
|
# React Native / Expo Accessibility
|
|
|
|
> Extends the ECC quality bar to accessibility (a11y). Treat a11y as a release requirement, not an afterthought.
|
|
> Target: usable with screen readers (VoiceOver on iOS, TalkBack on Android) and at large font sizes.
|
|
|
|
## Labeling
|
|
|
|
- Every interactive element has an `accessibilityRole` and an `accessibilityLabel` (or readable child text).
|
|
- Icon-only buttons MUST have an `accessibilityLabel` — there is no visible text for the reader to announce.
|
|
- Use `accessibilityHint` only when the action is non-obvious; keep it short.
|
|
- Group related elements with `accessible` on the container so they're announced as one unit when appropriate.
|
|
|
|
```tsx
|
|
<Pressable
|
|
accessibilityRole="button"
|
|
accessibilityLabel="Delete item"
|
|
onPress={onDelete}
|
|
>
|
|
<TrashIcon />
|
|
</Pressable>
|
|
```
|
|
|
|
## State & Live Regions
|
|
|
|
- Communicate state with `accessibilityState` (e.g. `{ disabled, selected, checked, expanded }`).
|
|
- Announce async/transient changes (toasts, validation errors) via `accessibilityLiveRegion` (Android) and `AccessibilityInfo.announceForAccessibility` where needed.
|
|
- Reflect loading/error/empty states in text the reader can reach — not just spinners or color.
|
|
|
|
## Touch Targets & Layout
|
|
|
|
- Minimum touch target ~44x44pt (iOS) / 48x48dp (Android); use `hitSlop` to enlarge small controls.
|
|
- Respect Dynamic Type / font scaling — avoid fixed heights that clip scaled text; test at the largest accessibility font size.
|
|
- Honor `prefers-reduced-motion` (`AccessibilityInfo.isReduceMotionEnabled`) — gate non-essential animation.
|
|
|
|
## Color & Contrast
|
|
|
|
- Do not convey meaning by color alone; pair with text, icon, or shape.
|
|
- Meet WCAG AA contrast: 4.5:1 for body text, 3:1 for large text and meaningful UI/graphical elements.
|
|
- Verify both light and dark themes.
|
|
|
|
## Focus & Navigation
|
|
|
|
- Logical focus order; move focus to new content (modals, screens) on open and restore on close.
|
|
- Ensure custom components are reachable and operable by the screen reader, not just by touch.
|
|
|
|
## Testing
|
|
|
|
- Manually test with VoiceOver and TalkBack on real devices — automated checks do not catch everything.
|
|
- In component tests, query by role/label (see testing.md) so a11y and tests reinforce each other.
|
|
- Add a11y to the pre-release gate: key flows pass a screen-reader walkthrough.
|