mirror of
https://github.com/facebook/react-native.git
synced 2025-11-01 09:14:26 +00:00
dd6325bafe
Summary: This issue fixes [30977][17] . The Pull Request was previously published by [intergalacticspacehighway][13] with [31666][19]. The solution consists of: 1. Adding Javascript logic in the [FlatList][14], SectionList, VirtualizedList components to provide accessibility information (row and column position) for each cell in the method [renderItem][20] as a fourth parameter [accessibilityCollectionItem][21]. The information is saved on the native side in the AccessibilityNodeInfo and announced by TalkBack when changing row, column, or page ([video example][12]). The prop accessibilityCollectionItem is available in the View component which wraps each FlatList cell. 2. Adding Java logic in [ReactScrollView.java][16] and HorizontalScrollView to announce pages with TalkBack when scrolling up/down. The missing AOSP logic in [ScrollView.java][10] (see also the [GridView][11] example) is responsible for announcing Page Scrolling with TalkBack. Relevant Links: x [Additional notes on this PR][18] x [discussion on the additional container View around each FlatList cell][22] x [commit adding prop getCellsInItemCount to VirtualizedList][23] ## Changelog [Android] [Added] - Accessibility announcement for list and grid in FlatList Pull Request resolved: https://github.com/facebook/react-native/pull/33180 Test Plan: [1]. TalkBack announces pages and cells with Horizontal Flatlist in the Paper Renderer ([link][1]) [2]. TalkBack announces pages and cells with Vertical Flatlist in the Paper Renderer ([link][2]) [3]. `FlatList numColumns={undefined}` Should not trigger Runtime Error NoSuchKey exception columnCount when enabling TalkBack. ([link][3]) [4]. TalkBack announces pages and cells with Nested Horizontal Flatlist in the rn-tester app ([link][4]) [1]: https://github.com/fabriziobertoglio1987/react-native-notes/issues/6#issuecomment-1050452894 [2]: https://github.com/fabriziobertoglio1987/react-native-notes/issues/6#issuecomment-1050462465 [3]: https://github.com/fabriziobertoglio1987/react-native-notes/issues/6#issuecomment-1032340879 [4]: https://github.com/fabriziobertoglio1987/react-native-notes/issues/6#issuecomment-1050618308 [10]:https://github.com/aosp-mirror/platform_frameworks_base/blob/1ac46f932ef88a8f96d652580d8105e361ffc842/core/java/android/widget/AdapterView.java#L1027-L1029 "GridView.java method responsible for calling setFromIndex and setToIndex" [11]:https://github.com/fabriziobertoglio1987/react-native-notes/issues/6#issuecomment-1042518901 "test case on Android GridView" [12]:https://github.com/fabriziobertoglio1987/react-native-notes/issues/6#issuecomment-1050452894 "TalkBack announces pages and cells with Horizontal Flatlist in the Paper Renderer" [13]:https://github.com/intergalacticspacehighway "github intergalacticspacehighway" [14]:https://github.com/fabriziobertoglio1987/react-native/blob/80acf523a4410adac8005d5c9472fb87f78e12ee/Libraries/Lists/FlatList.js#L617-L636 "FlatList accessibilityCollectionItem" [16]:https://github.com/fabriziobertoglio1987/react-native/blob/5706bd7d3ee35dca48f85322a2bdcaec0bce2c85/ReactAndroid/src/main/java/com/facebook/react/views/scroll/ReactScrollView.java#L183-L184 "logic added to ReactScrollView.java" [17]: https://github.com/facebook/react-native/issues/30977 [18]: https://github.com/fabriziobertoglio1987/react-native-notes/issues/6 [19]: https://github.com/facebook/react-native/pull/31666 [20]: https://reactnative.dev/docs/next/flatlist#required-renderitem "FlatList renderItem documentation" [21]: https://github.com/fabriziobertoglio1987/react-native/commit/75147359c5d070406ebbe488c57c3cd94c08c19d "commit that introduces fourth param accessibilityCollectionItem in callback renderItem" [22]: https://github.com/facebook/react-native/pull/33180#discussion_r826748664 "discussion on the additional container View around each FlatList cell" [23]: https://github.com/fabriziobertoglio1987/react-native/commit/d50fd1a68112f40f4be3ac3aa4d67f96df33e387 "commit adding prop getCellsInItemCount to VirtualizedList" Reviewed By: kacieb Differential Revision: D34518929 Pulled By: blavalla fbshipit-source-id: 410a05263a56162bf505a4cad957b24005ed65ed
91 lines
1.8 KiB
JavaScript
91 lines
1.8 KiB
JavaScript
/**
|
|
* Copyright (c) Meta Platforms, Inc. and affiliates.
|
|
*
|
|
* This source code is licensed under the MIT license found in the
|
|
* LICENSE file in the root directory of this source tree.
|
|
*
|
|
* @format
|
|
* @flow strict-local
|
|
*/
|
|
|
|
'use strict';
|
|
|
|
import type {SyntheticEvent} from '../../Types/CoreEventTypes';
|
|
|
|
// This must be kept in sync with the AccessibilityRolesMask in RCTViewManager.m
|
|
export type AccessibilityRole =
|
|
| 'none'
|
|
| 'button'
|
|
| 'togglebutton'
|
|
| 'link'
|
|
| 'search'
|
|
| 'image'
|
|
| 'keyboardkey'
|
|
| 'text'
|
|
| 'adjustable'
|
|
| 'imagebutton'
|
|
| 'header'
|
|
| 'summary'
|
|
| 'alert'
|
|
| 'checkbox'
|
|
| 'combobox'
|
|
| 'menu'
|
|
| 'menubar'
|
|
| 'menuitem'
|
|
| 'progressbar'
|
|
| 'radio'
|
|
| 'radiogroup'
|
|
| 'scrollbar'
|
|
| 'spinbutton'
|
|
| 'switch'
|
|
| 'tab'
|
|
| 'tabbar'
|
|
| 'tablist'
|
|
| 'timer'
|
|
| 'list'
|
|
| 'grid'
|
|
| 'toolbar';
|
|
|
|
// the info associated with an accessibility action
|
|
export type AccessibilityActionInfo = $ReadOnly<{
|
|
name: string,
|
|
label?: string,
|
|
...
|
|
}>;
|
|
|
|
// The info included in the event sent to onAccessibilityAction
|
|
export type AccessibilityActionEvent = SyntheticEvent<
|
|
$ReadOnly<{actionName: string, ...}>,
|
|
>;
|
|
|
|
export type AccessibilityState = {
|
|
disabled?: boolean,
|
|
selected?: boolean,
|
|
checked?: ?boolean | 'mixed',
|
|
busy?: boolean,
|
|
expanded?: boolean,
|
|
...
|
|
};
|
|
|
|
export type AccessibilityValue = $ReadOnly<{|
|
|
/**
|
|
* The minimum value of this component's range. (should be an integer)
|
|
*/
|
|
min?: number,
|
|
|
|
/**
|
|
* The maximum value of this component's range. (should be an integer)
|
|
*/
|
|
max?: number,
|
|
|
|
/**
|
|
* The current value of this component's range. (should be an integer)
|
|
*/
|
|
now?: number,
|
|
|
|
/**
|
|
* A textual description of this component's value. (will override minimum, current, and maximum if set)
|
|
*/
|
|
text?: Stringish,
|
|
|}>;
|