From 12894047a17f317379e56ff1dbad5005a039b347 Mon Sep 17 00:00:00 2001 From: fabriziobertoglio1987 Date: Mon, 28 Nov 2022 21:25:20 +0100 Subject: [PATCH 01/10] adding sendAccessibilityEvent to AccNodeInfo --- docs/accessibilityinfo.md | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) diff --git a/docs/accessibilityinfo.md b/docs/accessibilityinfo.md index 39fe88bcf58..81cc76ba0ec 100644 --- a/docs/accessibilityinfo.md +++ b/docs/accessibilityinfo.md @@ -311,6 +311,22 @@ static removeEventListener(eventName, handler) > **Deprecated.** Use the `remove()` method on the event subscription returned by [`addEventListener()`](#addeventlistener). +### `sendAccessibilityEvent()` + +```jsx +static sendAccessibilityEvent(node, eventType) +``` + +Sometimes it is helpful to trigger an accessibility event on a UI component (i.e. when a custom view appears on a screen or set accessibility focus to a view). Native FabricUIManager module exposes a method `sendAccessibilityEvent` for this purpose. It takes two arguments: `node` and `eventType`. + +The node is a ref to a HostComponent retrieved using `forwardRef` (more info [here](https://reactnative.dev/docs/next/new-architecture-library-intro#migrating-findnodehandle--getting-a-hostcomponent)). + +The supported event types are `typeWindowStateChanged`, `typeViewFocused`, and `typeViewClicked`. +Android also supports `viewHoverEnter`. + +> **Notes**: Make sure that any `View` you want to receive the accessibility focus has `accessible={true}`. +> To avoid issues with TalkBack and Modal component, use `viewHoverEnter` (more info in issue [#30097](https://github.com/facebook/react-native/issues/30097#issuecomment-1285927266)). + --- ### `setAccessibilityFocus()` @@ -324,3 +340,4 @@ Set accessibility focus to a React component. On Android, this calls `UIManager.sendAccessibilityEvent` method with passed `reactTag` and `UIManager.AccessibilityEventTypes.typeViewFocused` arguments. > **Note**: Make sure that any `View` you want to receive the accessibility focus has `accessible={true}`. +> **Deprecated.** Use the [sendAccessibilityEvent](#sendAccessibilityEvent) on Fabric From 5a17f55e58a369dfaa37314e341f26e7ef07e4f4 Mon Sep 17 00:00:00 2001 From: fabriziobertoglio1987 Date: Mon, 28 Nov 2022 21:55:45 +0100 Subject: [PATCH 02/10] accessibility doc + example --- docs/accessibility.md | 36 +++++++++++++++++++++++++----------- 1 file changed, 25 insertions(+), 11 deletions(-) diff --git a/docs/accessibility.md b/docs/accessibility.md index 123020641e0..8e3d3092b97 100644 --- a/docs/accessibility.md +++ b/docs/accessibility.md @@ -441,19 +441,33 @@ The `AccessibilityInfo` API allows you to determine whether or not a screen read ## Sending Accessibility Events
Android
-Sometimes it is useful to trigger an accessibility event on a UI component (i.e. when a custom view appears on a screen or set accessibility focus to a view). Native UIManager module exposes a method ‘sendAccessibilityEvent’ for this purpose. It takes two arguments: view tag and a type of an event. The supported event types are `typeWindowStateChanged`, `typeViewFocused` and `typeViewClicked`. +Sometimes it is useful to trigger an accessibility event on a UI component (i.e. when a custom view appears on a screen or set accessibility focus to a view). Native FabricUIManager module exposes a method `sendAccessibilityEvent` for this purpose. It takes two arguments: `node` and `eventType`. +The supported event types are `typeWindowStateChanged`, `typeViewFocused`, and `typeViewClicked`. +Android also supports `viewHoverEnter`. ```jsx -import { - Platform, - UIManager, - findNodeHandle -} from 'react-native'; - -if (Platform.OS === 'android') { - UIManager.sendAccessibilityEvent( - findNodeHandle(this), - UIManager.AccessibilityEventTypes.typeViewFocused +const TitleComponent = React.forwardRef((props, forwardedRef) => { + return My custom text; +}); + +function HeaderComponent() { + let ref = React.useRef(null); + const changeFocus = () => { + if (ref != null && ref.current != null) { + AccessibilityInfo.sendAccessibilityEvent( + ref.current, + 'focus' + ); + } + }; + return ( + <> +