Tooltip - Provide a valid label for form fields - (2036570381)

[dqateam]

Module:

37 Tooltip

Violation:

Provide a valid label for form fields

WCAG Reference:

• 1.3.1 Info and Relationships
• 3.3.2 Labels or Instructions
• 4.1.2 Name, Role, Value

Instance ID:

2036570381

Severity:

10

Description:

[Issue]
There are buttons without accessible names. Examples include:

• Tooltip
• Close tooltip on click

[User Impact]
Screen reader users will be unable to determine the purpose of these buttons. Speech input users will have difficulty activating them.

[Code Reference]

<button aria-label="" class="content--slotted icon-start-empty icon-end-empty" type="button">
 (...)
</button>

Note:

[Suggestion]
Provide a valid label for form fields. This includes providing accessible names for buttons. The accessible name of a button can be set with an aria-label attribute. Good accessible names are both concise and descriptive.

[Compliant Code Example]

<button aria-label="tooltip" class="content--slotted icon-start-empty icon-end-empty" type="button">
 (...)
</button>

Media Type:

Forms

Additional Resources:

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

[geospatialem]

The test didn't include a label prop on the button, but successfully passed in other tests. Marking as not an issue, and closing.