Stacks icon indicating copy to clipboard operation
Stacks copied to clipboard

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

Open shainanigans opened this issue 1 year ago • 0 comments

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.

shainanigans avatar Aug 01 '22 20:08 shainanigans