Clarity: Use aria-current="step" rather than aria-selected

[clane]

Describe the bug

[Test URL]
https://clarity-light-theme-v2-a6ykys.stackblitz.io

[WCAG 2.1 Guideline]
4.1.2 Name, Role, Value
(Level A)

[Screen Reader/Browser]
Any

[Description]
Use aria-current="step" rather than aria-selected.

[User Impact]
Assistive technologies should communicate that the element being read represents the current step in a series of steps.

[Recommendation]
Use aria-current="step" rather than aria-selected.

How to reproduce

Steps to reproduce the behavior:

1. Using a screen reader, go to the Test URL
2. Complete the first step
3. Read the button for the second step and observe that you do not hear anything that indicates that this step is the current step in a series of steps.

Expected behavior

Use aria-current="step" rather than aria-selected

Versions

App

• Angular: Unknown
• Node: Unknown
• Clarity: Unknown

Device:

• Type: any
• OS: any
• Browser: any
• Version: any

Additional notes

NA

[mathisscott]

@chlane
Does this apply to stepper and accordion as well?

[chlane]

@mathisscott Vertically displayed disclosures as seen in the stepper and accordion are best represented with aria-expanded. In these cases, when content is expanded it is implicitly current.

[github-actions[bot]]

Hi there 👋, this is an automated message. To help Clarity keep track of discussions, we automatically lock closed issues after 14 days. Please look for another open issue or open a new issue with updated details and reference this one as necessary.