Dropdown, Dropdown Group, Dropdown - Ensure ARIA roles, states, and properties are valid - (2047839583)

[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: Dropdown, Dropdown Group, Dropdown - Ensure ARIA roles, states, and properties are valid - (2047839583)
• Module: Dropdown, Dropdown Group, Dropdown
  Issue
  The single select is missing a role communicating what it does

User Impact
When ARIA attributes (state, roles, and properties) are inappropriately used or not used correctly, assistive technology may not correctly function as expected. Role and properties are covenants between assistive technology and the application and must be accurate for the intended purpose. Valid markup should always be used.

Code Reference

<calcite-button slot="dropdown-trigger" icon-end="hamburger" alignment="center" appearance="solid" color="blue" scale="m" width="auto" calcite-hydrated="">Single select dropdown</calcite-button>

Suggestion
Developers must use valid markup and follow the rules of the ARIA specification as well as correctly setting ARIA properties, including roles based on the intended purpose.

Compliant Code Example

Even when using custom controls for dropdowns over the native HTML select element, it is recommended that the closed state shows the current selections

Recommended Reading
For more information about creating accessible comboboxes, please see the W3C Web Accessibility Initiative's ARIA Authoring Practices Guide: https://www.w3.org/WAI/ARIA/apg/patterns/combobox/

Additional Resources:

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

[geospatialem]

Closing in favor of #4866.