Demo Updates (Request from a11y team)

[scroniser]

Describe the bug

The a11y team requests a few updates on Storybook:

• radio buttons and/or checkboxes that are grouped with either role="group" or fieldset (with appropriate accessibility)
• icons that are identified with role="img" and an appropriate aria-label

How to reproduce

Examine the code on Storybook as follows: Icons:

• https://clarity.design/storybook/core/iframe.html?id=stories-icon--sizes&viewMode=story
• https://clarity.design/storybook/core/iframe.html?id=stories-icon--badges&viewMode=story
• https://clarity.design/storybook/core/iframe.html?id=stories-icon--status&viewMode=story
• https://clarity.design/storybook/core/iframe.html?id=stories-icon--status-inverse&viewMode=story

Forms (for checkboxes & radio buttons):

• https://clarity.design/storybook/core/iframe.html?id=stories-forms--form&viewMode=story
• https://clarity.design/storybook/core/iframe.html?id=stories-forms--vertical&viewMode=story
• https://clarity.design/storybook/core/iframe.html?id=stories-forms--horizontal&viewMode=story
• https://clarity.design/storybook/core/iframe.html?id=stories-forms--compact&viewMode=story
• https://clarity.design/storybook/core/iframe.html?id=stories-forms--checkout-form&viewMode=story

Steps to reproduce the behavior:

n/a

Expected behavior

Good accessibility practices are demonstrated on the aforementioned examples.

Versions

Clarity project:

• [x] Clarity Core
• [ ] Clarity Angular/UI

Clarity version:

• [ ] v3.x
• [ ] v4.x
• [x] v5.x

Framework:

• [ ] Angular
• [ ] React
• [ ] Vue
• [ ] Other:

[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.