-
Notifications
You must be signed in to change notification settings - Fork 24.4k
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
Role and item announcement in Flatlist #31666
Changes from all commits
26d37b7
a40df5d
ec09520
55877da
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change | ||||
---|---|---|---|---|---|---|
|
@@ -606,24 +606,71 @@ class FlatList<ItemT> extends React.PureComponent<Props<ItemT>, void> { | |||||
return ( | ||||||
<View style={StyleSheet.compose(styles.row, columnWrapperStyle)}> | ||||||
{item.map((it, kk) => { | ||||||
const element = renderer({ | ||||||
item: it, | ||||||
index: index * numColumns + kk, | ||||||
separators: info.separators, | ||||||
}); | ||||||
const accessibilityCollectionItemInfo = { | ||||||
rowIndex: index, | ||||||
rowSpan: 1, | ||||||
columnIndex: (index * numColumns + kk) % numColumns, | ||||||
columnSpan: 1, | ||||||
heading: false, | ||||||
itemIndex: index * numColumns + kk, | ||||||
}; | ||||||
|
||||||
const element = ( | ||||||
<View | ||||||
importantForAccessibility="yes" | ||||||
style={styles.cellStyle} | ||||||
accessibilityCollectionItemInfo={ | ||||||
accessibilityCollectionItemInfo | ||||||
}> | ||||||
{renderer({ | ||||||
item: it, | ||||||
index: index * numColumns + kk, | ||||||
separators: info.separators, | ||||||
})} | ||||||
</View> | ||||||
); | ||||||
return element != null ? ( | ||||||
<React.Fragment key={kk}>{element}</React.Fragment> | ||||||
) : null; | ||||||
})} | ||||||
</View> | ||||||
); | ||||||
} else { | ||||||
return renderer(info); | ||||||
const {index} = info; | ||||||
|
||||||
const accessibilityCollectionItemInfo = { | ||||||
rowIndex: index, | ||||||
rowSpan: 1, | ||||||
columnIndex: 0, | ||||||
columnSpan: 1, | ||||||
heading: false, | ||||||
itemIndex: index, | ||||||
}; | ||||||
|
||||||
return ( | ||||||
<View | ||||||
importantForAccessibility="yes" | ||||||
style={styles.cellStyle} | ||||||
accessibilityCollectionItemInfo={accessibilityCollectionItemInfo}> | ||||||
{renderer(info)} | ||||||
</View> | ||||||
); | ||||||
} | ||||||
}, | ||||||
}; | ||||||
}; | ||||||
|
||||||
_getAccessibilityCollectionInfo = () => { | ||||||
const accessibilityCollectionProps = { | ||||||
itemCount: this.props.data ? this.props.data.length : 0, | ||||||
rowCount: this._getItemCount(this.props.data), | ||||||
columnCount: this.props.numColumns, | ||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
Suggested change
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Thanks @blavalla
|
||||||
hierarchical: false, | ||||||
}; | ||||||
|
||||||
return accessibilityCollectionProps; | ||||||
}; | ||||||
|
||||||
render(): React.Node { | ||||||
const {numColumns, columnWrapperStyle, ...restProps} = this.props; | ||||||
|
||||||
|
@@ -633,6 +680,10 @@ class FlatList<ItemT> extends React.PureComponent<Props<ItemT>, void> { | |||||
getItem={this._getItem} | ||||||
getItemCount={this._getItemCount} | ||||||
keyExtractor={this._keyExtractor} | ||||||
accessibilityCollectionInfo={this._getAccessibilityCollectionInfo()} | ||||||
accessibilityRole={Platform.select({ | ||||||
android: this.props.numColumns > 1 ? 'grid' : 'list', | ||||||
})} | ||||||
ref={this._captureRef} | ||||||
viewabilityConfigCallbackPairs={this._virtualizedListPairs} | ||||||
{...this._renderer()} | ||||||
|
@@ -643,6 +694,7 @@ class FlatList<ItemT> extends React.PureComponent<Props<ItemT>, void> { | |||||
|
||||||
const styles = StyleSheet.create({ | ||||||
row: {flexDirection: 'row'}, | ||||||
cellStyle: {flex: 1}, | ||||||
}); | ||||||
|
||||||
module.exports = FlatList; |
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -8,12 +8,14 @@ | |
package com.facebook.react.uimanager; | ||
|
||
import android.content.Context; | ||
import android.graphics.Rect; | ||
import android.os.Bundle; | ||
import android.os.Handler; | ||
import android.os.Message; | ||
import android.text.SpannableString; | ||
import android.text.style.URLSpan; | ||
import android.view.View; | ||
import android.view.ViewGroup; | ||
import android.view.accessibility.AccessibilityEvent; | ||
import androidx.annotation.Nullable; | ||
import androidx.core.view.AccessibilityDelegateCompat; | ||
|
@@ -107,6 +109,8 @@ public enum AccessibilityRole { | |
TAB, | ||
TABLIST, | ||
TIMER, | ||
LIST, | ||
GRID, | ||
TOOLBAR; | ||
|
||
public static String getValue(AccessibilityRole role) { | ||
|
@@ -135,6 +139,10 @@ public static String getValue(AccessibilityRole role) { | |
return "android.widget.SpinButton"; | ||
case SWITCH: | ||
return "android.widget.Switch"; | ||
case LIST: | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Oh wow, I didn't realize we didn't have a role for list! Good catch! |
||
return "android.widget.AbsListView"; | ||
case GRID: | ||
return "android.widget.GridView"; | ||
case NONE: | ||
case LINK: | ||
case SUMMARY: | ||
|
@@ -204,6 +212,20 @@ public void onInitializeAccessibilityNodeInfo(View host, AccessibilityNodeInfoCo | |
} | ||
final ReadableArray accessibilityActions = | ||
(ReadableArray) host.getTag(R.id.accessibility_actions); | ||
|
||
final ReadableMap accessibilityCollectionItemInfo = | ||
(ReadableMap) host.getTag(R.id.accessibility_collection_item_info); | ||
if (accessibilityCollectionItemInfo != null) { | ||
int rowIndex = accessibilityCollectionItemInfo.getInt("rowIndex"); | ||
int columnIndex = accessibilityCollectionItemInfo.getInt("columnIndex"); | ||
int rowSpan = accessibilityCollectionItemInfo.getInt("rowSpan"); | ||
int columnSpan = accessibilityCollectionItemInfo.getInt("columnSpan"); | ||
boolean heading = accessibilityCollectionItemInfo.getBoolean("heading"); | ||
|
||
AccessibilityNodeInfoCompat.CollectionItemInfoCompat collectionItemInfoCompat = AccessibilityNodeInfoCompat.CollectionItemInfoCompat.obtain(rowIndex, rowSpan, columnIndex, columnSpan, heading); | ||
info.setCollectionItemInfo(collectionItemInfoCompat); | ||
} | ||
|
||
if (accessibilityActions != null) { | ||
for (int i = 0; i < accessibilityActions.size(); i++) { | ||
final ReadableMap action = accessibilityActions.getMap(i); | ||
|
@@ -259,12 +281,14 @@ public void onInitializeAccessibilityNodeInfo(View host, AccessibilityNodeInfoCo | |
} | ||
} | ||
|
||
|
||
@Override | ||
public void onInitializeAccessibilityEvent(View host, AccessibilityEvent event) { | ||
super.onInitializeAccessibilityEvent(host, event); | ||
// Set item count and current item index on accessibility events for adjustable | ||
// in order to make Talkback announce the value of the adjustable | ||
final ReadableMap accessibilityValue = (ReadableMap) host.getTag(R.id.accessibility_value); | ||
|
||
if (accessibilityValue != null | ||
&& accessibilityValue.hasKey("min") | ||
&& accessibilityValue.hasKey("now") | ||
|
@@ -438,7 +462,8 @@ public static void setDelegate(final View view) { | |
&& (view.getTag(R.id.accessibility_role) != null | ||
|| view.getTag(R.id.accessibility_state) != null | ||
|| view.getTag(R.id.accessibility_actions) != null | ||
|| view.getTag(R.id.react_test_id) != null)) { | ||
|| view.getTag(R.id.react_test_id) != null | ||
|| view.getTag(R.id.accessibility_collection_item_info) != null)) { | ||
ViewCompat.setAccessibilityDelegate(view, new ReactAccessibilityDelegate()); | ||
} | ||
} | ||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The only issue I can think of with this approach is that it needs an additional wrapper View so that we can get the accessibility collection info on the native side.
The solution would be if we can create accessibility-only Views. I think @amarlette had created an issue for the same, but I am able to find it.