A combobox must declare its popup

Rule combobox-popup · Component patterns (best practice) · impact serious · Static + live

↩ Back to the rules index · WCAG cross-reference

Why it matters#

The combobox pattern exposes an expandable popup (listbox/grid/tree). Without aria-expanded the open/closed state is not conveyed, and while the combobox is expanded its aria-controls/aria-owns must resolve to the popup. A collapsed combobox may legitimately omit the reference — popups are often only added to the DOM on open.

How to fix#

Add aria-expanded to the combobox; while it is expanded, reference the popup element id with aria-controls (or aria-owns).

Example#

<div role="combobox" aria-expanded="true">Search</div>

<div><div role="combobox" aria-expanded="false" aria-controls="lb">Search</div><ul role="listbox" id="lb"></ul></div>

WCAG success criteria#

1.3.1 Info and Relationships — Level A#

Structure and relationships conveyed visually (headings, lists, tables, labels, groups) must also be available programmatically.

Understanding 1.3.1

4.1.2 Name, Role, Value — Level A#

Every UI component must expose a correct name, role, and (where relevant) state/value to assistive technology.

Understanding 4.1.2

Standards#

This rule contributes to the following standards:

WCAG A EN 301 549 Best practice

References#

• APG — Combobox