Stepper and Stepper Item - Ensure page tabs provide state and role - (2036570232)

[dqateam]

Module:

31 Stepper and Stepper Item

Violation:

Ensure page tabs provide state and role

WCAG Reference:

• 1.4.1 Use of Color
• 4.1.2 Name, Role, Value

Instance ID:

2036570232

Severity:

7

Description:

[Issue]
There are tabs without appropriate role, and state information. Examples include:

1. Complete property
   2.Error property
   3.Active property
2. Disable property.
3. Step 1 Complete property
4. Step 2 Error property
5. Step 3 Active property
6. Step 4 Disable property.

[User Impact]
Screen reader users will be unable to determine that these controls reveal panels of content and which panel is currently revealed.

[Code Reference]

<div class="stepper-item-header" tabindex="0"><calcite-icon class="stepper-item-icon" aria-hidden="true" icon="checkCircleF" scale="s" calcite-hydrated=""></calcite-icon><div class="stepper-item-number">1.</div><div class="stepper-item-header-text"><span class="stepper-item-heading">Complete property</span><span class="stepper-item-description"></span></div></div>
(...)
<calcite-stepper-item item-title="Disabled property" disabled="" aria-expanded="false" layout="horizontal" scale="m" tabindex="-1" aria-disabled="true" calcite-hydrated="">Step 4
contains a "disabled" property.</calcite-stepper-item>

Note:

[Suggestion]
Ensure page tabs provide state and role.

For tabs, the following information is expected:

• The container for the set of tabs must have role="tablist".
• Each tab must have role="tab" and must be a descendant of the tablist element.
• Each panel container must have role="tabpanel".
• If the tablist has a visible label, the tablist element must have aria-labelledby set to the ID of the labelling element. Otherwise, the tablist element must have aria-label set to the accessible name.
• Each tab must have aria-controls set to the ID of its corresponding tabpanel.
• The selected tab must have aria-selected="true". All other tabs must have aria-selected="false".
• Tabpanel elements must have aria-labelledby set to the ID of their corresponding tab.
• If the tablist is vertically oriented, it must have aria-orientation="vertical".

[Recommended Reading]
For more information about creating accessible tab controls, please see the W3C Web Accessibility Initiative's ARIA Authoring Practices Guide: https://www.w3.org/WAI/ARIA/apg/patterns/tabpanel/

Media Type:

Page Tabs

Additional Resources:

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

[anveshmekala]

@geospatialem can we close this one in favor of #5602. The tab related roles aren't best suited for stepper component context.

[geospatialem]

Closing per Anvesh's comment above. ☝🏻