You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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?
The text was updated successfully, but these errors were encountered:
Uh oh!
There was an error while loading. Please reload this page.
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:
component
androle
as props for the sub-component, with thecomponent
default value able to remain anli
and therole
default value should be "presentation".component
prop type should match Divider (li, div, or hr), while therole
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 excepthr
since that is semantically a separator role already).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 NavItemSeparatorScreenshots
If applicable, add screenshots to help explain the issue.
What is your environment?
What is your product and what release date are you targeting?
Any other information?
The text was updated successfully, but these errors were encountered: