Tooltip - Ensure ARIA roles, states, and properties are valid - (2036570382)

[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: Tooltip - Ensure ARIA roles, states, and properties are valid - (2036570382)
• Module: Tooltip
  Issue
  There are tooltip elements with unnecessary ARIA attributes.

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

Code Reference

<calcite-tooltip label="Tooltip for test 1" placement="auto" reference-element="tooltip-auto" aria-hidden="true" aria-label="Tooltip for test 1" aria-live="polite" id="calcite-tooltip-3695e51c-0f68-96d7-ef75-1031b0671f2e" role="tooltip" offset-distance="6" offset-skidding="0" calcite-hydrated="" data-placement="right" style="position: absolute; top: 0px; left: 0px; transform: translate(267px, 217px);" calcite-hydrated-hidden="">
 <p>You have accessed the first test showcasing <code>calcite-tooltip</code>.</p>
</calcite-tooltip>

Suggestion
Ensure ARIA roles, states, and properties are valid. Remove aria-label attribute from <calcite-tooltip> elements.

Compliant Code Example

<calcite-tooltip label="Tooltip for test 1" placement="auto" reference-element="tooltip-auto" aria-hidden="true" aria-live="polite" id="calcite-tooltip-3695e51c-0f68-96d7-ef75-1031b0671f2e" role="tooltip" offset-distance="6" offset-skidding="0" calcite-hydrated="" data-placement="right" style="position: absolute; top: 0px; left: 0px; transform: translate(267px, 217px);" calcite-hydrated-hidden="">
 <p>You have accessed the first test showcasing <code>calcite-tooltip</code>.</p>
</calcite-tooltip>

---

Additional Resources:

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

[driskull]

The label prop is deprecated so not sure this one is valid.

[geospatialem]

Agreed, this was mitigated in #6329.