Stepper and Stepper Item - Ensure implicit list markup is avoided - (2036570227)

dqateam commented 12 months ago

Violation:

Ensure implicit list markup is avoided

WCAG Reference:

1.3.1 Info and Relationships

Severity:

6

Media Type:

Lists

Areas for Remediation:

Title: Stepper and Stepper Item - Ensure implicit list markup is avoided - (2036570227)
Module: Stepper and Stepper Item Issue There is content that appears as a list but does not use list markup. Examples include:
Complete property
Error property
Active property
Disabled property

User Impact Screen reader users will have difficulty understanding that this content is a list.

Code Reference

<div class="stepper-item-header-text"><span class="stepper-item-heading">Complete property</span><span class="stepper-item-description"></span></div>
(...)
<div class="stepper-item-header-text"><span class="stepper-item-heading">Error property</span><span class="stepper-item-description"></span></div>
(...)
<div class="stepper-item-header-text"><span class="stepper-item-heading">Disabled property</span><span class="stepper-item-description"></span></div>

Suggestion Ensure implicit list markup is avoided. Lists must use <ul>, <ol>, <li>, <dl>, <dt>, and <dd> elements as appropriate.

Compliant Code Example

<ul>
<li><div class="stepper-item-header-text"><span class="stepper-item-heading">Complete property</span><span class="stepper-item-description"></span></div></li>
(...)
<li><div class="stepper-item-header-text"><span class="stepper-item-heading">Error property</span><span class="stepper-item-description"></span></div></li>
(...)
<li><div class="stepper-item-header-text"><span class="stepper-item-heading">Disabled property</span><span class="stepper-item-description"></span></div></li>
</ul>

Additional Resources:

Report Source: Product accessibility evaluation conducted on the Calcite Design System in August, 2022.

geospatialem commented 8 months ago

It looks like the component's role is currently a "region", do we want to explore a different role? Perhaps a "tablist" with individual stepper-items as "tab"s similar to this tabs example?

https://github.com/Esri/calcite-design-system/blob/624c8b47e9f25b16be76711f7e9fa134125cc76b/packages/calcite-components/src/components/stepper/stepper.tsx#L173

driskull commented 8 months ago

Tablist role seems appropriate here. I think this component should be refactored to implement that role.

github-actions[bot] commented 5 months ago

cc @geospatialem, @brittneytewks

geospatialem commented 5 months ago

Discussed and confirmed the role change with @SkyeSeitz - we're ready for dev. ☄️

geospatialem commented 5 months ago

Esri / calcite-design-system