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

[QuangThuanDinh]

The problem

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

How to reproduce Related to this example: https://reactnative.dev/docs/sectionlist The DOM will 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 behavior SessionList should support group/sub-menu for each session, so that the screen reader will figure out the session title and will speak the title when focus to the item within that session.

<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>

Environment (include versions). Did this work in previous versions?

• React Native for Web (version): 0.63
• React (version): 0.63
• Browser: all

[necolas]

Please open an issue against React Native as this component is developed in that repo.

[QuangThuanDinh]

@necolas I did open a ticket for React Native team and they provide this repo cause this issue is about DOM structure renderer - which seem like React Native web only: https://github.com/facebook/react-native/issues/30724

[necolas]

I'll leave a comment there

[necolas]

In the meantime, you can use aria-labelledby to make associations between the headings and the items in the group. It won't change the fact that you can't render the group wrapper but it should be an improvement.