react-native-a11y-order 0.6.0 → 0.7.1-rc

package/README.md

@@ -1,60 +1,201 @@
 # React Native A11y Order
 
-React Native A11y Order Library: Advanced control of screen reader order.
+React Native A11y Order Library: Enhance screen reader functionality with advanced control.
 
-Setting the right reading order can be a challenge, but there is a way to do it. The react-native-a11y-order is a native-first library designed to solve problems with the ordering of screen readers on both Android and iOS platforms.
+Managing screen reader focus order can be challenging, especially in complex or unconventional scenarios. The `react-native-a11y-order` library is built with a native-first approach to resolve issues related to screen reader focus order and provide additional accessibility features on both Android and iOS platforms.
 
 | iOS reader                                                | Android reader                                                |
 | --------------------------------------------------------- | ------------------------------------------------------------- |
 | <img src="/.github/images/ios-reader.gif" height="500" /> | <img src="/.github/images/android-reader.gif" height="500" /> |
 
 
-## New Release: Updated Focus Order with Groups and Elements
-We’ve improved and fixed the accessibility focus order logic for Android and iOS.
+- Bridgeless
+- New architecture
+- Old architecture
+- Backward compatibility
+- Compatible with Expo prebuild
+
+> [!TIP]
+> If you need to adjust the horizontal or vertical focus order, consider using `<View collapsable={false}>` as a quick fix.
+> By default, React Native optimizes views, which can sometimes impact the focus order unintentionally.
+>
+> While this library is designed to handle complex or unusual focus scenarios, in many cases, using `<View collapsable={false}>` can resolve focus issues without requiring additional work.
+
+> [!IMPORTANT]
+> Starting from React Native v0.8.2, an experimental feature `experimental_accessibilityOrder` is available for setting the correct focus order.
+> You can find more information in the [Accessibility documentation](https://reactnative.dev/docs/accessibility).
+
+
+## Installation
 
-The `A11y.Index` component has been updated. The definition of `accessible components` is now controlled by the `orderType` property. It should resolve problem with android order between groups. You can choose from the following options: `default`, `legacy`, or `search` to configure the desired behavior.
+```sh
+npm install react-native-a11y-order
+```
 
-| Prop: orderType | Description |
+```sh
+yarn add react-native-a11y-order
+```
+
+## Recent Updates
+
+#### Screen Reader Focus Events
+
+| iOS | Android |
 | :-- | :-- |
-| `default` | Defines the root component as an order element. It can be a group of elements or a single element. If there are multiple elements inside, navigation goes through the inner elements and proceeds to the next index. |
-| `legacy` | Uses the previous implementation of the element search, retrieving the first child as the accessibility element for order. |
-| `search` | Searches for the first accessible element in the child tree. |
+| <img src="/.github/images/screen-reader-focus-ios.gif" height="500" /> |  <img src="/.github/images/screen-reader-focus-android.gif" height="500" />  |
 
-The `A11y.Container` component has been added to support the `UIAccessibilityContainerType` feature on iOS.
-| Props | Description |
+> 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.
+
+<details>
+  <summary>More Information</summary>
+
+A11y.View Props:
+| Prop | Description |
 | :-- | :-- |
-| ViewProps | Default view props, including style, testID, etc. |
-| type?: | `none` \| `table` \| `list` \| `landmark` \| `group` — representation of `UIAccessibilityContainerType`. The default value is `group`. |
+| 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 } >. |
+
+```tsx
+<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>
+```
+</details>
 
-The inner implementation of `A11y.Group` has been replaced by `A11y.Container` with the `none` value as the default for the type prop, as it provides a more appropriate implementation. The previous implementation is now available under the `legacy` option.
-| Props | Description |
+#### Focus Lock Functionality
+
+| iOS | Android |
 | :-- | :-- |
-| ViewProps | Default view props, including style, testID, etc. |
-| type?: | `legacy` or `none` \| `table` \| `list` \| `landmark` \| `group` — representation of `UIAccessibilityContainerType`. The default value is `none`. |
+| <img src="/.github/images/focus-lock-ios.gif" height="500" /> |  <img src="/.github/images/focus-lock-android.gif" height="500" />  |
 
+> 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.
 
-- Bridgeless
-- New architecture
-- Backward compatibility
+<details>
+  <summary>More Information</summary>
 
-## Installation
+- 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.
 
-```sh
-npm install react-native-a11y-order
+#### 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. |
+
+```tsx
+<A11y.FocusFrame>
+  ...
+  <A11y.FocusTrap>
+    <Text accessibilityRole="header">Locked Area</Text>
+    <Button
+      title="Confirm"
+      accessibilityLabel="Confirm action"
+    />
+  </A11y.FocusTrap>
+  ...
+</A11y.FocusFrame>
 ```
 
-```sh
-yarn add react-native-a11y-order
+</details>
+
+#### A11y.PaneTitle and A11y.ScreenChange
+
+| iOS | Android |
+| :-- | :-- |
+| <img src="/.github/images/announce-ios.gif" height="500" /> |  <img src="/.github/images/announce-android.gif" height="500" />  |
+
+> The components `A11y.PaneTitle` and `A11y.ScreenChange` have been introduced to enhance accessibility by providing robust support for announcing screen changes and their states.
+
+<details>
+  <summary>More Information</summary>
+
+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:
+```tsx
+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>
+  );
+};
 ```
+</details>
+
+#### A11yModule.announce - Alternative Announcement Function
 
-You can also use version `react-native-a11y-order@0.2.5`. Version `0.3.0` is released solely to support React Native versions `0.79.x to 0.80.x`.
+> The `A11yModule.announce` function has been introduced to improve accessibility announcement behavior on iOS.
+
+<details>
+  <summary>More Information</summary>
+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. |
+
+```tsx
+A11yModule.announce('This is a custom announcement, now more reliable on iOS!');
+```
+</details>
 
 
 ## Usage
 
 #### A11y.Order, A11y.Index
 
-There is always a question about how to set the focus order for a screen reader in React Native. `A11y.Order` and `A11y.Index` are designed to assist with this task. `A11y.Order` is a container component that defines an ordering group, while `A11y.Index` is a wrapper component that helps define a position within the order.
+To set the focus order for a screen reader in React Native, you can use the following components:
+- `A11y.Order`: A container component that creates an ordering group for focusable elements.
+- `A11y.Index`: A wrapper component that defines the position of an element within the ordering group.
+
+Using these components together simplifies the process of managing focus order in complex UI structures.
 
 To illustrate, let's look at an example:
 
@@ -91,7 +232,7 @@ export default function App() {
 }
 ```
 
-Additionally, for dynamic interaction scenarios, setting focus programmatically can be very useful. This can be achieved using the focus command via a component ref.
+Additionally, for dynamic interaction scenarios, programmatically setting focus can be highly effective. You can achieve this by using the focus method through a component reference.
 
 ```js
 import { A11y, IndexCommands } from 'react-native-a11y-order';
@@ -115,6 +256,30 @@ export default function App() {
   );
 }
 ```
+A11y.Index Props:
+| Prop | Description |
+| :-- | :-- |
+| ViewProps | Standard React Native View properties, including style, testID, etc. |
+| index | (number) The position of the component in the order sequence. |
+| ref: focus | Reference to a focus command, used to set accessibility focus programmatically. |
+| orderType | Specifies the algorithm used for view ordering (see details below). |
+| 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). |
+
+
+| Value | Description |
+| :-- | :-- |
+| default | Treats the root component as an orderable element. This can be a group or a single element. If multiple elements are present, navigation moves through the inner elements before proceeding to the next index. |
+| legacy | Uses the previous implementation for element search, selecting the first child as the accessibility element for ordering. |
+| search | Searches the child tree for the first accessible element to use in the order. |
+
+
+A11y.Order Props:
+
+| Prop | Description |
+| :-- | :-- |
+| ...ViewProps | Standard React Native View props, including style, testID, etc. |
 
 ## A11y.Container
 | View                                                      | A11y.Container                                                    |
@@ -127,6 +292,107 @@ The `A11y.Container` component for configuration `UIAccessibilityContainerType`
 | ViewProps | Default view props, including style, testID, etc. |
 | type?: | `none` \| `table` \| `list` \| `landmark` \| `group` — representation of `UIAccessibilityContainerType`. The default value is `group`. |
 
+
+## A11y.View
+`The A11y.View` component can be used to handle and track screen reader focus independently of the `A11y.Index` component.
+
+| 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 } >. |
+
+```tsx
+<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>
+```
+
+## A11y.FocusFrame, A11y.FocusTrap
+
+These components enhance accessibility by providing better control over focus management within specific areas of the screen.
+
+- `A11y.FocusFrame`: Used at the root level of a "screen" to detect and prevent focus leaks, ensuring focus remains contained.
+- `A11y.FocusTrap`: Wraps the content area to explicitly enforce focus confinement within a defined region.
+
+| Prop | Description |
+| :-- | :-- |
+| ViewProps | Includes all standard React Native View properties, such as style, testID, etc. |
+
+```tsx
+<A11y.FocusFrame>
+  ...
+  <A11y.FocusTrap>
+    <Text accessibilityRole="header">Locked Area</Text>
+    <Button
+      title="Confirm"
+      accessibilityLabel="Confirm action"
+    />
+  </A11y.FocusTrap>
+  ...
+</A11y.FocusFrame>
+```
+
+## A11y.PaneTitle, A11y.ScreenChange
+
+Components for screen change announcements
+
+
+React Native currently lacks built-in APIs for announcing modal or screen transitions. To enhance accessibility, you can use A11y.PaneTitle or A11y.ScreenChange:
+- Screen transitions: Announce navigation to a new screen (e.g., "Login Screen").
+- Modal presentations: Announce when a modal appears (e.g., "Confirm Modal").
+
+| 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 simplified version of `A11y.PaneTitle`. It is preconfigured with `type="activity"` to handle screen change announcements on Android. Beyond that, it behaves identically to `A11y.PaneTitle`.
+
+Example:
+```tsx
+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
+`A11yModule` provides an alternative solution for reliably announcing information on iOS.
+
+The default `AccessibilityInfo.announceForAccessibility` function on iOS can often be disrupted by focus changes. For instance, announcements might get interrupted by actions such as navigating between screens or opening a modal.
+
+To overcome this limitation, `A11yModule.announce` is implemented with a custom solution that leverages native events, ensuring that announcements are delivered reliably and are less likely to be interrupted.
+
+| Function | Description |
+| :-- | :-- |
+| announce(message: string): void | Posts a message to be announced by the screen reader with improved reliability on iOS. |
+
+```tsx
+A11yModule.announce('This is a custom announcement, now more reliable on iOS!');
+```
+
 ## Migration
 
 <details>

package/android/src/main/java/com/a11yorder/A11yOrderPackage.java

@@ -1,22 +1,28 @@
 package com.a11yorder;
 
 
-import com.a11yorder.views.A11yContainerView.A11yContainerViewManager;
+import com.a11yorder.modules.A11yAnnounceModule;
+import com.a11yorder.views.A11yUIContainerView.A11yUIContainerViewManager;
 import com.a11yorder.views.A11yGroupView.A11yGroupViewManager;
 import com.a11yorder.views.A11yIndexView.A11yIndexViewManager;
+import com.a11yorder.views.A11yLockView.A11yLockViewManager;
 import com.a11yorder.views.A11yOrderView.A11yOrderViewManager;
 import com.a11yorder.views.A11yPaneTitle.A11yPaneTitleManager;
 import com.a11yorder.views.A11yView.A11yViewManager;
+import com.facebook.react.module.model.ReactModuleInfo;
+import com.facebook.react.module.model.ReactModuleInfoProvider;
 import com.facebook.react.uimanager.ViewManager;
+import com.facebook.react.TurboReactPackage;
 
 import java.util.ArrayList;
+import java.util.HashMap;
 import java.util.List;
+import java.util.Map;
 
-import com.facebook.react.ReactPackage;
 import com.facebook.react.bridge.NativeModule;
 import com.facebook.react.bridge.ReactApplicationContext;
 
-public class A11yOrderPackage implements ReactPackage {
+public class A11yOrderPackage extends TurboReactPackage {
 
   @Override
   public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
@@ -24,15 +30,41 @@ public class A11yOrderPackage implements ReactPackage {
     viewManagers.add(new A11yIndexViewManager());
     viewManagers.add(new A11yOrderViewManager());
     viewManagers.add(new A11yGroupViewManager());
-    viewManagers.add(new A11yContainerViewManager());
+    viewManagers.add(new A11yUIContainerViewManager());
     viewManagers.add(new A11yPaneTitleManager());
     viewManagers.add(new A11yViewManager());
+    viewManagers.add(new A11yLockViewManager());
 
     return viewManagers;
   }
 
   @Override
-  public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
-    return new ArrayList<>();
+  public NativeModule getModule(String name, ReactApplicationContext reactContext) {
+    if (name.equals(A11yAnnounceModule.NAME)) {
+      return new A11yAnnounceModule(reactContext);
+    } else {
+      return null;
+    }
+  }
+
+  @Override
+  public ReactModuleInfoProvider getReactModuleInfoProvider() {
+    return new ReactModuleInfoProvider() {
+      @Override
+      public Map<String, ReactModuleInfo> getReactModuleInfos() {
+        Map<String, ReactModuleInfo> map = new HashMap<>();
+        boolean isTurboModule = BuildConfig.IS_NEW_ARCHITECTURE_ENABLED;
+
+        map.put(A11yAnnounceModule.NAME, new ReactModuleInfo(
+          A11yAnnounceModule.NAME,       // name
+          A11yAnnounceModule.NAME,       // className
+          false, // canOverrideExistingModule
+          false, // needsEagerInit
+          false, // isCXXModule
+          isTurboModule   // isTurboModule
+        ));
+        return map;
+      }
+    };
   }
 }

package/android/src/main/java/com/a11yorder/core/A11yViewGroup.java

@@ -0,0 +1,73 @@
+package com.a11yorder.core;
+
+import android.content.Context;
+import android.view.View;
+
+import com.facebook.react.views.view.ReactViewGroup;
+
+import java.lang.ref.WeakReference;
+
+public class A11yViewGroup extends ReactViewGroup {
+  private WeakReference<View> childRef;
+
+  public A11yViewGroup(Context context) {
+    super(context);
+  }
+
+  protected void onChildAttached(View child) {}
+  protected void onChildRemoved() {}
+
+
+  protected View getSubChild() {
+    return childRef != null ? childRef.get() : null;
+  }
+
+  protected void onSubChildChange(View child) {
+    if (child != null) {
+      onChildAttached(child);
+    } else {
+      onChildRemoved();
+    }
+  }
+
+  private void setSubChild(View child) {
+    if (child != null) {
+      childRef = new WeakReference<>(child);
+    } else if (childRef != null) {
+      childRef.clear();
+      childRef = null;
+    }
+    onSubChildChange(child);
+  }
+
+  @Override
+  public void onViewAdded(View child) {
+    super.onViewAdded(child);
+    if (getSubChild() == null) {
+      setSubChild(child);
+    }
+  }
+
+  @Override
+  public void onViewRemoved(View child) {
+    super.onViewRemoved(child);
+    if (getSubChild() == child) {
+      setSubChild(null);
+    }
+  }
+
+  @Override
+  protected void onAttachedToWindow() {
+    super.onAttachedToWindow();
+
+    if (getSubChild() == null && getChildCount() > 0) {
+      setSubChild(getChildAt(0));
+    }
+  }
+
+  @Override
+  protected void onDetachedFromWindow() {
+    super.onDetachedFromWindow();
+    setSubChild(null);
+  }
+}

package/android/src/main/java/com/a11yorder/events/EventHelper.java

@@ -0,0 +1,42 @@
+package com.a11yorder.events;
+
+import com.facebook.react.bridge.ReactContext;
+import com.facebook.react.uimanager.UIManagerHelper;
+import com.facebook.react.uimanager.events.EventDispatcher;
+import com.facebook.react.uimanager.events.Event;
+
+import java.util.HashMap;
+import java.util.Map;
+
+public class EventHelper {
+  private static <T extends Event<T>> void dispatchEventIfPossible(ReactContext context, int id, T event) {
+    EventDispatcher eventDispatcher = UIManagerHelper.getEventDispatcherForReactTag(context, id);
+    if (eventDispatcher != null) {
+      eventDispatcher.dispatchEvent(event);
+    }
+  }
+
+  public static void screenReaderFocusChanged(ReactContext context, int id, boolean hasFocus) {
+    int surfaceId = UIManagerHelper.getSurfaceId(context);
+    ScreenReaderFocusChangedEvent event = new ScreenReaderFocusChangedEvent(surfaceId, id, hasFocus);
+    dispatchEventIfPossible(context, id, event);
+  }
+
+  public static void screenReaderFocused(ReactContext context, int id) {
+    int surfaceId = UIManagerHelper.getSurfaceId(context);
+    ScreenReaderFocusedEvent event = new ScreenReaderFocusedEvent(surfaceId, id);
+    dispatchEventIfPossible(context, id, event);
+  }
+
+  public static void screenReaderDescendantFocusChanged(ReactContext context, int id, String status, String nativeId) {
+    int surfaceId = UIManagerHelper.getSurfaceId(context);
+    ScreenReaderDescendantFocusChangedEvent event = new ScreenReaderDescendantFocusChangedEvent(surfaceId, id, status, nativeId);
+    dispatchEventIfPossible(context, id, event);
+  }
+
+  public static Map<String, Object> buildDirectEventMap(String registrationName) {
+    Map<String, Object> eventMap = new HashMap<>();
+    eventMap.put("registrationName", registrationName);
+    return eventMap;
+  }
+}

package/android/src/main/java/com/a11yorder/events/ScreenReaderDescendantFocusChangedEvent.java

@@ -0,0 +1,32 @@
+package com.a11yorder.events;
+
+import com.facebook.react.bridge.Arguments;
+import com.facebook.react.bridge.WritableMap;
+import com.facebook.react.uimanager.events.Event;
+
+public class ScreenReaderDescendantFocusChangedEvent extends Event<ScreenReaderDescendantFocusChangedEvent> {
+  public static String EVENT_NAME = "topScreenReaderDescendantFocusChanged";
+  public WritableMap payload;
+
+
+  public ScreenReaderDescendantFocusChangedEvent(int surfaceId, int id, String status, String nativeId) {
+    super(surfaceId, id);
+    payload = Arguments.createMap();
+    payload.putString("status", status);
+    payload.putString("nativeId", nativeId);
+  }
+
+  public boolean canCoalesce() {
+    return false;
+  }
+
+  @Override
+  public String getEventName() {
+    return EVENT_NAME;
+  }
+
+  @Override
+  public WritableMap getEventData() {
+    return payload;
+  }
+}

package/android/src/main/java/com/a11yorder/events/ScreenReaderFocusChangedEvent.java

@@ -0,0 +1,26 @@
+package com.a11yorder.events;
+
+import com.facebook.react.bridge.Arguments;
+import com.facebook.react.bridge.WritableMap;
+import com.facebook.react.uimanager.events.Event;
+
+public class ScreenReaderFocusChangedEvent extends Event<ScreenReaderFocusChangedEvent> {
+  public static String EVENT_NAME = "topScreenReaderFocusChange";
+  public WritableMap payload;
+
+  public ScreenReaderFocusChangedEvent(int surfaceId, int id, Boolean hasFocus) {
+    super(surfaceId, id);
+    payload = Arguments.createMap();
+    payload.putBoolean("isFocused", hasFocus);
+  }
+
+  @Override
+  public String getEventName() {
+    return EVENT_NAME;
+  }
+
+  @Override
+  public WritableMap getEventData() {
+    return payload;
+  }
+}

package/android/src/main/java/com/a11yorder/events/ScreenReaderFocusedEvent.java

@@ -0,0 +1,23 @@
+package com.a11yorder.events;
+
+import com.facebook.react.bridge.WritableMap;
+import com.facebook.react.uimanager.events.Event;
+
+public class ScreenReaderFocusedEvent extends Event<ScreenReaderFocusedEvent> {
+  public static String EVENT_NAME = "topScreenReaderFocused";
+  public WritableMap payload;
+
+  public ScreenReaderFocusedEvent(int surfaceId, int id) {
+    super(surfaceId, id);
+  }
+
+  @Override
+  public String getEventName() {
+    return EVENT_NAME;
+  }
+
+  @Override
+  public WritableMap getEventData() {
+    return payload;
+  }
+}