facebook
adding iOS support for accessibilityLiveRegion
Summary
The functionality is included in two components:
- RCTViewComponentView
- RCTParagraphComponentView
RCTViewComponentView
RCTViewComponentView is the Fabric API built on top of iOS UIView. The class will compare the old and new props sent from React fabric renderer and save the values as instance variables like accessibilityLabel, and accessibilityValue on the native iOS components. Once the update process is completed, the VoiceOver announcement is triggered in finalizeUpdates which is responsible for updating the iOS native User Interface with the new props sent from the react fabric renderer (see RCTMountingManager and react-reconciler).
RCTParagraphComponentView
The native iOS component for Text is RCTParagraphComponentView. This component's peculiarity is that it overrides the accessibilityLabel of the parent View component with its text value (https://github.com/facebook/react-native/issues/34735#issuecomment-1327868221). ReactNative supports nested Text components represented on iOS as an array of accessibility elements. Updating the accessibility elements attributedText triggers a VoiceOver announcement if accessibilityLiveRegion is enabled.
VoiceOver announces changes in the accessibility attributes of children.
Adding dynamic VoiceOver announcement to iOS RCTViewComponent
The functionality adds VoiceOver dynamic announcements for changes in accessibilityLabel, hint, state, or other attributes of components with the accessibilityLiveRegion prop. Announcements of components with accessibilityLiveRegion polite are queued using UIAccessibilitySpeechAttributeQueueAnnouncement.
RCTParagraphComponent dynamic VoiceOver announcements
The react-native Text Component updates the native iOS attributedText with a special prop named children. The text creation and update are triggered from the Fabric renderer with the methods createTextInstance and updateHostText. updateState invalidates the iOS UIView with setNeedsDisplay. The UIView component retrieves and displays the updated attributedString from the new _state (more code pointers here).
A manual VoiceOver announcement is triggered after the state change to announce the updated Paragraph attributedText.
Other notes
fixes https://github.com/facebook/react-native/issues/34735. The below functionalities are moved to a separate PR:
Changelog
[iOS] [Added] - adding iOS support for accessibilityLiveRegion
Test Plan
- accessibilityLiveRegion polite => announces after other announcements (queued)
- accessibilityLiveRegion assertive => interrupts announcements
https://github.com/facebook/react-native/pull/35432#issuecomment-1335884181 https://github.com/facebook/react-native/pull/35432#issuecomment-1335887071 https://github.com/facebook/react-native/pull/35432#issuecomment-1334331158 https://github.com/facebook/react-native/pull/35432#issuecomment-1334373327 https://github.com/facebook/react-native/pull/35432#issuecomment-1346828155
| Platform | Engine | Arch | Size (bytes) | Diff |
|---|---|---|---|---|
| android | hermes | arm64-v8a | 7,110,765 | -1,354,102 |
| android | hermes | armeabi-v7a | 6,479,568 | -1,304,914 |
| android | hermes | x86 | 7,529,618 | -1,409,657 |
| android | hermes | x86_64 | 7,387,987 | -1,409,376 |
| android | jsc | arm64-v8a | 8,976,897 | -680,629 |
| android | jsc | armeabi-v7a | 7,708,370 | -682,024 |
| android | jsc | x86 | 9,039,894 | -681,347 |
| android | jsc | x86_64 | 9,517,276 | -681,486 |
Base commit: 46ffeca3b00cfab1c6d27fd1e754b02406cf288c Branch: main
| Platform | Engine | Arch | Size (bytes) | Diff |
|---|---|---|---|---|
| ios | - | universal | n/a | -- |
Base commit: 46ffeca3b00cfab1c6d27fd1e754b02406cf288c Branch: main
PR build artifact for 972a40a74c02c1f3909033e6cd37f682ce93c1ff is ready.
To use, download tarball from "Artifacts" tab in this CircleCI job then run yarn add <path to tarball> in your React Native project.
PR build artifact for 53f7b76ca885d7a50af17b34b87161e1f72b5ee2 is ready.
To use, download tarball from "Artifacts" tab in this CircleCI job then run yarn add <path to tarball> in your React Native project.
PR build artifact for 53f7b76ca885d7a50af17b34b87161e1f72b5ee2 is ready.
To use, download tarball from "Artifacts" tab in this CircleCI job then run yarn add <path to tarball> in your React Native project.
PR build artifact for 85b1c1f2d85420fcd3b77c2be260dc3e7d309ca3 is ready.
To use, download tarball from "Artifacts" tab in this CircleCI job then run yarn add <path to tarball> in your React Native project.
PR build artifact for 85b1c1f2d85420fcd3b77c2be260dc3e7d309ca3 is ready.
To use, download tarball from "Artifacts" tab in this CircleCI job then run yarn add <path to tarball> in your React Native project.
PR build artifact for 17af1f8489e202a65c1e20c440756db2be95a8b4 is ready.
To use, download tarball from "Artifacts" tab in this CircleCI job then run yarn add <path to tarball> in your React Native project.
PR build artifact for 17af1f8489e202a65c1e20c440756db2be95a8b4 is ready.
To use, download tarball from "Artifacts" tab in this CircleCI job then run yarn add <path to tarball> in your React Native project.
PR build artifact for 119892c46afb5456d8c374a73c2e0343ab91e979 is ready.
To use, download tarball from "Artifacts" tab in this CircleCI job then run yarn add <path to tarball> in your React Native project.
PR build artifact for 119892c46afb5456d8c374a73c2e0343ab91e979 is ready.
To use, download tarball from "Artifacts" tab in this CircleCI job then run yarn add <path to tarball> in your React Native project.
PR build artifact for 744408a9fa134578673ce82dd91aead6ad33fda3 is ready.
To use, download tarball from "Artifacts" tab in this CircleCI job then run yarn add <path to tarball> in your React Native project.
PR build artifact for 744408a9fa134578673ce82dd91aead6ad33fda3 is ready.
To use, download tarball from "Artifacts" tab in this CircleCI job then run yarn add <path to tarball> in your React Native project.
PR build artifact for a7cc3f9fe7920060a400b9d1ddbef0e1be4011ca is ready.
To use, download tarball from "Artifacts" tab in this CircleCI job then run yarn add <path to tarball> in your React Native project.
PR build artifact for a7cc3f9fe7920060a400b9d1ddbef0e1be4011ca is ready.
To use, download tarball from "Artifacts" tab in this CircleCI job then run yarn add <path to tarball> in your React Native project.
https://github.com/fabriziobertoglio1987/react-native/blob/a7cc3f9fe7920060a400b9d1ddbef0e1be4011ca/ReactCommon/react/renderer/textlayoutmanager/platform/ios/RCTAttributedTextUtils.mm#L462-L464
The functionality works with https://github.com/fabriziobertoglio1987/react-native/commit/ed4c0a1c83b57e4e147ab2835a7648f10b469412
PR build artifact for 8b3390c2d8cf8027d547d5c5c22f63691437e83b is ready.
To use, download tarball from "Artifacts" tab in this CircleCI job then run yarn add <path to tarball> in your React Native project.
PR build artifact for 8b3390c2d8cf8027d547d5c5c22f63691437e83b is ready.
To use, download tarball from "Artifacts" tab in this CircleCI job then run yarn add <path to tarball> in your React Native project.
https://github.com/fabriziobertoglio1987/react-native/pull/5 is an alternative (draft) solution. PR #5 is still a work in progress, but I'll be happy to further work on it.
PR build artifact for e1478fe6400f9bf5aab3766f41a767d2d5c51c51 is ready.
To use, download tarball from "Artifacts" tab in this CircleCI job then run yarn add <path to tarball> in your React Native project.
PR build artifact for e1478fe6400f9bf5aab3766f41a767d2d5c51c51 is ready.
To use, download tarball from "Artifacts" tab in this CircleCI job then run yarn add <path to tarball> in your React Native project.
PR build artifact for f609df6d0d68b5cf3eb903676d8868bc71b1f8c6 is ready.
To use, download tarball from "Artifacts" tab in this CircleCI job then run yarn add <path to tarball> in your React Native project.
PR build artifact for f609df6d0d68b5cf3eb903676d8868bc71b1f8c6 is ready.
To use, download tarball from "Artifacts" tab in this CircleCI job then run yarn add <path to tarball> in your React Native project.
iOS - testing count change Text component with accessibilityLiveRegion
https://user-images.githubusercontent.com/24992535/205147995-7eecc9e0-dc22-426a-ae5f-48173cefa1fd.mp4
iOS - View changes state/hint
https://user-images.githubusercontent.com/24992535/205149406-f2d9d85b-78c4-4cfa-84fd-8fa2c6c5ea18.mp4
PR build artifact for d2039eb06c04b91fe5bcebb4166aa23a8a3fe8aa is ready.
To use, download tarball from "Artifacts" tab in this CircleCI job then run yarn add <path to tarball> in your React Native project.
PR build artifact for d2039eb06c04b91fe5bcebb4166aa23a8a3fe8aa is ready.
To use, download tarball from "Artifacts" tab in this CircleCI job then run yarn add <path to tarball> in your React Native project.
PR build artifact for ceb9557a672a061df861dc4f5faae95835394b69 is ready.
To use, download tarball from "Artifacts" tab in this CircleCI job then run yarn add <path to tarball> in your React Native project.
PR build artifact for ceb9557a672a061df861dc4f5faae95835394b69 is ready.
To use, download tarball from "Artifacts" tab in this CircleCI job then run yarn add <path to tarball> in your React Native project.