[x] Explain checks on the menu child before rendering it with its appropriate props.
In this case, avoid passing custom props to native HTML elements, but they can be applied to functional components. Also, wrap all non-LI native HTML element children in li tags for consistency with the ul Menu parent.
[x] Add the separator role to the Divider component. Move it from the li element in the MenuDivider component.
[x] Check for a valid role on the menu children passed. If there is none, log a console warning.
Basis: The UI library components have roles attached to them, which helps in identifying which ones are focusable in the menu (i.e. those whose role is any of these: menuitem, menuitemradio, menuitemcheckbox) or not. This check serves as a reminder for non-library/custom components to pass a valid role.
This PR addresses feedback given here.
Tasks Done:
childrenToRender
functionnon-LI
native HTML element children inli
tags for consistency with theul
Menu parent.Divider
component. Move it from theli
element in theMenuDivider
component.menuitem
,menuitemradio
,menuitemcheckbox
) or not. This check serves as a reminder for non-library/custom components to pass a valid role.