Menu example has an invalid a11y tree

[devongovett]

The menu example has an invalid a11y tree because of the generic elements at the top ("Signed in as..."). The menu role can only contain menuitem or group children according to the ARIA spec, and testing in VoiceOver confirms that it is confused.

I'd recommend using a group for the menu items, and labelling it by the contents of the generic element (which should be aria-hidden to avoid an invalid tree). This will also improve announcement of the menu items, as the "Signed in as..." will also be announced when the first item is focused.

Here's a fork of the sandbox: https://codesandbox.io/s/headlessuireact-menu-example-forked-ieud4?file=/src/App.js

The a11y tree looks like this with the changes applied:

[RobinMalfait]

Hey! Thank you for your bug report!
Much appreciated! 🙏

This will be fixed in a future version, thanks!

[adamwathan]

Linking PR to clarify 😄

#228