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 experimental_accessibilityOrder prop — see Accessibility docs.

Installation

yarn add react-native-a11y-order
cd ios && pod install

Get 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

• Getting started
• Component overview
• Guides
• Component API reference
• Migration guide

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

Both active versions receive fixes:

| 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