Pagination - Ensure implicit list markup is avoided - (2036570528)

[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: Pagination - Ensure implicit list markup is avoided - (2036570528)
• Module: Pagination
  Issue
  There is content that appears as a list but does not use list markup. Examples include:
• "Pagination component"

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

Code Reference

<button aria-label="Previous" class="previous"><calcite-icon aria-hidden="true" icon="chevronLeft" flip-rtl="" scale="s" calcite-hydrated=""></calcite-icon></button>
<button class="page">1</button>
(...)
<button class="page">1,500</button>
<button aria-label="Next" class="next"><calcite-icon aria-hidden="true" icon="chevronRight" flip-rtl="" scale="s" calcite-hydrated=""></calcite-icon></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-label="Previous" class="previous"><calcite-icon aria-hidden="true" icon="chevronLeft" flip-rtl="" scale="s" calcite-hydrated=""></calcite-icon></button>
<button class="page">1</button></li>
(...)
<li><button class="page">1,500</button></li>
<li><button aria-label="Next" class="next"><calcite-icon aria-hidden="true" icon="chevronRight" flip-rtl="" scale="s" calcite-hydrated=""></calcite-icon></button>
</li>
<ul>

---

Additional Resources:

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

[driskull]

This one seems valid, internal shadow HTML should be more semantic.

[github-actions]

Installed and assigned for verification.

[DitwanP]

🍡 Verified on 2.9.1-next.0