-
Notifications
You must be signed in to change notification settings - Fork 370
Description
Describe the problem
Various aria attributes that need some form of correction in examples/demos:
- The
nav
andul
elements that makes up the navigation in the component should have unique aria labeling - eitheraria-label
if there's no visible text label (i.e. the "Jump to section" text) oraria-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. (get clarification from design if no visible label is valid -- open issue)
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:
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?
Metadata
Metadata
Assignees
Type
Projects
Status