Shell Center Row - Ensure implicit list markup is avoided - (2036570581)

[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: Shell Center Row - Ensure implicit list markup is avoided - (2036570581)
• Module: Shell Center Row
  Pattern: List- Missing list markup.]

Issue
There is content that appears as a list but does not use list markup. Examples include:

• Add action, for display purposes only
• Layers action, for display purposes only, etc content in the left and right side panel.
• A filter-enabled value list for the item.

Occurrences
29 Shell and Shell Panel
30 Shell Center Row

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

Code Reference

<button aria-busy="false" aria-disabled="false" aria-label="Add action, for display purposes only" class="button button--text-visible"><div aria-hidden="true" class="icon-container"><calcite-icon aria-hidden="true" icon="plus" scale="s" calcite-hydrated=""></calcite-icon><div class="slot-container"><slot></slot></div></div><div class="text-container text-container--visible">Add action</div></button>
(...)
<button aria-busy="false" aria-disabled="false" aria-label="Collapse" class="button button--text-visible">...
</button>

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><button aria-busy="false" aria-disabled="false" aria-label="Add action, for display purposes only" class="button button--text-visible"><div aria-hidden="true" class="icon-container"><calcite-icon aria-hidden="true" icon="plus" scale="s" calcite-hydrated=""></calcite-icon><div class="slot-container"><slot></slot></div></div><div class="text-container text-container--visible">Add action</div></button></li>
(...)
<li><button aria-busy="false" aria-disabled="false" aria-label="Collapse" class="button button--text-visible">...
</button></li>
</ul>

---

Additional Resources:

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

[driskull]

I think we can just deprecate this component.

[geospatialem]

calcite-shell-center-row will be deprecated in the near future once #7513 is fulfilled. Closing this issue out as it will be invalid with the deprecation and eventual removal of the component.