react / react/react-native

iOS Accessibility Value Out of Sync

Open
#35,774 15 comments 10 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Needs: Triage :mag: Platform: iOS
Dominant language
C++
Stars
127k
Forks
25.3k
Avg merge
1d 23h
Merged PRs (30d)
4

Description

Description

On iOS it seems that after an accessibility action is triggered the value of accessibility value is read an arbitrary amount of time later. This can lead to VoiceOver reading the previous value again rather than the new value.

This means that sometimes the value will be read correctly, depending on how quickly react native renders the updated accessibility action.

However in my moderately complex RN project I was unable to reliably get everything rendering quickly enough. Even when Flipper said the component in question was rendering in a few ms the bug would still sometimes occur (about 1 in 20 actions).

Note: On Android, TalkBack waits any length of time before reading the updated value. Even an artificial of delay of 500ms will still be read correctly.

Version

0.68.5

Output of npx react-native info

System:
OS: macOS 12.6
CPU: (16) x64 Intel(R) Core(TM) i9-9980HK CPU @ 2.40GHz
Memory: 37.62 MB / 32.00 GB
Shell: 5.8.1 - /bin/zsh
Binaries:
Node: 18.12.1 - ~/.nvm/versions/node/v18.12.1/bin/node
Yarn: 1.22.10 - /usr/local/bin/yarn
npm: 8.19.2 - ~/.nvm/versions/node/v18.12.1/bin/npm
Watchman: 2022.06.06.00 - /usr/local/bin/watchman
Managers:
CocoaPods: 1.11.3 - /usr/local/bin/pod
SDKs:
iOS SDK:
Platforms: DriverKit 22.2, iOS 16.2, macOS 13.1, tvOS 16.1, watchOS 9.1
Android SDK:
API Levels: 30, 31
Build Tools: 30.0.2, 31.0.0, 33.0.1
System Images: android-24 | Google APIs Intel x86 Atom, android-30 | Google APIs Intel x86 Atom, android-30 | Google Play Intel x86 Atom, android-31 | Google APIs Intel x86 Atom_64, android-31 | Google Play Intel x86 Atom_64
Android NDK: Not Found
IDEs:
Android Studio: 2021.3 AI-213.7172.25.2113.9123335
Xcode: 14.2/14C18 - /usr/bin/xcodebuild
Languages:
Java: 18.0.1 - /usr/bin/javac
npmPackages:
@react-native-community/cli: Not Found
react: 17.0.2 => 17.0.2
react-native: 0.68.5 => 0.68.5
react-native-macos: Not Found
npmGlobalPackages:
react-native: Not Found

Steps to reproduce

Accessible components with the following properties:

  • accessibleRole="adjustable"
  • accessibilityActions for increment and decrement
  • accessibilityValue with text property set

In an app where the component is not guaranteed to render quickly enough.

Running with VoiceOver on iOS (Reading speed didn't seem to change the issue)

Snack, code example, screenshot, or link to a repository

https://snack.expo.dev/@scarlin/ios-accessibility-value-bug-demo

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by running the linked Snack reproduction with VoiceOver and focus on adjustable components using accessibilityActions and an accessibilityValue text property. Trace how React Native handles the iOS accessibility action and subsequent value update; done means VoiceOver reliably reads the updated value after increment and decrement actions.

Written by the indexing model from the issue text.

Assessment

Tech stack
react-native
Domain
accessibility, mobile-dev
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.