Stacks
Stacks copied to clipboard
Button group does not use aria-current to indicate selected option
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:
- Go to 'the button groups documentation'
- 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.