[Menu] Trying to achieve accessibility with Menu, MenuList, MenuItem

[noobDev31]

Summary

Open the Menu and then clicking on arrow down key, I am not able to move to the 2nd MenuList and access the Menu Items there.
Below is reproduction of the issue involving Menu, Menu List and Menu Item -

https://stackblitz.com/edit/react-djf5hpms?file=Demo.tsx

I have multiple ways -

1. Make MenuList as div by passing
   MenuListProps={{ component: 'div' }} to the Menu component so that I don't have ul inside a ul

2. Wrapping each MenuList with li's

But they don't seem to work

Examples

https://stackblitz.com/edit/react-djf5hpms?file=Demo.tsx

Motivation

Trying to make our components accessible

Search keywords: accessiblity

[mj12albert]

@noobDev31 In your sandbox, is there a specific reason you need to nest or even have multiple MenuList components?

MenuList provides roving focus as well: https://github.com/mui/material-ui/blob/master/packages/mui-material/src/MenuList/MenuList.js#L145-L211

So when several of them are arranged like that, keyboard navigation will behave incorrectly

[noobDev31]

@noobDev31 In your sandbox, is there a specific reason you need to nest or even have multiple MenuList components?

MenuList provides roving focus as well: https://github.com/mui/material-ui/blob/master/packages/mui-material/src/MenuList/MenuList.js#L145-L211

So when several of them are arranged like that, keyboard navigation will behave incorrectly

@mj12albert yes we want to have multiple ListSubheader like below -

so that's the reason I am trying to make it work like this