elias/everything-claude-code
1
0
Fork 0
mirror of https://github.com/affaan-m/everything-claude-code.git synced 2026-06-30 19:00:57 +08:00
Code Issues Packages Projects Releases Wiki Activity
everything-claude-code/rules/react-native/accessibility.md
Yeris Rifan a141db3ad2
feat(rules,skills): add React Native / Expo rules pack and react-native-patterns skill (#2275) 
* feat(rules,skills): add React Native / Expo rules pack and react-native-patterns skill

* fix(rules,skills): address review feedback — safeParse nav example, drop deprecated sentry-expo, memoize list renderItem, clarify New Architecture SDK support

* fix(rules,skills): drop deprecated Flipper, surface permission-denied state in location hook
2026-06-29 19:22:48 -07:00

2.3 KiB
Raw Blame History

paths
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.
<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.