Skip to content

Releases: ArturKalach/react-native-a11y-order

Release 0.9.1

06 May 17:57

Choose a tag to compare

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

04 May 20:33

Choose a tag to compare

0.9.0 (2026-05-04)

iOS Android
ios example android example

What's Changed

  • React Native 0.85.x support
  • A11y.FocusTrap forceLock prop 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.FocusTrap on iOS now supports a forceLock prop that actively enforces focus containment — VoiceOver is redirected back into the trap whenever focus escapes. Use it when accessibilityViewIsModal alone 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

10 Mar 10:40

Choose a tag to compare

0.8.2 (2026-03-10)

Improved CommonJS support by updating the builder config.

Release 0.8.1

10 Mar 10:39

Choose a tag to compare

0.8.1 (2026-03-02)

Types updated for improved React v18 and v19 support.

Release 0.8.0

26 Feb 21:38

Choose a tag to compare

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.

image

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

17 Feb 17:44

Choose a tag to compare

0.7.2 (2026-02-16)

  • Associated Objects issue on iOS that caused crashes in A11yView has been fixed (10c240c)
  • ScreenReaderDescendantFocusChangedEvent has been added to index.ts for better type import (0cda3a7)

Thanks to @sleepym09 for providing the fix for the issue with iOS.

Release 0.7.1

02 Feb 22:07

Choose a tag to compare

0.7.1 (2026-02-02)

Fixes:

  • Update the announce module to ensure proper module registration on iOS (d3b83b5)

Many thanks to sleepym09 for highlighting the issue and creating the PR.

Release 0.7.0

12 Jan 21:35

Choose a tag to compare

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.FocusFrame and A11y.FocusTrap. These components enable more robust accessibility by managing and restricting focus within specific areas of the screen.

More Information
  • On iOS, A11y.FocusTrap uses the native accessibilityViewIsModal property to keep the focus within a defined area.
  • On Android, where no equivalent to accessibilityViewIsModal exists, 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.PaneTitle and A11y.ScreenChange have 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.announce is used as a workaround to announce screen changes (see the A11yModule.announce section 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.announce function 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

23 Oct 09:37

Choose a tag to compare

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

22 Sep 18:42

Choose a tag to compare

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
Android - Screen Change Announcement iOS-ScreenChangeAnnouncemen

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.