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

Button group does not use aria-current to indicate selected option #1045

Closed
shainanigans opened this issue Aug 1, 2022 · 0 comments · Fixed by #1066
Closed

Button group does not use aria-current to indicate selected option #1045

shainanigans opened this issue Aug 1, 2022 · 0 comments · Fixed by #1066

Comments

@shainanigans
Copy link

Describe the bug
The currently selected item in a button group gets a different visual styling by way of the .is-selected class, but this is not enough for screen reader users. The currently selected item should also get the aria-current attribute.

To Reproduce
Steps to reproduce the behavior:

  1. Go to 'the button groups documentation'
  2. Note that the only difference between a selected item and the others is the .is-selected class.

Expected behavior
When the aria-current attribute is present, a screen reader will read out this information to the user.

Additional context
This additional information came from the Deque audit:

RULE :
The name, role, value, states, and properties of user interface components MUST be programmatically determinable by assistive technologies.

HOW TO FIX:
Fix this issue by using the aria-current attribute to indicate which element is the current item within a container or set of related elements, such as the currently selected page, step, location, date, or time.

REFERENCE:
WAI-ARIA Recommendation: https://www.w3.org/TR/wai-aria-1.1/#aria-current

BACKGROUND:
States and properties are attributes used to convey essential information about an element to screen readers and other assistive technologies. Some roles require certain state and property information - such as the checked/unchecked state of a checkbox. Native HTML elements provide those required states and properties, so nothing more needs to be done. If you create a custom version of a native HTML element or a custom control or widget that does not have a native HTML equivalent, you must add the relevant states and properties using ARIA.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging a pull request may close this issue.

1 participant