Action Bar, Action Group and Action - Ensure implicit list markup is avoided - (2036569765)

[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: Action Bar, Action Group and Action - Ensure implicit list markup is avoided - (2036569765)

• Module: Action Bar, Action Group and Action
  Issue
  There is content that appears as a list but does not use list markup. Examples include:

• Information

• Feedback

• Layers

• Basemaps

• Collapse

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

Code Reference

<calcite-action-bar layout="vertical" calcite-hydrated="" expanded="">
 <calcite-action-group layout="vertical" calcite-hydrated="" expanded="">
   <calcite-action text="Information" icon="information" label="Information action, for display purposes only" appearance="solid" scale="m" calcite-hydrated="" text-enabled=""></calcite-action>
   <calcite-action text="Feedback" icon="mega-phone" label="Feedback action, for display purposes only" appearance="solid" scale="m" calcite-hydrated="" text-enabled=""></calcite-action>
 </calcite-action-group>
 <calcite-action-group layout="vertical" calcite-hydrated="" expanded="">
   <calcite-action text="Layers" icon="layers" label="Layers action, for display purposes only" appearance="solid" scale="m" calcite-hydrated="" text-enabled=""></calcite-action>
 </calcite-action-group>
 (...)
</calcite-action-bar>

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

Compliant Code Example

<ul layout="vertical" calcite-hydrated="" expanded="">
 <li>
   <calcite-action text="Information" icon="information" label="Information action, for display purposes only" appearance="solid" scale="m" calcite-hydrated="" text-enabled=""></calcite-action>
 </li>
 <li>
   <calcite-action text="Feedback" icon="mega-phone" label="Feedback action, for display purposes only" appearance="solid" scale="m" calcite-hydrated="" text-enabled=""></calcite-action>
 </li>
 <li>
   <calcite-action text="Layers" icon="layers" label="Layers action, for display purposes only" appearance="solid" scale="m" calcite-hydrated="" text-enabled=""></calcite-action>
 </li>
 (...)
</ul>

---

Additional Resources:

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

[geospatialem]

Next steps to conduct a research spike to determine a potential solution and estimate for implementation in late 2023/early 2024.

[macandcheese]

Propose closing as a result of discussion in #7052. These really should behave more as toolbars.

[geospatialem]

Closing per #7776 (comment) and in favor of the effort of #7052.