Shell and Shell Panel - Avoid inappropriate use of ARIA roles, states, and properties - (2036570593)

[dqateam]

Violation:

Avoid inappropriate use of ARIA roles, states, and properties

WCAG Reference:

• 4.1.2 Name, Role, Value

Severity:

5

Media Type:

ARIA

---

Areas for Remediation:

• Title: Shell and Shell Panel - Avoid inappropriate use of ARIA roles, states, and properties - (2036570593)
• Module: Shell and Shell Panel
  Pattern: ARIA - Inappropriate use of aria attribute-role menu, menuitemcheckbox ]

Issue
The list item elements of the "A filter-enabled value list" section. with inappropriate use of aria-label, menu, menuitemcheckbox ,aria-busy,etc attributes.

Occurrences
29 Shell and Shell Panel
30 Shell Center Row

User Impact
When inappropriate ARIA roles, states, and/or properties are used, screen reader users will mistake these elements for other control structures or the use may prevent users of assistive technology from interacting with the control.

Code Reference

<calcite-value-list multiple="" aria-busy="false" role="menu" calcite-hydrated=""> <calcite-value-list-item label="Item 1" description="Lightning bolt" value="lightning" id="calcite-value-list-item-ffbab611-0e05-e1af-8c17-a025cabef213" calcite-hydrated="">
           (...)
<label aria-label="Item 1" class="label" tabindex="0"><div aria-checked="true" class="text-container" role="menuitemcheckbox"><span class="title">Item 1</span><span class="description">Lightning bolt</span></div></label>

Suggestion
Developers must avoid inappropriate use of ARIA roles, states, and/or properties. Remove any unnecessary ARIA attributes such as aria-label, menu, menuitemcheckbox ,aria-busy, aria-checked, aria-expanded and aria-labelledby used on section element.

Compliant Code Example

<calcite-value-list multiple="" calcite-hydrated=""> <calcite-value-list-item label="Item 1" description="Lightning bolt" value="lightning" id="calcite-value-list-item-ffbab611-0e05-e1af-8c17-a025cabef213" calcite-hydrated="">
           (...)
<div class="text-container"><span class="title">Item 1</span><span class="description">Lightning bolt</span></div>

---

Additional Resources:

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

[macandcheese]

This seems unrelated to Shell or Shell Panel - referenced code is not part of these components. Could we close this one?

[geospatialem]

The issue refers to our deprecated value-list component, closing as no efforts are planned at this time.