react-native
react-native copied to clipboard
facebook
Add TYPE_VIEW_HOVER_ENTER to AccessibilityNodeInfo sendAccessibilityEvent
Summary
- Adds
AccessibilityEvent.TYPE_VIEW_HOVER_ENTERto AccessibilityNodeInfo sendAccessibilityEvent - Adds an example implementation.
fixes https://github.com/facebook/react-native/issues/30860 fixes https://github.com/facebook/react-native/issues/30097 Related Documentation https://github.com/facebook/react-native-website/pull/3438
Changelog
[Android] [Added] - Add TYPE_VIEW_HOVER_ENTER to AccessibilityNodeInfo sendAccessibilityEvent
Test Plan
Android: https://github.com/facebook/react-native/pull/34969#issuecomment-1320225358 https://github.com/facebook/react-native/pull/34969#issuecomment-1329779921 iOS: https://github.com/facebook/react-native/pull/34969#issuecomment-1329780545 https://github.com/facebook/react-native/pull/34969#issuecomment-1330984202
| Platform | Engine | Arch | Size (bytes) | Diff |
|---|---|---|---|---|
| android | hermes | arm64-v8a | 8,451,984 | -927 |
| android | hermes | armeabi-v7a | 7,775,371 | -996 |
| android | hermes | x86 | 8,927,593 | -549 |
| android | hermes | x86_64 | 8,785,197 | -363 |
| android | jsc | arm64-v8a | 6,668,621 | -836 |
| android | jsc | armeabi-v7a | 7,462,581 | -882 |
| android | jsc | x86 | 9,192,744 | -457 |
| android | jsc | x86_64 | 6,893,751 | -244 |
Base commit: 753bccc47adc54e2b1b72997b296bce36bec276a Branch: main
TODOs
- [ ] Discuss if using the prop name title, accessibilityTitle or aria-title (link) https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes https://github.com/facebook/react-native/issues/34424
| Platform | Engine | Arch | Size (bytes) | Diff |
|---|---|---|---|---|
| ios | - | universal | n/a | -- |
Base commit: 8b00b4f2860de50e5cefa43735d32bf4bdb8518d Branch: main
I'm curious what impact (if any) this property should have on iOS. As far as I know, iOS doesn't have the concept of accessibility-specific titles in UIAlertController. They only have the option for a visible text title (which is announced on display). We could attempt to polyfill this behavior into iOS by making an announcement upon display of the modal, but this will be tricky as the modal will likely already be announcing something else (whatever gets focused), and I'm not sure it's worth the complexity.
Maybe we should simply have this prop be named "title" and set a visible title for both iOS and Android, rather than making this title for accessibility only to simplify things here.
As long as there is some way to give these dialogs a title for both platforms that is announced on display, I don't think it matters much if that title is only for accessibility services. It likely should be visible for all users anyways.
I'm curious what impact (if any) this property should have on iOS. As far as I know, iOS doesn't have the concept of accessibility-specific titles in UIAlertController. They only have the option for a visible text title (which is announced on display). We could attempt to polyfill this behavior into iOS by making an announcement upon display of the modal, but this will be tricky as the modal will likely already be announcing something else (whatever gets focused), and I'm not sure it's worth the complexity.
This is the result of my research.
The modal is implemented in Fabric with the RCTModalHostViewComponentView (UIView) and RCTFabricModalHostViewController (UIViewController)
https://github.com/fabriziobertoglio1987/react-native/tree/accbbfc01af57eda34374ce3b13e36b6e7c12a93/React/Fabric/Mounting/ComponentViews/Modal
as explained in this conversation, it is possible to set a title in the navigation bar, but react-native does not handle navigation which is managed with other libraries (an ex. in react-native-navigation or react navigation), so I would not follow those solutions.
Another solution I tested, was triggering the announcement after delay of X seconds:
dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(3 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
UIAccessibilityPostNotification(UIAccessibilityAnnouncementNotification, @"welcome to Italy!");
});
Video of the above delayed announcement https://drive.google.com/file/d/1MMXHFraj6q2LZTNqoORB69C8HZ2HtUzg/view?usp=sharing
announceForAccessibilityWithOptions queue would not work in this case as explained (StackOverflow explanation, detailed breakdown)
https://reactnative.dev/docs/accessibilityinfo#announceforaccessibilitywithoptions
The same issue affected PR #33468. The solution implemented in #33468 consisted of:
1) Trigger manually the announcement of the VoiceOver error message with method setAccessibilityErrorMessage
https://github.com/facebook/react-native/pull/33468/files#diff-533823c1cb870542c2480ff4fe6587e130dd05751339a8c6b7391d991a9c25feR134-R136
https://github.com/facebook/react-native/issues/30859#issuecomment-1165413245
2) Trigger manually the VoiceOver text announcement after text changes (setAttributedText)
https://github.com/facebook/react-native/pull/33468/files#diff-533823c1cb870542c2480ff4fe6587e130dd05751339a8c6b7391d991a9c25feR134-R136
https://github.com/facebook/react-native/issues/30859#issuecomment-1165413245
A queue mechanism could be built in the future to fix this issue (example includere here). The queue mechanism would repeat the announcement if interrupted.
Maybe we should simply have this prop be named "title" and set a visible title for both iOS and Android, rather than making this title for accessibility only to simplify things here. As long as there is some way to give these dialogs a title for both platforms that is announced on display, I don't think it matters much if that title is only for accessibility services. It likely should be visible for all users anyways.
Tomorrow I will try an alternative JavaScript approach in the Modal Component to implement the above requirement.
Thanks a lot for the feedback @blavalla.
PR build artifact for 5e1e72f6a036c9bd7f4a9d4eb54cd32ff9f92277 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 5e1e72f6a036c9bd7f4a9d4eb54cd32ff9f92277 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.
- [x] add documentation to rn-tester
- [x] implement sendAccessibilityEventWithDelay (issue #30097, logic in SurfaceMountingManager, relevant commit)
PR build artifact for 4213491e25f67377f3d6146273783ad84fb3144d 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 4213491e25f67377f3d6146273783ad84fb3144d 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 f89a01ff48d4c42d895797b3ee49b76f2957a857 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 9e7fe9f67ea123a715480c011a2da78aea636cf8 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 9e7fe9f67ea123a715480c011a2da78aea636cf8 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 3c0f53194ed6fe5c8874a6f92978d8805a17b403 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 3c0f53194ed6fe5c8874a6f92978d8805a17b403 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.
Android - Modal On Presentation with Accessibility Title
https://www.icloud.com/iclouddrive/019O2PciZhBLPJrxwZ9zwoXjA#modal_on_presentation_accessibility_title
remove sendAccessibilityEvent setTimeout as not required on iOS (video of the test)
iOS does not have issues with sendAccessibilityEvent (https://github.com/facebook/react-native/issues/30097#issuecomment-1285927266), for this reason setTimeout is not required
https://www.icloud.com/iclouddrive/00cgfwQLkaoFQHvxh-Dj89zUA#ios_modal_title
previous comment https://github.com/facebook/react-native/pull/34969#issuecomment-1282970302
@blavalla I moved all the changes to the rn-tester example ModalPresentation.
As explained in the comment https://github.com/facebook/react-native/pull/34969#issuecomment-1290660843, changes to the below react-native APIs could be added in my upcoming PRs:
TalkBack changes the focus previously set with sendAccessibilityEvent (Issue #30097). The possible solutions are:
- adding a method sendAccessibilityEventWithDelay
- A queue mechanism could be built in the future to fix this issue (example included here). The queue mechanism would repeat the announcement if interrupted (original comment).
- adding lifecycle callbacks similar to componentDidMount for modal, for example componentDidShow compatible with TalkBack/VoiceOver lifecycle (similar issue with onMomentumScrollEnd)
I remain available to make changes or improvements required. Thanks
PR build artifact for 8f2e0f00ad9e7db302c246bbc0d509507043975a 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 8f2e0f00ad9e7db302c246bbc0d509507043975a 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 ef5e490321f960813402d056b7d770ae55968346 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 e7f0023b9fca4270b683513ef4b943c3206ba4f7 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 e7f0023b9fca4270b683513ef4b943c3206ba4f7 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.
Android - Video Test
example https://github.com/facebook/react-native/pull/34969/commits/dc4c54ec1b7b7f7cd37c7402b1eac5292cb4996a
iOS - View Test
example https://github.com/facebook/react-native/pull/34969/commits/dc4c54ec1b7b7f7cd37c7402b1eac5292cb4996a
PR build artifact for bf37a34c38b39a14de8194520d07de0b9f8c0bf7 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 bf37a34c38b39a14de8194520d07de0b9f8c0bf7 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 dc4c54ec1b7b7f7cd37c7402b1eac5292cb4996a 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 dc4c54ec1b7b7f7cd37c7402b1eac5292cb4996a 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 viewHoverEvent on iOS
https://user-images.githubusercontent.com/24992535/204595116-1ed59391-a417-4ca2-8b5b-660709807965.mp4