[Accessibility] SectionList not render the group with title for each session

[QuangThuanDinh]

Description

When using SessionList, each item is rendered but don't have any associate with the header

React Native version:

Run react-native info in your terminal and copy the results here.
0.6.3

Steps To Reproduce

Related to this example: https://reactnative.dev/docs/sectionlist
The DOM render like:

<div role="header">
    <div>Main dishes</div>
</div>
<div role="menuitem">
    <div>Pizza</div>
</div>
<div role="menuitem">
    <div>Burger</div>
</div>

• Each group render 1 item for header and some items for the content. So that, all of them have equal level and the screen reader can not know the category of the menu item when focus to it.

Expected Results

SessionList should support group for each session, so that the screen reader will figure out the session title and will speak the title when focus to the session item

<div role="menuitem" aria-label="Main dishes">
    <div role="header">
        <div>Main dishes</div>
    </div>
    <div role="group" aria-label="Main dishes">
        <div role="menuitem">
            <div>Pizza</div>
        </div>
        <div role="menuitem">
            <div>Burger</div>
        </div>
    </div>
</div>

Snack, code example, screenshot, or link to a repository:

Please provide a Snack (https://snack.expo.io/), a link to a repository on GitHub, or provide a minimal code example that reproduces the problem.
You may provide a screenshot of the application if you think it is relevant to your bug report.
Here are some tips for providing a minimal example: https://stackoverflow.com/help/mcve

[github-actions]

⚠️	Missing Environment Information
ℹ️	Your issue may be missing information about your development environment. You can obtain the missing information by running react-native info in a console.

[chrisglein]

Can you run the info command and supply your version verbatim? 0.6.3 almost looks like 0.63, but isn't.

You're speaking in terms of div which makes me wonder is this a React question or a ReactNative question? Are you using ReactNative for Web? Can you provide a more standalone repro to show what you're hitting.

[github-actions]

⚠️	Missing Reproducible Example
ℹ️	It looks like your issue is missing a reproducible example. Please provide a Snack or a repository that demonstrates the issue you are reporting in a minimal, complete, and reproducible manner.

[QuangThuanDinh]

@chrisglein thank you for your response, yes, I'm using ReactNative for web.
I have a problem with the accessibility requirement, that in the SessionList, it's support the header in each session, but it's not put the items in that session to the group or subMenu, so that the screen reader will not speak the session/group title when focus to the item.

Thank you

[chrisglein]

Okay, that explains it. And I see now you're going off the Snack in the documentation, makes sense.
This repo (github.com/facebook/react-native) covers the core infrastructure of React Native that includes Android and iOS support. Anything additional like Web, Windows, or macOS support are handled by separate repositories with their own issue tracking. You'll want to open this issue on the React Native for Web repository, which is here: https://github.com/necolas/react-native-web/issues

[necolas]

The other platforms "vendor" these JS components from react-native. The RN implementations which don't provide enough flexibility around how sections are annotated with accessibility props, or for creating relationships like groups of items, or for associations between headings and their content. I don't know that it's practical for other platforms to fork all the list components to fix this, and it might actually be needed for iOS/Android too.

[necolas]

I think we should extract these list components into external packages. It's not sustainable to have these JS components in this repo if they aren't going to be maintained to address accessibility and performance issues that other platforms surface

[QuangThuanDinh]

as mentioned from Chrisglein, seem like this repo only handler the core or native device. I agree that we should do something to separate the JS components out of this