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
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:
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?
The text was updated successfully, but these errors were encountered:
Describe the problem
Various aria attributes that need some form of correction in examples/demos:
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.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:
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?
What is your product and what release date are you targeting?
Any other information?
The text was updated successfully, but these errors were encountered: