Accessibility focus order issue with ActionSheet for Talkback

[ethan501]

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

1. Enable Talkback
2. Open up an action sheet
3. Swipe through the sheet
4. 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