Skip to content

Bug - NavItemSeparator - causes axe error inside NavLists #11717

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
thatblindgeye opened this issue Mar 26, 2025 · 0 comments · Fixed by #11730
Closed

Bug - NavItemSeparator - causes axe error inside NavLists #11717

thatblindgeye opened this issue Mar 26, 2025 · 0 comments · Fixed by #11730
Assignees
Labels
Milestone

Comments

@thatblindgeye
Copy link
Contributor

thatblindgeye commented Mar 26, 2025

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?

@github-project-automation github-project-automation bot moved this to Needs triage in PatternFly Issues Mar 26, 2025
@thatblindgeye thatblindgeye moved this from Needs triage to Ready to assign in PatternFly Issues Mar 26, 2025
@thatblindgeye thatblindgeye added this to the 2025.Q2 milestone Mar 26, 2025
@thatblindgeye thatblindgeye self-assigned this Mar 31, 2025
@thatblindgeye thatblindgeye moved this from Ready to assign to PR Review in PatternFly Issues Mar 31, 2025
@github-project-automation github-project-automation bot moved this from PR Review to Done in PatternFly Issues Apr 17, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
Archived in project
Development

Successfully merging a pull request may close this issue.

1 participant