Add Android accessibility collection support to FlatList#57504
Add Android accessibility collection support to FlatList#57504krsnaSuraj wants to merge 1 commit into
Conversation
|
Hi @krsnaSuraj! 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! |
There was a problem hiding this comment.
Pull request overview
This PR adds Android-only propagation of accessibilityCollection (collection-level metadata) and accessibilityCollectionItem (per-item positioning metadata) from FlatList down to the underlying native views so TalkBack can announce item position within a list/grid.
Changes:
- Compute and pass Android
accessibilityCollection+ defaultaccessibilityRole(list/grid) fromFlatListtoVirtualizedList. - Attach Android
accessibilityCollectionItemto rendered items (includingnumColumns > 1grids) while preserving user-provided values. - Add Fantom integration coverage for list + multi-column grid accessibility metadata.
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 4 comments.
| File | Description |
|---|---|
| packages/react-native/Libraries/Lists/FlatList.js | Adds Android accessibility collection + item metadata propagation for FlatList (list/grid, per-item indices). |
| packages/react-native/Libraries/Lists/tests/FlatList-itest.js | Adds Fantom integration tests asserting Android collection metadata is present for single- and multi-column FlatList. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| const rowAccessibilityProps: any = isAndroid | ||
| ? {accessibilityCollectionItem: null} | ||
| : {}; | ||
| return ( | ||
| <View style={StyleSheet.compose(styles.row, columnWrapperStyle)}> | ||
| <View | ||
| {...rowAccessibilityProps} | ||
| style={StyleSheet.compose(styles.row, columnWrapperStyle)}> |
| const renderer = strictMode ? this._memoizedRenderer : this._renderer; | ||
| const numColumnsValue = numColumnsOrDefault(numColumns); | ||
| const androidAccessibilityProps = | ||
| Platform.OS === 'android' | ||
| ? { | ||
| accessibilityCollection: | ||
| // $FlowFixMe[prop-missing] Internal native prop. | ||
| this.props.accessibilityCollection ?? | ||
| createAccessibilityCollection(this.props.data, numColumnsValue), | ||
| accessibilityRole: | ||
| this.props.role == null && this.props.accessibilityRole == null | ||
| ? numColumnsValue > 1 | ||
| ? 'grid' | ||
| : 'list' | ||
| : this.props.accessibilityRole, | ||
| } | ||
| : {}; |
| it('adds Android accessibility collection metadata to list items', () => { | ||
| // $FlowFixMe[incompatible-type] Platform.OS is read-only in production. | ||
| Platform.OS = 'android'; | ||
| try { |
| it('adds Android accessibility collection metadata to multi-column list items', () => { | ||
| // $FlowFixMe[incompatible-type] Platform.OS is read-only in production. | ||
| Platform.OS = 'android'; | ||
| try { |
krsnaSuraj
force-pushed
the
fix/flatlist-accessibility-position
branch
from
6910b94 to
c997a4b
Compare
meta-cla
Bot
added
the
CLA Signed
krsnaSuraj
force-pushed
the
fix/flatlist-accessibility-position
branch
from
c997a4b to
6dba326
Compare
facebook-github-tools
Bot
added
the
Shared with Meta
On Android, FlatList did not expose accessibility collection metadata, so screen readers (TalkBack) could not announce list/grid position. Changes: - Computes accessibilityCollection and sets accessibilityRole to list/grid - Attaches accessibilityCollectionItem to each rendered cell - Supports horizontal FlatList (numColumns + horizontal) - Preserves user-provided role/accessibilityRole/accessibilityCollection props [Android] [Added] - FlatList now exposes accessibility collection metadata Closes react#30973
krsnaSuraj
force-pushed
the
fix/flatlist-accessibility-position
branch
from
3d025b3 to
33fd813
Compare
Summary
On Android, FlatList did not expose accessibility collection metadata, so screen readers (TalkBack) could not announce list/grid position for items (issue #30973).
The native stack on main already reads these tags:
The only missing piece was the JS propagation, which is what this PR adds. No native changes are required.
Changes (JS only, FlatList.js):
This directly closes the FlatList-specific issue #30973. It is intentionally scoped to FlatList (a Good first issue) and keeps the change small and low-risk; the broader VirtualizedList/SectionList work is tracked separately in #30977 / #30975.
Changelog:
[Android] [Added] - FlatList now exposes accessibility collection metadata on Android so TalkBack can announce list/grid position
Test Plan
Related
Closes #30973
(See also prior attempts #57016, #57008, #54792, #56692 which targeted the broader VirtualizedList layer.)