Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Documentation] TalkBack support for ScrollView accessibility announcements (list and grid) #3205

Open
wants to merge 3 commits into
base: main
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
27 changes: 24 additions & 3 deletions docs/flatlist.md
Original file line number Diff line number Diff line change
Expand Up @@ -181,7 +181,12 @@ Inherits [ScrollView Props](scrollview.md#props), unless it is nested in another
### <div class="label required basic">Required</div> **`renderItem`**

```jsx
renderItem({ item, index, separators });
renderItem({
item,
index,
separators,
accessibilityCollectionItem
});
```

Takes an item from `data` and renders it into the list.
Expand All @@ -200,6 +205,14 @@ Provides additional metadata like `index` if you need it, as well as a more gene
- `updateProps` (Function)
- `select` (enum('leading', 'trailing'))
- `newProps` (Object)
- `accessibilityCollectionItem` (Object):
Used by TalkBack to announce the position of the item of a collection (row and column numbers). A collection item is contained in a collection, it starts at a given row and column in the collection, and spans one or more rows and columns. For example, a header of two related table columns starts at the first row and the first column, spans one row and two columns.
- itemIndex The index of the item in the collection (index of prop.data).
- rowIndex The row index at which the item is located.
- rowSpan The number of rows the item spans.
- columnIndex The column index at which the item is located.
- columnSpan The number of columns the item spans.
- heading Whether the item is a heading.

Example usage:

Expand All @@ -217,13 +230,21 @@ Example usage:
))
}
data={[{ title: 'Title Text', key: 'item1' }]}
renderItem={({ item, index, separators }) => (
renderItem={({
item,
index,
separators,
accessibilityCollectionItem
}) => (
<TouchableHighlight
key={item.key}
onPress={() => this._onPress(item)}
onShowUnderlay={separators.highlight}
onHideUnderlay={separators.unhighlight}>
<View style={{ backgroundColor: 'white' }}>
<View
style={{ backgroundColor: 'white' }}
importantForAccessibility="yes"
accessibilityCollectionItem={accessibilityCollectionItem}>
<Text>{item.title}</Text>
</View>
</TouchableHighlight>
Expand Down
37 changes: 37 additions & 0 deletions docs/virtualizedlist.md
Original file line number Diff line number Diff line change
Expand Up @@ -123,6 +123,20 @@ Determines how many items are in the data blob.

---

### **`getCellsInItemCount`**

```jsx
(data: any) => number;
```

Determines how many cells are in the data blob

| Type |
| -------- |
| function |

---

### <div class="label required basic">Required</div> **`renderItem`**

```jsx
Expand Down Expand Up @@ -644,3 +658,26 @@ recordInteraction();
```jsx
setNativeProps((props: Object));
```

## Type Definitions

### AccessibilityCollectionItem

Used by TalkBack to announce the position of the item of a collection (row and column numbers).
Information if a node is a collection item. A collection item is contained in a collection, it starts at a given row and column in the collection, and spans one or
more rows and columns. For example, a header of two related table columns starts at the first row and the first column, spans one row and two columns.

| Type |
| ------ |
| object |

| <div className="wideColumn">Name</div> | Type | Description |
| -------------------------------------- | ------ | ------------------------------------------------------------ |
| itemIndex | string | The index of the item in the collection (index of prop.data) |
| rowIndex | string | The row index at which the item is located |
| rowSpan | string | The number of rows the item spans |
| columnIndex | string | The column index at which the item is located |
| columnIndex | string | The column index at which the item is located |
| columnIndex | string | The column index at which the item is located |
| columnSpan | string | The number of columns the item spans |
| heading | string | Whether the item is a heading |