TabPanel Content Accessibility on Android's Talk Back

[yaeda]

Hello,

I'm encountering an issue with the accessibility of TabPanel content when using Android's Talk Back feature. Specifically, when the content of a TabPanel consists only text, Talk Back seems unable to focus and read the content. However, if the TabPanel includes interactive components (such as links or input fields) alongside the text, Talk Back is able to focus on and read the content without issue.

I'm wondering if this behavior is a bug or needs some accessibility options or attributes to be enabled for text-only TabPanel content to be accessible with Talk Back.

You can reproduce at the following URL:
https://react-spectrum.adobe.com/react-aria/Tabs.html.

Any guidance or recommendations on how to ensure that all content within a TabPanel, regardless of whether it includes interactive elements, is accessible with Talk Back would be greatly appreciated.

Thank you for your time and assistance.

[yihuiliao]

Hey, thanks for bringing this up! This definitely seems like a bug so would you mind creating an issue for this so we can keep track of it? I verified it myself and also tried TalkBack on this WAI example where it also did not announce the content of the TabPanel. It might be a TalkBack bug but regardless, it would be good to find a workaround and investigate a bit further.

[snowystinger]

@yihuiliao will focus still go to the tab panel at all? We do have some logic to check for interactive children

react-spectrum/packages/@react-aria/tabs/src/useTabPanel.ts

Line 35 in 4f26a4b

let tabIndex = useHasTabbableChild(ref) ? undefined : 0;

[yaeda]

@yihuiliao Thanks for your comment! #6153 is created.

[yihuiliao]

@snowystinger Based on what I’ve tested, in the case that the tab panel doesn’t have any interactive children, the virtual cursor moves to the TabPanel but it doesn’t actually announce the contents inside.