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

[dqateam]

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.

monday.com sync: #6365557217

[geospatialem]

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?

calcite-design-system/packages/calcite-components/src/components/stepper/stepper.tsx

Line 173 in 624c8b4

<Host aria-label={this.messages.label} role="region">

[driskull]

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

[github-actions]

cc @geospatialem, @brittneytewks

[geospatialem]

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

[geospatialem]

Related: #9147

[anveshmekala]

Additional context: there are similar bugs reported from the audit #5604 ,#5602 and the fix is installed 071dec7.

Perhaps we can use this spike to determine if tab role fits better in improving the context instead of region.

@geospatialem