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

[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 - (2047835829)
• Module: Dropdown, Dropdown Group, Dropdown
  Issue
  When a control is marked disabled, aria-disabled can cause confusion.

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

<div calcite-hydrated="" aria-disabled="true" tabindex="-1" type="click" scale="m" placement="bottom-start" disabled=""><div class="calcite-dropdown-trigger-container" id="calcite-dropdown-b6ef2aa8-d515-5027-6318-61410cda72be-menubutton"><div icon-end="hamburger" appearance="outline" slot="dropdown-trigger" alignment="center" color="blue" scale="m" width="auto" calcite-hydrated=""><button aria-label="" class="content--slotted icon-start-empty" type="button"><span class="content">Disabled</span><div class="icon icon--end" aria-hidden="true" icon="hamburger" 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=""></path></svg></div></button></div></div><div aria-hidden="true" class="calcite-dropdown-wrapper" data-placement="top-start" style="visibility: hidden; pointer-events: none; position: absolute; top: 0px; left: 0px; transform: translate(289px, 1009px);"><div aria-labelledby="calcite-dropdown-b6ef2aa8-d515-5027-6318-61410cda72be-menubutton" class="calcite-dropdown-content calcite-floating-ui-anim" id="calcite-dropdown-b6ef2aa8-d515-5027-6318-61410cda72be-menu" role="menu" style="min-width: 107px;"><div hidden="">

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

This DIV does not need an aria-disabled attribute, as it has a disabled attribute

---

Additional Resources:

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

[geospatialem]

Closing in favor of the epic across components, #7775.