We detected a combobox missing a state attribute of aria-expanded.
| Field | Value |
|---|---|
| Rule code | Manual_Combobox_State_Missing |
| WCAG conformance level | A |
| WCAG success criterion | 4.1.2 Name, Role, Value |
| Must be fixed at source | No |
Description
The aria-expanded attribute is required on combobox elements to communicate the expanded/collapsed state of the associated dropdown menu. Without this attribute, users of assistive technologies cannot determine whether the dropdown is currently open or closed, creating confusion about the component's current state.
How to fix
Add the required aria-expanded attribute to your combobox element and ensure it correctly reflects the current state of the dropdown:
<div role="combobox" aria-expanded="false" aria-controls="listbox-id" aria-haspopup="listbox">
<input type="text">
</div>
The aria-expanded attribute must be dynamically updated based on user interaction. The default state should be aria-expanded="false" when the page loads if the dropdown is initially closed. This attribute is needed for screen readers to announce the current state of the combobox to users.