Releases: ArturKalach/react-native-a11y-order
Release 0.9.1
0.9.1 (2026-05-06)
What's Changed
- Removed hardcoded AGP dependency from
android/build.gradle#41
Android Build Fix
Removed a hardcoded AGP 7.2.1 dependency that pulled in libraries with known security vulnerabilities. This was causing build failures in projects that use corporate Maven proxies with vulnerability policies (e.g. Cloudsmith, Nexus).
Upgrade to 0.9.1 — no changes needed on your side.
Workaround if you can't upgrade yet
React Native < 0.71 — add to your root android/build.gradle:
buildscript {
dependencies {
classpath "com.android.tools.build:gradle:8.1.4"
}
}Special thanks to @jsyrjala for reporting the issue and providing detailed context on the Gradle side.
Release 0.9.0
0.9.0 (2026-05-04)
| iOS | Android |
|---|---|
![]() |
![]() |
What's Changed
- React Native 0.85.x support
A11y.FocusTrapforceLockprop for active focus enforcement on iOS- Internal refactor of native iOS and Android layers
- Updated example app
React Native 0.85.x Support
Updated iOS native layer to support React Native 0.85.x. This ensures VoiceOver focus tracking works correctly with the new default framework build configuration introduced in this version.
Force Lock (iOS)
A11y.FocusTrapon iOS now supports aforceLockprop that actively enforces focus containment — VoiceOver is redirected back into the trap whenever focus escapes. Use it whenaccessibilityViewIsModalalone is not sufficient to keep focus within the locked area.
<A11y.FocusTrap forceLock>
...
</A11y.FocusTrap>Internal Refactor
Refactored native iOS and Android implementations to improve stability and maintainability.
More Information
iOS
- Improved focus ordering services reliability
- More robust focus lock behavior
- Cleaner view and delegate implementations
Android
- Better focus order tracking
- Improved internal utilities
- Cleaner view implementations
Example App Update
The example application has been refreshed with updated screens and components.
Release 0.8.2
0.8.2 (2026-03-10)
Improved CommonJS support by updating the builder config.
Release 0.8.1
0.8.1 (2026-03-02)
Types updated for improved React v18 and v19 support.
Release 0.8.0
0.8.0 (2026-02-26)
Dependencies Update
The dependency packages have been updated based on the latest version of create-react-native-library, which helps reduce vulnerabilities and improve version support.
Package functionality and compatibility have been tested with the following React Native versions:
0.72.17, 0.75.5, 0.83.1, 0.84.0
Release 0.7.2
0.7.2 (2026-02-16)
- Associated Objects issue on iOS that caused crashes in
A11yViewhas been fixed (10c240c) ScreenReaderDescendantFocusChangedEventhas been added toindex.tsfor better type import (0cda3a7)
Thanks to @sleepym09 for providing the fix for the issue with iOS.
Release 0.7.1
Release 0.7.0
0.7.0 (2026-01-12)
Screen Reader Focus Events
| iOS | Android |
|---|---|
![]() |
![]() |
To enhance accessibility and provide better focus management, screen reader focus handlers have been added. These handlers allow you to capture and respond to screen reader focus events effectively, enabling features like managing animations, timers, and other interactions based on focus changes.
More Information
A11y.View Props:
| Prop | Description |
|---|---|
| onScreenReaderFocused | Triggered when the view gets focus from the screen reader. |
| onScreenReaderSubViewFocused | Triggered when a subview within the component is focused by the screen reader. |
| onScreenReaderSubViewBlurred | Triggered when the screen reader focus moves away or is blurred from a subview. |
| onScreenReaderSubViewFocusChange | Triggered when the focus status of a subview changes (either focused or blurred). |
| onScreenReaderDescendantFocusChanged | Triggered when any descendant subview is focused by the screen reader. Provides an object containing the focus status and the nativeId of the focused subview, if applicable. Example: < { status: string, nativeId?: string } >. |
<A11y.View
onScreenReaderDescendantFocusChanged={(e) => console.log(e)}
onScreenReaderSubViewFocused={() => console.log('List has been focused')}
onScreenReaderSubViewBlurred={() => console.log('List has been blurred')}
onScreenReaderFocused={() => console.log('Focused')}
>
...
</A11y.View>Focus Lock Functionality
| iOS | Android |
|---|---|
![]() |
![]() |
The focus lock functionality has been introduced with two new components:
A11y.FocusFrameandA11y.FocusTrap. These components enable more robust accessibility by managing and restricting focus within specific areas of the screen.
More Information
- On iOS,
A11y.FocusTrapuses the nativeaccessibilityViewIsModalproperty to keep the focus within a defined area. - On Android, where no equivalent to
accessibilityViewIsModalexists, custom logic has been implemented as a workaround. By default, Android uses a custom Activity or Modal to limit focus. While using a Modal is considered the best practice for focus locking on Android, some scenarios—such as issues with React Native's Modal or library-specific constraints—may require alternative implementations.
How It Works
The focus lock functionality should be used as a pair:
A11y.FocusFrame: This component is used at the root level of a "screen" to detect focus leaks and ensure that focus remains contained.A11y.FocusTrap: This component wraps the content area where focus should be explicitly locked.
| Prop | Description |
|---|---|
| ViewProps | Includes all standard React Native View properties, such as style, testID, etc. |
<A11y.FocusFrame>
...
<A11y.FocusTrap>
<Text accessibilityRole="header">Locked Area</Text>
<Button
title="Confirm"
accessibilityLabel="Confirm action"
/>
</A11y.FocusTrap>
...
</A11y.FocusFrame>A11y.PaneTitle and A11y.ScreenChange
| iOS | Android |
|---|---|
![]() |
![]() |
The components
A11y.PaneTitleandA11y.ScreenChangehave been introduced to enhance accessibility by providing robust support for announcing screen changes and their states.
More Information
Platform-Specific Behavior
-On Android, A11y.PaneTitle and A11y.ScreenChange utilize native properties, specifically: activity.setTitle and setAccessibilityPaneTitle.
- On iOS, due to the lack of equivalent native functionality,
A11yModule.announceis used as a workaround to announce screen changes (see theA11yModule.announcesection for details).
When to Use:
Currently, React Native doesn't provide APIs for announcing modal or screen transitions. To address this and improve accessibility, you can use A11y.PaneTitle or A11y.ScreenChange to announce:
- Screen transitions, such as navigating to a new screen (e.g., "Login Screen").
- Modal presentations, such as when a modal appears (e.g., "Confirm Modal").
A11y.PaneTitle Props
| Prop | Description |
|---|---|
| title | The title message to be announced for the screen or modal. |
| detachMessage | The message to be announced when this component is detached (e.g., when leaving the screen). |
| type | The type of announcement for Android. Options: activity, pane, or announce. |
| displayed | A trigger for screen focus changes, used to properly update the Android Activity title when switching screens. |
| withFocusRestore | Ensures that the screen reader focus is preserved and restored appropriately after a screen change. (iOS-specific) |
The A11y.ScreenChange component is a specialized implementation of A11y.PaneTitle. It is preconfigured with type="activity" for screen change announcements on Android and works identically to A11y.PaneTitle.
Example:
export const LoginScreen = ({ navigation }) => {
const isFocused = useIsFocused();
return (
<View>
<A11y.ScreenChange
title="Login Screen"
displayed={isFocused}
/>
<View style={styles.container}>
<Text>Welcome to the Login Screen</Text>
<Button title="Continue" onPress={() => navigation.navigate('Home')} />
</View>
</View>
);
};A11yModule.announce - Alternative Announcement Function
The
A11yModule.announcefunction has been introduced to improve accessibility announcement behavior on iOS.
More Information
Why Use `A11yModule.announce`?On iOS, the default AccessibilityInfo.announceForAccessibility function can be interrupted by focus changes. This means that if you attempt to announce a message, the announcement could be prematurely cut off due to various events, such as screen navigation or the display of a modal.
To address this limitation, A11yModule.announce uses a custom solution built on native events to ensure that announcements are made reliably and are less likely to be interrupted.
A11yModule API:
| Function | Description |
|---|---|
| announce(message: string): void | Posts a string to be announced by the screen reader, ensuring improved reliability on iOS. |
A11yModule.announce('This is a custom announcement, now more reliable on iOS!');Release 0.6.0
0.6.0 (2025-10-19)
Refactor and Performance Update
- The package has been refactored and optimized for improved performance and memory management.
- Component registration has been fixed and updated.
- The Group component has been fixed to ensure proper functionality on the old arch.
Release 0.5.0
0.5.0 (2025-08-29)
Features
A11y.ScreenChange and A11y.PaneTitle have been added to improve focus control and screen change announcements. Additionally, A11y.View has been introduced to provide focus and autoFocus functionality.
| Android | iOS |
|---|---|
![]() |
![]() |
A11y.PaneTitle
A11y.PaneTitle is view base component developed for screen change annoncement.
<A11y.PaneTitle title="Confirmation Modal" />| Prop | Description | Type |
|---|---|---|
title?: |
Title for content announcement. Based on the type, it could represent an activity title change, setAccessibilityPaneTitle, or default announceForAccessibility. For iOS, it's always UIAccessibilityScreenChangedNotification. |
string | undefined |
detachMessage? |
Message for detaching. For type="activity", it changes the activity title. For a pane, this is ignored. |
string | undefined |
type?: |
Android-specific. Defines the type of screen change. By default, it is pane. |
pane | activity | announce |
withFocusRestore?: |
iOS-specific. Configures restoring the screen reader focus when navigating between screens. | boolean | undefined |
A11y.ScreenChange
Is preset for A11y.PaneTitle, basicaly it's A11y.PaneTitle with activity type.
<A11y.ScreenChange title="Settings Screen" />A11y.ScreenChange is one of the best options for screen announcements; however, for modals, it may be preferable to use A11y.PaneTitle.
A11y.View
A11y.View is a simple, view-based component designed to provide autoFocus functionality.
<A11y.View autoFocus>
<Button title="Close" onPress={...} />
</A11y.View>Updates
The React Native version of the example project has been updated. Additionally, react-navigation has been added for navigation.









