[material-ui][Menu] Several menu items inside a component are not accessible about material-ui

[danilo-leal]

Hey there, @christianvuerings; thanks for opening the issue. I'm curious about why you'd want to create a wrapper component for multiple menu items? Maybe it's me, but I don't recall having seen this pattern and can understand how it would affect accessibility.

[christianvuerings]

@danilo-leal we have a Menu component that's shared across multiple apps but the menu items inside of it are different. Any suggestions as to how we might fix this in a different way?

We did noticed that setting autoFocus on the first MenuItem is a way to workaround the issue.

[mdelez]

@christianvuerings isn't the issue that your method is adding a fragment wrapper around the MenuItems? You can see here in this example that the arrow functionality also breaks if you simply wrap in the content of the Menu in a fragment. Wouldn't it be more elegant to have an array of items and then add them with a for loop inside the menu?

[christianvuerings]

@mdelez that's correct, going to close this issue for now. If anyone else runs into this issue, you can use an array of items & map over them instead.