react-native

react-native copied to clipboard

Summary

Aims to fix - https://github.com/facebook/react-native/issues/30977

This PR adds accessibilityRole, accessibilityCollectionItemInfo, accessibilityCollectionInfo APIs to FlatList which enables TalkBack announcements when a list is scrolled or focused.

Changelog

[Android] [Added] - Accessibility announcement for list and grid in FlatList

Test Plan

I tested these testcases where View hierarchy may change.

• Horizontal FlatList
• Horizontal FlatList when fixed layout
• FlatList when numColumns > 1
• FlatList when numColumns > 1 and fixed layout
• Simple 1 column FlatList
• Simple 1 column FlatList - Fixed layout
• Nested FlatList

All the above cases can be tested with current examples. I've added a nested FlatList example. Let me know if I've missed any cases. Thanks!

Also, while testing, it'd be helpful to reduce the Lorem Ipsum text content in items as accessibility announcements are made after reading the item content.

Messages

:book:

:clipboard: Verify Changelog Format - A changelog entry has the following format: [CATEGORY] [TYPE] - Message. CATEGORY may be: General iOS Android JavaScript Internal (for changes that do not need to be called out in the release notes) TYPE may be: Added, for new features. Changed, for changes in existing functionality. Deprecated, for soon-to-be removed features. Removed, for now removed features. Fixed, for any bug fixes. Security, in case of vulnerabilities. MESSAGE may answer "what and why" on a feature level. Use this to briefly tell React Native users about notable changes.

Generated by :no_entry_sign: dangerJS against 55877da014228ef32efbf15575c93f049bcd9b4c

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

Base commit: 006f5afe120c290a37cf6ff896748fbc062bf7ed

Platform	Engine	Arch	Size (bytes)	Diff
android	hermes	arm64-v8a	9,154,497	+884
android	hermes	armeabi-v7a	8,688,178	+902
android	hermes	x86	9,595,436	+901
android	hermes	x86_64	9,563,541	+873
android	jsc	arm64-v8a	10,798,594	+699
android	jsc	armeabi-v7a	9,723,540	+720
android	jsc	x86	10,834,942	+724
android	jsc	x86_64	11,444,557	+699

Base commit: 52a9fed3dfad55f2e122ea77134cc58d3a4e588d

Thank you for this draft pull request @intergalacticspacehighway! Please tag me when you are ready to move it out of drafts and I can assign a reviewer.

but maybe instead this should not be an API that is on the base view class, and is only on the various list classes

I think eventually the API needs to be on either View or ScrollView, since those are the underlying native building blocks for these components.

I'm going to pull in @yungsters here as well, who has done some thinking about React Native lists and might be able to weigh in on the best API design for this.

The accessibilityCollectionInfo API introduced here seems reasonable to me. As a naming nit, could this just be named accessibilityCollection?

@blavalla

I'm testing and reviewing this Pull Request. This is my current progress https://github.com/fabriziobertoglio1987/react-native-notes/issues/6#issuecomment-1032340879 testing the PR.

I will publish a review for 31666 in a couple of days.

Thanks a lot :pray:

I moved the PR to Done as https://github.com/facebook/react-native/pull/33180 was merged and partially reverted. https://github.com/facebook/react-native/pull/33180 was based on this branch.

TalkBack support for ScrollView accessibility announcements (list and grid) #33180 initially landed on 20th April 2022. Java API relanded with commit a7bb9664009. JavaScript API relanded with commit cbf53bcaf0c, but reverted with commit c2169c776e271ea.

Thanks a lot.

	Fails
:no_entry_sign:	Libraries/Components/ScrollView/AndroidHorizontalScrollViewNativeComponent.js#L15 - Libraries/Components/ScrollView/AndroidHorizontalScrollViewNativeComponent.js line 15 – Replace ·NativeComponentRegistry.get<Props>(⏎··'AndroidHorizontalScrollView',⏎· with ⏎··NativeComponentRegistry.get<Props>('AndroidHorizontalScrollView', (prettier/prettier)
:no_entry_sign:	Libraries/Components/ScrollView/AndroidHorizontalScrollViewNativeComponent.js#L41 - Libraries/Components/ScrollView/AndroidHorizontalScrollViewNativeComponent.js line 41 – Delete ,⏎ (prettier/prettier)
:no_entry_sign:	Libraries/Lists/FlatList.js#L398 - Libraries/Lists/FlatList.js line 398 – Replace ·this.props.viewabilityConfigCallbackPairs.map(⏎········ with ⏎········this.props.viewabilityConfigCallbackPairs.map( (prettier/prettier)
:no_entry_sign:	Libraries/Lists/FlatList.js#L404 - Libraries/Lists/FlatList.js line 404 – Delete ,⏎······ (prettier/prettier)
:no_entry_sign:	Libraries/Lists/FlatList.js#L570 - Libraries/Lists/FlatList.js line 570 – Replace ⏎······ListItemComponent,⏎······renderItem,⏎······numColumns,⏎······columnWrapperStyle, with ListItemComponent,·renderItem,·numColumns,·columnWrapperStyle}·= (prettier/prettier)
:no_entry_sign:	Libraries/Lists/FlatList.js#L575 - Libraries/Lists/FlatList.js line 575 – Replace }·= with · (prettier/prettier)
:no_entry_sign:	Libraries/Lists/VirtualizedList.js#L444 - Libraries/Lists/VirtualizedList.js line 444 – Replace getItemCount(⏎········data, with ⏎········getItemCount(data)·-·1 (prettier/prettier)
:no_entry_sign:	Libraries/Lists/VirtualizedList.js#L446 - Libraries/Lists/VirtualizedList.js line 446 – Delete )·-·1 (prettier/prettier)
:no_entry_sign:	Libraries/Lists/VirtualizedList.js#L885 - Libraries/Lists/VirtualizedList.js line 885 – Replace ⏎······ListEmptyComponent,⏎······ListFooterComponent,⏎······ListHeaderComponent, with ListEmptyComponent,·ListFooterComponent,·ListHeaderComponent}·= (prettier/prettier)
:no_entry_sign:	Libraries/Lists/VirtualizedList.js#L889 - Libraries/Lists/VirtualizedList.js line 889 – Replace }·= with · (prettier/prettier)
:no_entry_sign:	Libraries/Lists/VirtualizedList.js#L1499 - Libraries/Lists/VirtualizedList.js line 1499 – Replace ⏎······data,⏎······getItemCount,⏎······onEndReached,⏎······onEndReachedThreshold, with data,·getItemCount,·onEndReached,·onEndReachedThreshold}·= (prettier/prettier)
:no_entry_sign:	Libraries/Lists/VirtualizedList.js#L1504 - Libraries/Lists/VirtualizedList.js line 1504 – Replace }·= with · (prettier/prettier)
:no_entry_sign:	Libraries/Lists/VirtualizedList.js#L1591 - Libraries/Lists/VirtualizedList.js line 1591 – Replace ⏎········visibleLength,⏎········contentLength,⏎········offset,⏎········dOffset, with visibleLength,·contentLength,·offset,·dOffset}·= (prettier/prettier)
:no_entry_sign:	Libraries/Lists/VirtualizedList.js#L1596 - Libraries/Lists/VirtualizedList.js line 1596 – Replace }·= with · (prettier/prettier)
:no_entry_sign:	Libraries/Lists/VirtualizedList.js#L1597 - Libraries/Lists/VirtualizedList.js line 1597 – Replace ········ with ·········· (prettier/prettier)
:no_entry_sign:	Libraries/Lists/VirtualizedList.js#L1598 - Libraries/Lists/VirtualizedList.js line 1598 – Insert ·· (prettier/prettier)
:no_entry_sign:	Libraries/Lists/VirtualizedList.js#L1599 - Libraries/Lists/VirtualizedList.js line 1599 – Insert ·· (prettier/prettier)

	Warnings
:warning:	Libraries/Components/ScrollView/AndroidHorizontalScrollViewNativeComponent.js#L11 - Libraries/Components/ScrollView/AndroidHorizontalScrollViewNativeComponent.js line 11 – Requires should be sorted alphabetically (lint/sort-imports)
:warning:	Libraries/Lists/FlatList.js#L11 - Libraries/Lists/FlatList.js line 11 – Requires should be sorted alphabetically (lint/sort-imports)
:warning:	Libraries/Lists/FlatList.js#L599 - Libraries/Lists/FlatList.js line 599 – Do not define components during render. React will see a new component type on every render and destroy the entire subtree’s DOM nodes and state (https://reactjs.org/docs/reconciliation.html#elements-of-different-types). Instead, move this component definition out of the parent component “FlatList” and pass data as props. If you want to allow component creation in props, set allowAsProps option to true. (react/no-unstable-nested-components)
:warning:	Libraries/Lists/VirtualizedList.js#L11 - Libraries/Lists/VirtualizedList.js line 11 – Requires should be sorted alphabetically (lint/sort-imports)
:warning:	packages/rn-tester/js/examples/FlatList/FlatList-nested.js#L1 - packages/rn-tester/js/examples/FlatList/FlatList-nested.js line 1 – Strings must use singlequote. (quotes)
:warning:	packages/rn-tester/js/examples/FlatList/FlatList-nested.js#L9 - packages/rn-tester/js/examples/FlatList/FlatList-nested.js line 9 – Strings must use singlequote. (quotes)
:warning:	packages/rn-tester/js/examples/FlatList/FlatList-nested.js#L13 - packages/rn-tester/js/examples/FlatList/FlatList-nested.js line 13 – Strings must use singlequote. (quotes)
:warning:	packages/rn-tester/js/examples/FlatList/FlatList-nested.js#L14 - packages/rn-tester/js/examples/FlatList/FlatList-nested.js line 14 – Strings must use singlequote. (quotes)
:warning:	packages/rn-tester/js/examples/FlatList/FlatList-nested.js#L17 - packages/rn-tester/js/examples/FlatList/FlatList-nested.js line 17 – Strings must use singlequote. (quotes)
:warning:	packages/rn-tester/js/examples/FlatList/FlatList-nested.js#L18 - packages/rn-tester/js/examples/FlatList/FlatList-nested.js line 18 – Strings must use singlequote. (quotes)
:warning:	packages/rn-tester/js/examples/FlatList/FlatList-nested.js#L21 - packages/rn-tester/js/examples/FlatList/FlatList-nested.js line 21 – Strings must use singlequote. (quotes)
:warning:	packages/rn-tester/js/examples/FlatList/FlatList-nested.js#L22 - packages/rn-tester/js/examples/FlatList/FlatList-nested.js line 22 – Strings must use singlequote. (quotes)
:warning:	packages/rn-tester/js/examples/FlatList/FlatList-nested.js#L25 - packages/rn-tester/js/examples/FlatList/FlatList-nested.js line 25 – Strings must use singlequote. (quotes)
:warning:	packages/rn-tester/js/examples/FlatList/FlatList-nested.js#L26 - packages/rn-tester/js/examples/FlatList/FlatList-nested.js line 26 – Strings must use singlequote. (quotes)
:warning:	packages/rn-tester/js/examples/FlatList/FlatList-nested.js#L29 - packages/rn-tester/js/examples/FlatList/FlatList-nested.js line 29 – Strings must use singlequote. (quotes)
:warning:	packages/rn-tester/js/examples/FlatList/FlatList-nested.js#L30 - packages/rn-tester/js/examples/FlatList/FlatList-nested.js line 30 – Strings must use singlequote. (quotes)
:warning:	packages/rn-tester/js/examples/FlatList/FlatList-nested.js#L33 - packages/rn-tester/js/examples/FlatList/FlatList-nested.js line 33 – Strings must use singlequote. (quotes)
:warning:	packages/rn-tester/js/examples/FlatList/FlatList-nested.js#L34 - packages/rn-tester/js/examples/FlatList/FlatList-nested.js line 34 – Strings must use singlequote. (quotes)
:warning:	packages/rn-tester/js/examples/FlatList/FlatList-nested.js#L37 - packages/rn-tester/js/examples/FlatList/FlatList-nested.js line 37 – Strings must use singlequote. (quotes)
:warning:	packages/rn-tester/js/examples/FlatList/FlatList-nested.js#L38 - packages/rn-tester/js/examples/FlatList/FlatList-nested.js line 38 – Strings must use singlequote. (quotes)
:warning:	packages/rn-tester/js/examples/FlatList/FlatList-nested.js#L41 - packages/rn-tester/js/examples/FlatList/FlatList-nested.js line 41 – Strings must use singlequote. (quotes)
:warning:	packages/rn-tester/js/examples/FlatList/FlatList-nested.js#L42 - packages/rn-tester/js/examples/FlatList/FlatList-nested.js line 42 – Strings must use singlequote. (quotes)
:warning:	packages/rn-tester/js/examples/FlatList/FlatList-nested.js#L45 - packages/rn-tester/js/examples/FlatList/FlatList-nested.js line 45 – Strings must use singlequote. (quotes)
:warning:	packages/rn-tester/js/examples/FlatList/FlatList-nested.js#L46 - packages/rn-tester/js/examples/FlatList/FlatList-nested.js line 46 – Strings must use singlequote. (quotes)
:warning:	packages/rn-tester/js/examples/FlatList/FlatList-nested.js#L49 - packages/rn-tester/js/examples/FlatList/FlatList-nested.js line 49 – Strings must use singlequote. (quotes)
:warning:	packages/rn-tester/js/examples/FlatList/FlatList-nested.js#L50 - packages/rn-tester/js/examples/FlatList/FlatList-nested.js line 50 – Strings must use singlequote. (quotes)
:warning:	packages/rn-tester/js/examples/FlatList/FlatList-nested.js#L87 - packages/rn-tester/js/examples/FlatList/FlatList-nested.js line 87 – Strings must use singlequote. (quotes)
:warning:	packages/rn-tester/js/examples/FlatList/FlatList-nested.js#L97 - packages/rn-tester/js/examples/FlatList/FlatList-nested.js line 97 – Strings must use singlequote. (quotes)
:warning:	packages/rn-tester/js/examples/FlatList/FlatList-nested.js#L98 - packages/rn-tester/js/examples/FlatList/FlatList-nested.js line 98 – Strings must use singlequote. (quotes)
:warning:	packages/rn-tester/js/examples/FlatList/FlatList-nested.js#L99 - packages/rn-tester/js/examples/FlatList/FlatList-nested.js line 99 – Strings must use singlequote. (quotes)
:warning:	packages/rn-tester/js/examples/FlatList/FlatList-nested.js#L100 - packages/rn-tester/js/examples/FlatList/FlatList-nested.js line 100 – Strings must use singlequote. (quotes)
:warning:	packages/rn-tester/js/examples/FlatList/FlatList-nested.js#L101 - packages/rn-tester/js/examples/FlatList/FlatList-nested.js line 101 – Strings must use singlequote. (quotes)
:warning:	packages/rn-tester/js/examples/FlatList/FlatList-nested.js#L104 - packages/rn-tester/js/examples/FlatList/FlatList-nested.js line 104 – Strings must use singlequote. (quotes)

Generated by :no_entry_sign: dangerJS against 55877da014228ef32efbf15575c93f049bcd9b4c

This PR is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 7 days.

This PR was closed because it has been stalled for 7 days with no activity.