Skip to content
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

Bug - JumpLinks - aria attributes need correcting #11395

Open
thatblindgeye opened this issue Jan 9, 2025 · 0 comments
Open

Bug - JumpLinks - aria attributes need correcting #11395

thatblindgeye opened this issue Jan 9, 2025 · 0 comments

Comments

@thatblindgeye
Copy link
Contributor

Describe the problem
Various aria attributes that need some form of correction in examples/demos:

  • The nav and ul elements that makes up the navigation in the component should have unique aria labeling - either aria-label if there's no visible text label (i.e. the "Jump to section" text) or aria-labelledby to point to that visible text. This would require providing unique label text for the 'main' jump links, or providing unique nav text if there are nested lists so that the nested lists could be labeled by its parent item.
  • For the expandable implementation, the toggle button shouldn't have an aria-label if there's visible text to use. This will be confusing since the aria-label text isnt visible anywhere and doesn't match the text actually used in the button. In react it is possible to have an expandable JumpLinks without a text label in which an aria-label would make sense, but this depends if we intended that to be supported -- if not, we should remove the ability to provide an aria-label to the toggle and require the label prop when the JumpLinks are expandable.

How do you reproduce the problem?
Go to the JumpLinks examples and navigate with VoiceOver, including opening the rotor menu to show a list of all nav and lists on a page. Notice how confusing it can be to navigate when there are multiple on a page:
Image
Image

Also navigate to the expandable toggle example with VoiceOver and notice the announced text doesn't match the visible text label.

Expected behavior
Navs and lists would have unique labeling when multiple exist on a page, and the expandable toggle button's accessible name isn't overridden by aria-label.

Is this issue blocking you?
List the workaround if there is one.

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?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
Status: Needs triage
Development

No branches or pull requests

1 participant