Native-first React Native library for screen reader focus order, focus trapping, cards with nested buttons, and accessibility announcements on iOS (VoiceOver) and Android (TalkBack).
React Native A11y Order
Native-first React Native library for controlling screen reader focus order on iOS (VoiceOver) and Android (TalkBack).
- 🔢 Custom focus order — define the exact sequence, independent of render order
- 🃏 Cards with inner buttons — card action and nested controls, both accessible at once
- 🔒 Focus trap — keep VoiceOver and TalkBack inside modals, no leaking
- 📣 Transition announcements — notify the screen reader on screen and panel changes
- ⚡ New Architecture · Old Architecture · Bridgeless · Expo prebuild
[!TIP]
Before adding this library, try <View collapsable={false}> — it fixes most simple focus order issues with no extra dependencies. Learn more
[!IMPORTANT]
React Native v0.8.2+ includes an experimental experimentalaccessibilityOrder prop — see Accessibility docs.
Installation
yarn add react-native-a11y-order
cd ios && pod installGet started with the getting started guide or jump straight to the component overview.
React Native compatibility
| Library version | React Native | | :-- | :-- | | 1.0.0 | ≥ 0.80 | | 0.11.0 | ≤ 0.79 |
What's available
Components
| Export | Purpose | | :-- | :-- | | A11y.Order | Container that defines a named focus-order sequence. | | A11y.Index | Positioned slot within an A11y.Order sequence. | | A11y.View | Standalone view with screen reader focus events; no ordering. | | A11y.Card | Card that keeps both a card-level action and nested buttons accessible simultaneously. | | A11y.FocusTrap | Confines screen reader focus to a subtree (modal/overlay). | | A11y.FocusFrame | Root boundary required by A11y.FocusTrap; detects focus escaping the region. | | A11y.PaneTitle | Announces screen or panel transitions to VoiceOver/TalkBack. | | A11y.ScreenChange | Shorthand for A11y.PaneTitle with type="activity" pre-set. |
API
| Export | Purpose | | :-- | :-- | | ScreenReader | Reliable programmatic announcements for VoiceOver and TalkBack. |
Documentation
Roadmap
All planned features are implemented and released. No new functionality or API changes are planned.
Future work is limited to:
- React Native version support (new releases)
- Bug fixes and issue resolution
| Version | React Native | Status | | :-- | :-- | :-- | | 1.0.0 | ≥ 0.80 | Active — bug fixes and new RN support | | 0.11.0 | ≤ 0.79 | Active — bug fixes only |
Contributing
See the contributing guide to learn how to contribute to the repository and the development workflow.
License
MIT
Made with create-react-native-library
