Allow the role of the <li> element in ActionList.LinkItem to be modified

[muskan-k]

Description

According to the role guidelines documented here, if we use the role of menu, the child link items have the role of ListItem and are unable to be changed causing accessibility violations.

The role prop is passed on to <a> instead of the parent LinkItem.

It would be nice to be able to expose a new prop to change that value.

Steps to reproduce

1. Create a ActionList with role="menu"
2. Fill it with LinkItem
3. Attempt to override the role of LinkItem to be menuitem
4. Role is not overwritten and causes a11y violations.

Version

v37.27.0

Browser

Chrome

cc: @ctmayn

[TylerJDev]

Hey @muskan-k!

I took a look at the current implementation of RefSelector and had a question regarding the semantics. I noticed that the children of the menu were list items, which is conditional on if the list is virtualized or not. I think the fix would be to remove those list items and rely solely on ActionList.Item instead. This way, role="menuitem can be passed directly to the component via props (e.g. <ActionList.Item role="menuitem" ... >).

Let me know what you think! 😁

CC: @adrianababakanian - I think the UserSelector had a similar pattern, curious what you think!