Tree and Tree Item - Ensure ARIA roles, states, and properties are valid - (2036570419)

[dqateam]

Violation:

Ensure ARIA roles, states, and properties are valid

WCAG Reference:

• 4.1.2 Name, Role, Value

Severity:

5

Media Type:

ARIA

---

Areas for Remediation:

• Title: Tree and Tree Item - Ensure ARIA roles, states, and properties are valid - (2036570419)

• Module: Tree and Tree Item Issue There are elements with invalid ARIA role treeitem. Examples include:

• Child 1

• Child 2

• Child 3

• Grandchild 1

• Grandchild 2, etc.

User Impact Assistive technologies may be unable to parse this content.

Code Reference

<div aria-hidden="false" role="treeitem" tabindex="0" depth="1" scale="s" calcite-hydrated=""><div class="node-container" data-selection-mode="single"><div class="bullet-point" aria-hidden="true" icon="bullet-point" scale="s" calcite-hydrated=""><svg class="svg" fill="currentColor" height="100%" viewbox="0 0 16 16" width="100%" xmlns="http://www.w3.org/2000/svg"><path d="M8 6a2 2 0 1 0 0 4 2 2 0 1 0 0-4z"></path></svg></div>Child 1</div><div class="children-container" data-test-id="calcite-tree-children"></div></div>

Suggestion Ensure ARIA roles, states, and properties are valid. Many ARIA attributes can only be used on certain elements. Some can only be used in combination with other attributes. Additionally, if an attribute references an ID, that ID must be present in the page.

To detect many of these errors automatically, use the Nu Html Checker: https://validator.w3.org/nu/

Compliant Code Example

<button aria-pressed="false">Child 1</button>
(...)
<button aria-expanded="false">Child 2</button>

---

Additional Resources:

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

[geospatialem]

This seems like an invalid issue due to testing, closing per internal discussions on the component's role and state. We can reopen if others identify an issue.