Closed
Description
Description
The Text component does not read out the accessibilityRole
for some types when using VoiceOver on iOS. I noticed it specifically for alert
and there is an older issue here (#31315) that mentions the same for radiogroup
.
Version
0.67.2
Output of npx react-native info
warn Package @remote-ui/core has been ignored because it contains invalid configuration. Reason: Package subpath './package.json' is not defined by "exports" in /Users/gsmandur/src/github.com/Shopify/pos-next-react-native/node_modules/@remote-ui/core/package.json
warn Package @shopify/react-hooks has been ignored because it contains invalid configuration. Reason: Package subpath './package.json' is not defined by "exports" in /Users/gsmandur/src/github.com/Shopify/pos-next-react-native/node_modules/@shopify/react-hooks/package.json
warn Package link-preview-js has been ignored because it contains invalid configuration. Reason: Package subpath './package.json' is not defined by "exports" in /Users/gsmandur/src/github.com/Shopify/pos-next-react-native/node_modules/link-preview-js/package.json
warn Package @shopify/graphql-testing has been ignored because it contains invalid configuration. Reason: Package subpath './package.json' is not defined by "exports" in /Users/gsmandur/src/github.com/Shopify/pos-next-react-native/node_modules/@shopify/graphql-testing/package.json
warn Package graphql-fixtures has been ignored because it contains invalid configuration. Reason: Package subpath './package.json' is not defined by "exports" in /Users/gsmandur/src/github.com/Shopify/pos-next-react-native/node_modules/graphql-fixtures/package.json
info Fetching system and libraries information...
(node:32617) [DEP0148] DeprecationWarning: Use of deprecated folder mapping "./" in the "exports" field module resolution of the package at /Users/gsmandur/src/github.com/Shopify/pos-next-react-native/node_modules/@remote-ui/react/package.json.
Update this package.json to use a subpath pattern like "./*".
(Use `node --trace-deprecation ...` to show where the warning was created)
(node:32617) [DEP0148] DeprecationWarning: Use of deprecated folder mapping "./" in the "exports" field module resolution of the package at /Users/gsmandur/src/github.com/Shopify/pos-next-react-native/node_modules/@remote-ui/web-workers/package.json.
Update this package.json to use a subpath pattern like "./*".
(node:32617) [DEP0148] DeprecationWarning: Use of deprecated folder mapping "./" in the "exports" field module resolution of the package at /Users/gsmandur/src/github.com/Shopify/pos-next-react-native/node_modules/@shopify/admin-graphql-api-utilities/package.json.
Update this package.json to use a subpath pattern like "./*".
(node:32617) [DEP0148] DeprecationWarning: Use of deprecated folder mapping "./" in the "exports" field module resolution of the package at /Users/gsmandur/src/github.com/Shopify/pos-next-react-native/node_modules/@shopify/react-compose/package.json.
Update this package.json to use a subpath pattern like "./*".
(node:32617) [DEP0148] DeprecationWarning: Use of deprecated folder mapping "./" in the "exports" field module resolution of the package at /Users/gsmandur/src/github.com/Shopify/pos-next-react-native/node_modules/@shopify/react-i18n/package.json.
Update this package.json to use a subpath pattern like "./*".
(node:32617) [DEP0148] DeprecationWarning: Use of deprecated folder mapping "./" in the "exports" field module resolution of the package at /Users/gsmandur/src/github.com/Shopify/pos-next-react-native/node_modules/form-urlencoded/package.json.
Update this package.json to use a subpath pattern like "./*".
(node:32617) [DEP0148] DeprecationWarning: Use of deprecated folder mapping "./" in the "exports" field module resolution of the package at /Users/gsmandur/src/github.com/Shopify/pos-next-react-native/node_modules/tslib/package.json.
Update this package.json to use a subpath pattern like "./*".
(node:32617) [DEP0148] DeprecationWarning: Use of deprecated folder mapping "./" in the "exports" field module resolution of the package at /Users/gsmandur/src/github.com/Shopify/pos-next-react-native/node_modules/@quilted/react-testing/package.json.
Update this package.json to use a subpath pattern like "./*".
System:
OS: macOS 12.5.1
CPU: (8) arm64 Apple M1 Pro
Memory: 111.16 MB / 16.00 GB
Shell: 5.8.1 - /bin/zsh
Binaries:
Node: 16.13.0 - ~/.nvm/versions/node/v16.13.0/bin/node
Yarn: 1.13.0 - ~/.dev/yarn/1.13.0/bin/yarn
npm: 8.1.0 - ~/.nvm/versions/node/v16.13.0/bin/npm
Watchman: 2022.05.16.00 - /opt/homebrew/bin/watchman
Managers:
CocoaPods: 1.11.2 - /Users/gsmandur/.gem/ruby/2.7.5/bin/pod
SDKs:
iOS SDK:
Platforms: DriverKit 21.4, iOS 15.5, macOS 12.3, tvOS 15.4, watchOS 8.5
Android SDK:
API Levels: 29, 30, 31
Build Tools: 29.0.2, 30.0.2, 32.0.0
System Images: android-29 | Google APIs ARM 64 v8a, android-32 | Google APIs ARM 64 v8a
Android NDK: Not Found
IDEs:
Android Studio: 2021.1 AI-211.7628.21.2111.8139111
Xcode: 13.4.1/13F100 - /usr/bin/xcodebuild
Languages:
Java: 11.0.11 - /Applications/Android Studio.app/Contents/jre/Contents/Home/bin/javac
npmPackages:
@react-native-community/cli: Not Found
react: 17.0.2 => 17.0.2
react-native: 0.67.2 => 0.67.2
react-native-macos: Not Found
npmGlobalPackages:
*react-native*: Not Found
Steps to reproduce
- First add
accessibilityRole="alert"
to a text component. - Enable the VoiceOver accessibility feature on iOS.
- Select the Text component
the screen reader will not say "alert" like it is suppose to.
Snack, code example, screenshot, or link to a repository
Code to reproduce:
<Text accessible accessibilityRole="alert">
Hello World
</Text>
The workaround for now is to wrap it in a View
<View accessible accessibilityRole="alert">
<Text>
Hello World
</Text>
</View>