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 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.
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.
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.
The text was updated successfully, but these errors were encountered:
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 thearia-current
attribute.To Reproduce
Steps to reproduce the behavior:
.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:
The text was updated successfully, but these errors were encountered: