• Success Criterion 4.1.2
  • Conformance level A

Combobox Missing the ARIA Wiring for Its Open and Active State

4.1.2 — Name, Role, Value

Scenario

Setting

A podcast app's episode list

What’s wrong

Comboboxes missing aria-expanded (the open/closed state in code)/aria-activedescendant (code tracking the highlighted option) wiring so value/state never reported.

Example 

<input type="text" role="combobox" id="episodeSearch">
<ul id="episodeList" class="suggestions">
  <li class="highlighted">The Origins of Jazz</li>
  <li>Jazz in the 21st Century</li>
</ul>
<!-- no aria-expanded on the input, no aria-controls, and no aria-activedescendant
     tracking the highlighted item -->

Why it matters

A screen reader user arrowing through episode suggestions hears no change, since highlighting only moves via a CSS class.

How to test

Operate a combobox and inspect DevTools: check for aria-expanded, aria-controls, and aria-activedescendant updating as you navigate — missing wiring fails.

How to fix

Update aria-expanded when the list opens and aria-activedescendant on every arrow-key move.

<input type="text" role="combobox" id="episodeSearch"
       aria-expanded="true" aria-controls="episodeList" aria-activedescendant="opt1">
<ul id="episodeList" role="listbox">
  <li id="opt1" role="option" aria-selected="true">The Origins of Jazz</li>
  <li id="opt2" role="option" aria-selected="false">Jazz in the 21st Century</li>
</ul>

Outcome

A listener arrows to the right episode and hears it announced before pressing Enter.

Who is affected

Screen reader users searching for an episode cannot tell which suggestion is highlighted or that a list even opened.

Learn more

Related scenarios