Repository navigation
Pass accessibilityLabelledBy through Button and Touchable - #58173
angelabenavente wants to merge 3 commits into
Conversation
|
Hi @angelabenavente! Thank you for your pull request and welcome to our community. Action RequiredIn order to merge any pull request (code, docs, etc.), we require contributors to sign our Contributor License Agreement, and we don't seem to have one on file for you. ProcessIn order for us to review and merge your suggested changes, please sign at https://code.facebook.com/cla. If you are contributing on behalf of someone else (eg your employer), the individual CLA may not be sufficient and your employer may need to sign the corporate CLA. Once the CLA is signed, our tooling will perform checks and validations. Afterwards, the pull request will be tagged with If you have received this in error or have any questions, please contact us at cla@meta.com. Thanks! |
meta-cla
Bot
added
the
CLA Signed
|
Thank you for signing our Contributor License Agreement. We can now accept your code for this (and any) Meta Open Source project. Thanks! |
facebook-github-tools
Bot
added
the
Shared with Meta
|
@christophpurrer has imported this pull request. If you are a Meta employee, you can view this in D117876255. |
## Summary: Part of #59377. `Touchable*` build their host view props from a fixed list, and some props they accept in their types never reach it: - `role`: none of `TouchableOpacity`, `TouchableHighlight`, `TouchableNativeFeedback`, `TouchableWithoutFeedback` passes it, so `<TouchableOpacity role="button">` has no role while `accessibilityRole="button"` works. - `TouchableWithoutFeedback` drops `aria-label`. - `TouchableHighlight` drops `aria-busy`, `aria-checked`, `aria-disabled`, `aria-expanded` and `aria-selected`; the other three already map them. This change passes `role` from all four, maps `aria-label` in `TouchableWithoutFeedback` (it wins over `accessibilityLabel`, as in `View`, and the child keeps its own label when neither is set) and maps the state props in `TouchableHighlight` the same way `TouchableOpacity` does. `aria-labelledby` is left to #58173. The shared `rolePropSuite` now also runs for `TouchableNativeFeedback` and `TouchableWithoutFeedback`; before, it ran only for `Text`. It cannot run for `TouchableOpacity` and `TouchableHighlight`: Fantom reads the debug props of a view, and `AccessibilityProps::getDebugProps` does not include `role`, so `role` on their host view is checked on a device instead (pairs G / H of the reproducer). ## Changelog: [GENERAL] [FIXED] - `role` on `Touchable*`, `aria-label` on `TouchableWithoutFeedback` and `aria-*` state props on `TouchableHighlight` reach the native view ## Test Plan: - `yarn fantom packages/react-native/Libraries/Components/Touchable`: 4 suites, 272 tests passed. (Locally with `CXXFLAGS=-Wno-deprecated-literal-operator`: Xcode 27.1 clang rejects the `operator "" _json` syntax of the bundled nlohmann_json 3.11.2 under `-Werror`; unrelated to this change.) - `yarn flow-check`: no errors. `yarn eslint` on the changed files: no warnings. - On a device: the reproducer https://github.com/faciledictu/rn-aria-props-repro, pairs G–L. Before: on Android 17, G is `android.view.ViewGroup`, I's `content-desc` is the child's "×", K has no `checked`; on iOS 27, G has no Button trait, I's label is "×", K's value has no "checked". After, on iOS 27: G has the Button trait, I's label is "Close I", K's value is "checkbox, checked". After, on Android 17: G is `android.widget.Button`, I's `content-desc` is "Close I", K is `checkable="true" checked="true"`. Each matches its `accessibility*` control (H, J, L). Differential Revision: D129326374 Pull Request resolved: #59378
Summary:
Viewalready mapsaccessibilityLabelledBy/aria-labelledby.Buttondoes not extendAccessibilityPropsand does not spread leftover props, so those values were dropped.Forwarding them only from
Buttonis not enough.TouchableNativeFeedbackandTouchableOpacitycopy a fixed accessibility list onto the host view;accessibilityHintis on that list, labelledBy was not. This change forwards labelledBy the same way so it reaches the native view.Changelog:
[GENERAL] [ADDED] - Pass accessibilityLabelledBy and aria-labelledby through Button and Touchable
Test Plan:
Fantom: 12 tests passing, including the native
accessibilityLabelledByprop and thearia-labelledbyalias:yarn fantom 'Libraries/Components/__tests__/Button-itest'Result: