Accessibility focus order issue with ActionSheet for Talkback
ethan501 opened this issue · comments
Description
There is a bug where when I pass a custom header component to the renderTitle
prop the focus order is incorrect. When the sheet opens the focus is placed on the header then when you swipe to go to the next item the focus moves down to the items passed into the options
prop. Then on the next swipe it moves back into the custom header component. Then on the next swipe it abruptly moves down to the second option in the list. This bug only exists while using Talkback.
Related to
- ActionSheet
Steps to reproduce
- Enable Talkback
- Open up an action sheet
- Swipe through the sheet
- Notice that the focus goes from the header to item one to the close button then to item two and then proceeds to navigate normally
Expected behavior
While navigating through the ActionSheet component, focus should be placed on the header/title of the sheet then on swipe move to the close button then on next swipe to the body of the ActionSheet where it navigates through it's children normally.
Code example
Action sheet
<ActionSheet
options={options}
visible={props.isVisible}
renderTitle={() => (
<SheetHeading label="Sheet title" onDismiss={handleDismiss} />
)}
onDismiss={handleDismiss}
/>
Custom Header Component
const SheetHeading = (props: IProps) => {
return (
<View center>
<Text
accessibilityRole="header">
{props.label}
</Text>
<Button
onPress={props.onDismiss}
iconSource={() => (
<Icons.Close />
)}
accessibilityRole="button"
accessibilityLabel="Close"
/>
</View>
</Accessibility.Wrapper>
)
}
Environment
- React Native version: 0.72.4
- React Native UI Lib version: 7.7.0
Affected platforms
- Android