Bug - NavItemSeparator - causes axe error inside NavLists

[thatblindgeye]

Describe the problem
A NavItemSeparator raises an axe error when used inside a NavList, due to it having role="separator" (from the Divider component being used) and NavList's <ul> expecting only <li>/role="listitem" children. This was raised during 6.2 testing in OCP Console.

How do you reproduce the problem?
Go to a Nav example and add a NavItemSeparator between 2 NavItems, then inspect the page and run a full page scan with axe. You should get the error "Certain ARIA roles must contain particular children"

Expected behavior
Axe doesn't have this error raised. Ideally we should:

• Create an interface for NavItemSeparator and explicitly expose props
• We should exposecomponent and role as props for the sub-component, with the component default value able to remain an li and the role default value should be "presentation".
• The component prop type should match Divider (li, div, or hr), while the role prop type should probably only be "presentation" and "separator" (Divider handles logic to apply this role, and will only apply it if the component is anything except hr since that is semantically a separator role already).
• If we can, we should also think about exposing the role prop in Divider as well, with the same types as the above bullet and applying it on line ~53 of Divider code (where we're hardcoding the "separator" role)

Is this issue blocking you?
No, it can be worked around by manually passing a role to NavItemSeparator

Screenshots
If applicable, add screenshots to help explain the issue.

What is your environment?

• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

What is your product and what release date are you targeting?

Any other information?