adding iOS support for accessibilityLiveRegion #35432

fabOnReact · 2022-11-22T17:04:13Z

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 (#34735 (comment)).
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 #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

#35432 (comment)
#35432 (comment)
#35432 (comment)
#35432 (comment)
#35432 (comment)

Read documentation, investigate different solutions, plan work (details) -- Test existing react-native accessibilityLiveRegion functionality on Android Paper (details)Include Video recording of different scenarios (assertive, polite, none)Write down expected behaviour for iOS Implementation Design (details) Detect accessibility content change (details) Read documentation, investigate different solutions, plan work ([details](facebook#34735 (comment))) "Test existing react-native accessibilityLiveRegion functionality on Android Paper ([details](facebook#34735 (comment))) Include Video recording of different scenarios (assertive, polite, none) Write down expected behaviour for iOS" Implementation Design ([details](facebook#34735 (comment))) Detect accessibility content change ([details](facebook#34735 (comment)))

analysis-bot · 2022-11-22T17:28:27Z

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: 46ffeca
Branch: main

analysis-bot · 2022-11-22T17:58:03Z

Platform	Engine	Arch	Size (bytes)	Diff
ios	-	universal	n/a	--

Base commit: 46ffeca
Branch: main

pull-bot · 2022-11-22T18:12:29Z

PR build artifact for 972a40a 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.

Add prop accessibilityLiveRegion to react-native iOS API Trigger polite/assertive announcement if label/hint changesdd prop accessibilityLiveRegion to react-native iOS API

pull-bot · 2022-11-22T19:25:34Z

PR build artifact for 53f7b76 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.

pull-bot · 2022-11-22T19:29:05Z

PR build artifact for 53f7b76 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.

pull-bot · 2022-11-24T17:51:38Z

PR build artifact for 85b1c1f 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.

pull-bot · 2022-11-24T17:54:00Z

PR build artifact for 85b1c1f 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.

…bilityLiveRegion to children on iOS. If a view with accessibilityLiveRegion does not have accessibilityLabel, the view announces the child text component. - check if the view does not have accessibilityLabel - Run a loop on each children and add accessibilityLiveRegion if children is focusable https://stackoverflow.com/questions/32370994/how-to-pass-props-to-this-props-children

pull-bot · 2022-11-24T19:03:33Z

PR build artifact for 17af1f8 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.

pull-bot · 2022-11-24T19:07:42Z

PR build artifact for 17af1f8 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.

…assertive Read Implementation RCTParagraphComponentViewUnderstand logic behind announcement of the accessibilityLabel -- Add announcement for Accessibility State. RCTViewComponent updateProps will save the accessibilityState in self.accessibilityTraits. Use self.accessibilityTraits to announce the change in value from updatePropsRead iOS ImplementationTest the announcement of self.accessibilityTraits with UIAccessibilityPostNotification Read accessibilityValue logic in RCTComponentView Chain Label + Hint + State to avoid cutting announcements when using assertiveCreate a local variables named label, hint, state, roleVerify order used on iOS to announce Label, Hint, State (selected my label Button my hint) => state label role hintAdd Label, Hint and State to accessibilityLiveRegionAnnouncement respecting correct orderTrigger announcement if accessibilityLiveRegionAnnouncement is not empty "Read Implementation RCTParagraphComponentView Understand logic behind announcement of the accessibilityLabel" "Add announcement for Accessibility State. RCTViewComponent updateProps will save the accessibilityState in self.accessibilityTraits. Use self.accessibilityTraits to announce the change in value from updateProps Read iOS Implementation Test the announcement of self.accessibilityTraits with [UIAccessibilityPostNotification](https://github.com/fabriziobertoglio1987/react-native/blob/17af1f8489e202a65c1e20c440756db2be95a8b4/React/Fabric/Mounting/ComponentViews/View/RCTViewComponentView.mm#L305)" Read [accessibilityValue logic](https://github.com/fabriziobertoglio1987/react-native/blob/17af1f8489e202a65c1e20c440756db2be95a8b4/React/Fabric/Mounting/ComponentViews/View/RCTViewComponentView.mm#L365) in RCTComponentView "Chain Label + Hint + State to avoid cutting announcements when using assertive Create a local variables named label, hint, state, role Verify order used on iOS to announce Label, Hint, State (selected my label Button my hint) => state label role hint Add Label, Hint and State to accessibilityLiveRegionAnnouncement respecting correct order Trigger announcement if accessibilityLiveRegionAnnouncement is not empty "

pull-bot · 2022-11-25T18:32:48Z

PR build artifact for 119892c 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.

pull-bot · 2022-11-25T18:42:39Z

PR build artifact for 119892c 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.

… value

pull-bot · 2022-11-25T22:21:55Z

PR build artifact for 744408a 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.

pull-bot · 2022-11-25T22:23:35Z

PR build artifact for 744408a 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.

fabOnReact · 2022-12-12T20:08:56Z

P	type	task
6	bug	Use correct default in useContext (link)
7	bug	move accLiveRegion prop to separate variable while keeping compatability with web props
8	bug	Nested text does not support accessibilityLiveRegion on iOS and Android (link)

P type task
6 bug Use correct default in useContext (link)
7 bug move accLiveRegion prop to separate variable while keeping compatability with web props
8 bug Nested text does not support accessibilityLiveRegion on iOS and Android (link)

fabOnReact · 2022-12-12T20:56:42Z

fixing issue with Android TextInput not passing accLiveRegion prop

2022-12-12.21-50-12.mp4

facebook#35432 (comment)

fabOnReact · 2022-12-12T21:03:40Z

Android - correctly announcing change of ariaLive in Text component

2022-12-12.22-02-30.mp4

facebook#35432 (comment)

https://github.com/facebook/react-native/pull/35432/files#r1046127235

pull-bot · 2022-12-12T22:28:36Z

PR build artifact for 88cbc2c 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.

pull-bot · 2022-12-12T22:28:52Z

PR build artifact for 88cbc2c 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.

facebook#35432 (comment)

fabOnReact · 2022-12-13T12:34:59Z

https://app.circleci.com/pipelines/github/facebook/react-native/18392/workflows/498185fe-7241-47d5-a5b7-6fb22b4010a9/jobs/391153/steps

P	type	task
9	review	Review diff
10	review	Review Circle CI
11	review	Avoid re-implementating RCTIsReactRootView
12	review	check warning messages from linter. Enable linting tool and go through file changes

pull-bot · 2022-12-13T13:51:22Z

PR build artifact for 133f440 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.

pull-bot · 2022-12-13T13:51:37Z

PR build artifact for 133f440 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.

pull-bot · 2022-12-14T14:32:34Z

PR build artifact for 59a23ba 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.

pull-bot · 2022-12-14T14:33:56Z

PR build artifact for 59a23ba 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.

alextait1 · 2022-12-14T18:17:15Z

Just adding a comment here regarding documentation. I think it would be really valuable to add a warning comment to the docs for both Android and iOS cautioning people to reach for polite over assertive in most cases. Marketers can be prone to abusing assertive live regions on the web and in 90%+ of cases (IMO) polite is the better user experience. cc @blavalla

facebook-github-bot · 2023-01-19T19:54:38Z

@lunaleaps has imported this pull request. If you are a Meta employee, you can view this diff on Phabricator.

github-actions · 2023-07-21T05:13:10Z

This PR is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 7 days.

github-actions · 2023-07-28T05:23:12Z

This PR was closed because it has been stalled for 7 days with no activity.

facebook-github-bot added the CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed. label Nov 22, 2022

Trigger polite/assertive announcement with hint/label

53f7b76

Add prop accessibilityLiveRegion to react-native iOS API Trigger polite/assertive announcement if label/hint changesdd prop accessibilityLiveRegion to react-native iOS API

fabOnReact mentioned this pull request Nov 22, 2022

Android/iOS Accessible Live Regions #34735

Closed

react-native-bot added Platform: iOS iOS applications. Type: Enhancement A new feature or enhancement of an existing feature. labels Nov 22, 2022

draft - accessibilityLiveRegion automatic content grouping announcement

85b1c1f

fabOnReact added 2 commits November 24, 2022 19:27

adding comments for future review

17af1f8

fabOnReact added 4 commits November 25, 2022 21:14

Add accessibilityValue to announcement

788f811

draft solution - announce change to Text attributedString

ed4c0a1

not working - moving logic to attributedString will announce previous…

92119b8

… value

remove changes from View

744408a

fabOnReact changed the title ~~🚧 Draft solution for iOS accessibilityLiveRegion 🚧~~ adding iOS support for accessibilityLiveRegion Nov 28, 2022

fabOnReact added 2 commits November 28, 2022 11:13

draft commit to be reverted

a296e86

Merge branch 'main' into accessibility-live-region-ios

a60b07f

pass aria-label from parent to child view

0940a54

fixing issue with Android TextInput not passing accLiveRegion prop

a5da98d

facebook#35432 (comment)

fabOnReact added 2 commits December 12, 2022 22:07

update snapshot

1ae6a08

facebook#35432 (comment)

not required anymore to fix issue with Text iOS not announcing dimmed

88cbc2c

https://github.com/facebook/react-native/pull/35432/files#r1046127235

circleci eslint warnings

868f598

facebook#35432 (comment)

remove change to AnimatedValue

133f440

update example

134b13b

fabOnReact marked this pull request as ready for review December 14, 2022 13:55

minor changes

59a23ba

fabOnReact added a commit to fabOnReact/react-native that referenced this pull request Dec 14, 2022

improve iOS solution based on facebook#35432

7dc0108

fabOnReact mentioned this pull request Dec 16, 2022

[a11y] Accessibility for nested text components #32004

Open

fabOnReact added the Accessibility label Jan 9, 2023

github-actions bot added the Stale There has been a lack of activity on this issue and it may be closed soon. label Jul 21, 2023

github-actions bot closed this Jul 28, 2023

LeandraH mentioned this pull request Nov 25, 2024

2352: Announce number of search results to a screen reader digitalfabrik/integreat-app#3006

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

adding iOS support for accessibilityLiveRegion #35432

adding iOS support for accessibilityLiveRegion #35432

fabOnReact commented Nov 22, 2022 •

edited

Loading

analysis-bot commented Nov 22, 2022 •

edited

Loading

analysis-bot commented Nov 22, 2022 •

edited

Loading

pull-bot commented Nov 22, 2022

pull-bot commented Nov 22, 2022

pull-bot commented Nov 22, 2022

pull-bot commented Nov 24, 2022

pull-bot commented Nov 24, 2022

pull-bot commented Nov 24, 2022

pull-bot commented Nov 24, 2022

pull-bot commented Nov 25, 2022

pull-bot commented Nov 25, 2022

pull-bot commented Nov 25, 2022

pull-bot commented Nov 25, 2022

fabOnReact commented Dec 12, 2022

fabOnReact commented Dec 12, 2022

fabOnReact commented Dec 12, 2022

pull-bot commented Dec 12, 2022

pull-bot commented Dec 12, 2022

fabOnReact commented Dec 13, 2022

pull-bot commented Dec 13, 2022

pull-bot commented Dec 13, 2022

pull-bot commented Dec 14, 2022

pull-bot commented Dec 14, 2022

alextait1 commented Dec 14, 2022

facebook-github-bot commented Jan 19, 2023

github-actions bot commented Jul 21, 2023

github-actions bot commented Jul 28, 2023

adding iOS support for accessibilityLiveRegion #35432

adding iOS support for accessibilityLiveRegion #35432

Conversation

fabOnReact commented Nov 22, 2022 • edited Loading

Summary

RCTViewComponentView

RCTParagraphComponentView

Adding dynamic VoiceOver announcement to iOS RCTViewComponent

RCTParagraphComponent dynamic VoiceOver announcements

Other notes

Changelog

Test Plan

analysis-bot commented Nov 22, 2022 • edited Loading

analysis-bot commented Nov 22, 2022 • edited Loading

pull-bot commented Nov 22, 2022

pull-bot commented Nov 22, 2022

pull-bot commented Nov 22, 2022

pull-bot commented Nov 24, 2022

pull-bot commented Nov 24, 2022

pull-bot commented Nov 24, 2022

pull-bot commented Nov 24, 2022

pull-bot commented Nov 25, 2022

pull-bot commented Nov 25, 2022

pull-bot commented Nov 25, 2022

pull-bot commented Nov 25, 2022

fabOnReact commented Dec 12, 2022

fabOnReact commented Dec 12, 2022

fabOnReact commented Dec 12, 2022

pull-bot commented Dec 12, 2022

pull-bot commented Dec 12, 2022

fabOnReact commented Dec 13, 2022

pull-bot commented Dec 13, 2022

pull-bot commented Dec 13, 2022

pull-bot commented Dec 14, 2022

pull-bot commented Dec 14, 2022

alextait1 commented Dec 14, 2022

facebook-github-bot commented Jan 19, 2023

github-actions bot commented Jul 21, 2023

github-actions bot commented Jul 28, 2023

fabOnReact commented Nov 22, 2022 •

edited

Loading

analysis-bot commented Nov 22, 2022 •

edited

Loading

analysis-bot commented Nov 22, 2022 •

edited

Loading