react-native

react-native copied to clipboard

Summary

• adds missing roles
• adds custom roles that don't exist in TalkBack (see the compositor.json and string.xml files).
• fixes issues with Drawer
• fixes issues with ScrollView missing roles

Relevant https://github.com/facebook/react-native/issues/30839#issuecomment-1222293556 fixes https://github.com/facebook/react-native/issues/30839

Changelog

[Android] [Fixed] - add TalkBack custom and standard roles

Test Plan

• sliding drawer, drawer layout, icon menu https://github.com/facebook/react-native/pull/34477#issuecomment-1224112650
• Horizontal and Vertical ScrollView https://github.com/facebook/react-native/pull/34477#issuecomment-1225478289
• Toast https://github.com/facebook/react-native/pull/34477#issuecomment-1225369629
• Other Roles https://user-images.githubusercontent.com/24992535/186067289-abcdc994-c82a-4927-a5e8-6943daba0e6a.mp4

Platform	Engine	Arch	Size (bytes)	Diff
android	hermes	arm64-v8a	7,638,272	+1,632
android	hermes	armeabi-v7a	7,050,268	+1,635
android	hermes	x86	7,940,244	+1,637
android	hermes	x86_64	7,912,264	+1,624
android	jsc	arm64-v8a	9,514,568	+1,641
android	jsc	armeabi-v7a	8,289,855	+1,633
android	jsc	x86	9,454,116	+1,633
android	jsc	x86_64	10,045,353	+1,635

Base commit: 12e5842e11ecd53755f43e99c592135b58ac694b Branch: main

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

Base commit: 12e5842e11ecd53755f43e99c592135b58ac694b Branch: main

• [x] DrawerLayoutAndroid - trigger announcement when opening the drawer (link)

DrawerLayoutAndroid not correctly announcing

TalkBack announces menu when opening the DrawerLayout.

https://github.com/google/talkback/blob/771de7cdbf55b6adb4ca4c64c27a52584f2337cc/compositor/src/main/res/raw/compositor.json#L312-L318 https://github.com/google/talkback/blob/771de7cdbf55b6adb4ca4c64c27a52584f2337cc/compositor/src/main/res/values/strings.xml#L150

No changes are required. The logic is triggered in the DrawerLayout class. https://github.com/androidx/androidx/blob/6fb6ee2d23d4b2c676fef3d4e0f7a5b32cdfd607/drawerlayout/drawerlayout/src/main/java/androidx/drawerlayout/widget/DrawerLayout.java#L933

The below behavior is NOT correct. The announcement is not complete.

https://user-images.githubusercontent.com/24992535/186149555-fe3a8d80-1820-4e8e-aade-1be5b5885876.mp4

Fixes issue documented in https://github.com/facebook/react-native/pull/34477#issuecomment-1223951162

https://github.com/google/talkback/blob/771de7cdbf55b6adb4ca4c64c27a52584f2337cc/compositor/src/main/res/raw/compositor.json#L312-L318 https://github.com/google/talkback/blob/771de7cdbf55b6adb4ca4c64c27a52584f2337cc/compositor/src/main/res/values/strings.xml#L150

The logic is triggered in the DrawerLayout class. https://github.com/androidx/androidx/blob/6fb6ee2d23d4b2c676fef3d4e0f7a5b32cdfd607/drawerlayout/drawerlayout/src/main/java/androidx/drawerlayout/widget/DrawerLayout.java#L933 https://github.com/androidx/androidx/blob/6fb6ee2d23d4b2c676fef3d4e0f7a5b32cdfd607/drawerlayout/drawerlayout/src/main/java/androidx/drawerlayout/widget/DrawerLayout.java#L2485 https://github.com/androidx/androidx/blob/6fb6ee2d23d4b2c676fef3d4e0f7a5b32cdfd607/drawerlayout/drawerlayout/src/main/java/androidx/drawerlayout/widget/DrawerLayout.java#L2500

sliding drawer https://user-images.githubusercontent.com/24992535/186176021-ca3d8380-1ff9-449f-a738-f954edfe6328.mp4

drawerlayout (left) https://user-images.githubusercontent.com/24992535/186176241-d84b2458-6928-4a33-957e-86ec8b427835.mp4

drawerlayout (right) https://user-images.githubusercontent.com/24992535/186176280-4389b45c-1b0f-4d62-b6f8-29210f154558.mp4

iconmenu https://user-images.githubusercontent.com/24992535/186176715-57c6a752-dff2-4088-820c-886d10b70378.mp4

commit https://github.com/fabriziobertoglio1987/react-native/commit/d26786059a94325093c07afcc9ccc5ac77c4b234

TalkBack announces the Toast text without accessibilityRole

The logic for the Toast TalkBack announcement is triggered here https://github.com/aosp-mirror/platform_frameworks_base/blob/e648d3cb91f9a0156c729ca18ec27e71f59f9ce2/core/java/android/widget/Toast.java#L617. The announcement is triggered manually without using AccessibilityDelegate. No changes or role are required to announce Toast.

https://user-images.githubusercontent.com/24992535/186369199-ab2bab23-a22e-4144-8a5c-8207453561cb.mp4

ScrollView announces in/out of ScrollView

https://user-images.githubusercontent.com/24992535/186385487-6addd363-3cd1-4eba-ad83-e69065508afc.mp4

• [x] test iOS
• [x] add iOS changes for Android props https://developer.apple.com/documentation/uikit/uiaccessibilitytraits?language=objc https://github.com/facebook/react-native/commit/da899c0cc4372830e5ca053a096b74fff2a19cb8#diff-d03d45c0a6ef4c20056d36194c510ac399ba15d1e52e0904959be5f44fb38c29

button test on iOS

https://user-images.githubusercontent.com/24992535/187586268-c556c309-d1ac-4079-9de4-be6df5ed6c57.mp4

header test on iOS

https://user-images.githubusercontent.com/24992535/187586321-424a7536-b273-4769-be0a-e8206a24fa9c.mp4

scrollview test on iOS

https://user-images.githubusercontent.com/24992535/187586323-11dabfa1-4f1f-4977-ad48-106c4e47eb45.mp4

roles scrollview and grid

https://user-images.githubusercontent.com/24992535/188107411-57d983bb-28a3-4fdc-b8bb-d921c4765bce.mp4

DrawerLayoutAndroid with or without drawerlayout role

https://user-images.githubusercontent.com/24992535/188112304-5890298a-c060-4843-8ff5-0a8bb6113c4f.mp4

Testing chime_up and chime_down sound feedback in Scrollable

https://github.com/google/talkback/blob/771de7cdbf55b6adb4ca4c64c27a52584f2337cc/compositor/src/main/res/raw/compositor.json#L202

https://github.com/google/talkback/blob/771de7cdbf55b6adb4ca4c64c27a52584f2337cc/compositor/src/main/res/raw/chime_up.ogg#L1

https://github.com/google/talkback/blob/771de7cdbf55b6adb4ca4c64c27a52584f2337cc/compositor/src/main/res/raw/chime_down.ogg#L1

https://user-images.githubusercontent.com/24992535/188785983-4c4cd645-2459-49c9-94ee-da4340f6cc29.mp4

https://user-images.githubusercontent.com/24992535/188786198-62872b6e-1609-45a6-a01d-a8046b0b0a2c.mp4

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

This pull request was successfully merged by @fabriziobertoglio1987 in 55c0df43b9859853e41b6e2ef271b78b783538f0.

^{When will my fix make it into a release? | Upcoming Releases}

	Warnings
:warning:	Libraries/Components/DrawerAndroid/DrawerLayoutAndroid.android.js#L11 - Libraries/Components/DrawerAndroid/DrawerLayoutAndroid.android.js line 11 – Requires should be sorted alphabetically (lint/sort-imports)

Generated by :no_entry_sign: dangerJS against e1c287886f9213a52eab0d1d5285204113f461d3