Dual-layer selected value

Test solutions

Interactive demos only — try both patterns side by side. Open the other tabs for explanation, static states, and handoff notes.

A · Dual-layer (type in trigger)

Focus keeps the avatar and shows a caret in the name. Full chrome hides when you type to filter. Keys: ↓ ↑ Enter Esc

Person

Choose a person. Type to search.

On focus: “Person, Julia Martinez, combobox”

B · Nested search (start icon)

Open moves focus into search. Selected value shows start icon + label. Keys: Enter/↓ open · ↑/↓ · Esc

Channel

Where should we send updates?

1. The problem with the original dropdown

Before the 2026-06-24 accessibility fix, searchable single-select showed a rich selected value (icon / avatar / custom renderer) as a visual overlay on top of an empty <input role="combobox">.

What users saw

Person

Looks selected. Avatar + name are painted over the field.

What assistive tech heard

Person

（input value empty）

“Person, combobox, blank”

WCAG 4.1.2 Name, Role, Value — value was not programmatically determinable.

Original failure mode Sighted users trusted the overlay. Screen reader users were told the field was empty. That is the bug engineering correctly fixed by putting the selected label string into the input’s real value.

What changed in the fix (and the new trade-off)

Aspect	Before (overlay)	After (value in input)
Input value after select	Empty	Selected label
How selection is shown	Visual overlay over empty field	Inside the input
Screen reader on focus	“… blank”	“… Julia Martinez”
Collapsed selected value	Rich (icon / avatar / valueRenderer)	Text-only

Current product gap Accessibility is fixed, but collapsed state drops startElement, avatars, end elements, and searchable valueRenderer. Dual-layer restores the rich collapsed look without emptying the input.

2. Solution: dual-layer selected value

Keep engineering’s rule — the selected label lives in the native input — and add a decorative rich layer for sighted users. Never go back to an empty input.

Layer 1 · AT

input.value = "Julia Martinez"
Screen readers announce the real value. Meets WCAG 4.1.2.

Layer 2 · Visual

Avatar + label painted over the field (aria-hidden="true", pointer-events none). Input text is visually transparent while selected — not removed.

Try it live Interactive dual-layer demo is on the Test solutions tab (first tab).

Static stages

1 · Default (empty)

Person

Select a person

Placeholder only. Visible label remains.

2 · Collapsed selected (rich)

Person

Julia Martinez

Avatar visible. value still = “Julia Martinez”.

3 · Filtering (rich hidden)

Person

Jul

JM Julia Martinez ✓
JL Jordan Lee

User is editing a query — show real input text, hide value chrome.

4 · Reopen with selection

Person

Julia Martinez

JL Jordan Lee
JM Julia Martinez ✓
SO Sam Okonkwo

Full list on reopen (per eng behavior). Selected option marked visually + aria-selected.

3. Why dual-layer works vs the documented problems

Mapped directly to the issues called out in the component docs / change notes.

Problem from screenshots / docs	Why dual-layer addresses it
SR announced “blank” when selection was only an overlay on an empty input (4.1.2).	Input is never emptied to show chrome. `value` stays the label. Overlay is decorative only.
Native input can only hold a string — so icons were dropped after the fix.	True for the value. Icons live in a separate visual layer; they don’t need to be inside the string.
Collapsed lost startElement / avatar / valueRenderer for searchable selects.	Collapsed can look rich again. Renderer = visual mirror synced to the same label string AT reads.
helperText must stay tied via `aria-describedby` (1.3.1).	Unchanged — dual-layer doesn’t replace labeling or description wiring.
Focus must remain on the input after select.	Same editable combobox model; focus stays on the field; rich layer has `pointer-events: none`.
Type to filter / clear text restores full list.	On type, hide rich layer and show filter string. Behavior matches eng’s interaction table.

Key distinction Old (broken): rich overlay + empty input → blank.
Dual-layer (proposed): rich overlay + filled input → icons for sighted users, value for AT.

Caret / cursor detail Collapsed (unfocused): avatar + label overlay; caret hidden. On focus: avatar stays; overlay label hides so the real input text and caret show beside the avatar (no caret-through-overlay). On type / filter: avatar hides too; field is plain editable text.

What this does not claim

Complex interactive content inside the collapsed value (links, nested buttons) — still out of scope; keep those in the list.
End suffixes / heavy custom layouts may still be list-only if they can’t sync cleanly to a single label string.
Implementation needs QA: high contrast, zoom, VoiceOver/NVDA, mobile caret behavior.

4. Nested-search pattern (with start icon) — accessible version

Matches the design frame: trigger field + popup with its own search row (magnifying-glass start icon) and option list. Below is the same layout made accessible — not the broken “focus stays on the outer field while typing happens in a second input” version.

What we fix vs the raw frame Visible label (not placeholder-only) · selected value shows a real start icon + text with an accessible name · on open, focus moves into search · search is labeled and is not a list option · clear control named · Esc restores focus to the trigger.

Try it live Interactive nested-search demo is on the Test solutions tab (first tab).

Static states (aligned to the design)

Default

Channel

Select a channel

Where should we send updates?

Hover

Channel

Select a channel

Where should we send updates?

Active (search focused)

Channel

Select a channel

Focus is in the search field (blue ring), not left on the outer trigger.

Selected (start icon)

Channel

Email

Where should we send updates?

“Channel, Email, button” (name includes value; icon decorative)

Accessibility changes applied

When to use this vs dual-layer Use nested search when the design requires a dedicated search row in the menu (and rich start icons in the closed field as real DOM). Use dual-layer when users should type to filter in the same field as the value (editable combobox).

5. Handoff checklist

When selected and not filtering: set input.value to option label; show decorative startElement / avatar with aria-hidden="true".
Visually hide input text (e.g. transparent) — do not clear value.
On focus with selection: keep avatar; show real input text + caret (hide overlay label). On type / filter: hide full rich layer.
On select / blur with selection (and not filtering): restore rich layer; keep focus on input.
Keep existing props: label, helperText + aria-describedby, clearAriaLabel, noOptionsMessage.
Prefer aria-haspopup="listbox" when the popup is a listbox (align with APG); confirm against current dialog markup.
Document for Storybook: “Searchable collapsed value may look rich; accessible value is always the label string.”
If using nested search (section 4): on open move focus to filter input; trigger name includes selected label; start icons aria-hidden; search not an option.

Recommendation Prefer dual-layer when filtering stays in the trigger field. Use the nested-search pattern when the design requires a search row in the menu and real start icons in the closed field — with the focus and naming rules above.