Selector, MultiSelector: configurable panel empty states

[cixzhang]

Why

Both selectors hardcoded the English string No results found into their dropdown panel. It could not be translated and could not be replaced, while every neighbouring surface — CommandPalette, Typeahead — already takes the message as a prop. And Selector rendered that message only while searching, so a Selector handed zero options opened onto a completely blank panel.

What

Two ReactNode props on each component, following the CommandPalette pair (emptySearchText / emptyBootstrapText):

• emptyText — no options to show at all. Default No options.
• emptySearchText — a search query matched nothing. Default No results found.

The panel message is role="presentation" — role="listbox" only permits option/group children — so it reaches assistive tech solely through the polite live region. Everything else here follows from keeping those two channels in step. Whatever the panel shows, the region says; when the panel deliberately shows nothing, the region is silent.

• Both props feed announce() as well as the panel. A string override is spoken verbatim; a richer node falls back to the default copy rather than going silent.
• The no-options message is driven by state, not by the open event: open, not loading, no query, no options. That covers opening onto an empty list and a fetch that lands empty while the panel is already open — the open event alone misses the second, which is the common one.
• Neither message renders while isLoading, and neither is announced. The options have not arrived, so either would be a claim the component cannot make; the trigger's spinner carries that state.
• Type-to-open seeds the query through onSearchSeed, which never reached the search input's change handler and so announced nothing. The announcing half is split out and the seed path calls it, so a seeded query and a typed one behave identically.

Defaults reuse the shipped @astryx.selector.emptySearchResults / @astryx.multiSelector.emptySearchResults keys, which own both sinks now; two new keys (@astryx.selector.empty, @astryx.multiSelector.empty) cover the no-options case. The astryx-selector-empty-state / astryx-multi-selector-empty-state theme targets are unchanged.

Screenshots

Chromium, neutral theme. announced is the polite live region's text, read from the DOM at the same instant as the frame.

Selector, no options — the blank panel is the bug

Before: panel blank, nothing announced	After: No options, announced

MultiSelector, no options — search wording with no query typed

Before: No results found, nothing announced	After: No options, announced

Custom text, and what a screen reader hears

Review caught that the first commit sent custom text to the panel and the built-in string to the live region. Middle column is that commit; right column is head.

Before	First commit: panel custom, announced No results found	After: both custom

The loading boundary

A source that takes ~3s, sampled at 500ms and 4500ms. Left is still fetching, right is after it lands with zero options.

isLoading: no message, nothing announced	Landed empty: message and announcement

Typing while the fetch is still out stays silent in both channels (head__*_search_while_loading__*), and a load that lands with options shows no empty state at all (head__selector_loading_to_full__t4500).

Risk

Three visible behaviour changes, all above:

• Selector with no options used to render an empty panel; it now renders No options and announces it.
• MultiSelector with no options used to say No results found — the search wording — even with no query typed; it now says No options. A query with no matches still says No results found.
• MultiSelector with isLoading and no options used to say No results found; both components now say nothing until the options arrive.

Internal consumers of Selector (PowerSearch, Table filtering, Pagination) inherit the first change; a filled panel beats a blank one in all three.

Testing

Selector + MultiSelector: 272 passing, including twelve new cases. Each of the ten covering the announcement, the seed path and the loading behaviour was checked to fail without its change. Consumers (PowerSearch, Table, Pagination, ComplexSelector, Typeahead): 739 passing together with the two suites. tsc, eslint, prettier and check:repo clean.

Two review passes ran over this PR, and their probes are banked in probe-kit/ — selector-empty-async-strand.cjs (the loading timeline above), selector-seed-query-announce.cjs and selector-empty-state-announce.cjs. Every finding they raised is fixed here; the async probe is what turned up the fetch-lands-empty hole in the fix itself.

Note: pr-visual is red for an unrelated reason — Theme butter is not built … run pnpm build before the visual gate, which is failing the same way on other open PRs (e.g. #5475) and has a fix in flight on ci-visual-gate-core-dist.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
astryx	Ready	Preview	Aug 25, 2026 5:16am

[github-actions]

PR Analysis Report

📚 Storybook Preview

View Storybook for this PR
GitHub Pages may take up to a minute to hydrate after deploy.

🧪 Sandbox Preview

View Sandbox for this PR
GitHub Pages may take up to a minute to hydrate after deploy.

Modified Components

MultiSelector _{(@astryxdesign/core)} · View in Storybook

Metric	Before	After	Delta
Bundle Size (ESM)	N/A	N/A	N/A
Lines of Code	N/A	1558	-
Complexity	N/A	Very High (202)	-

Selector _{(@astryxdesign/core)} · View in Storybook

Metric	Before	After	Delta
Bundle Size (ESM)	N/A	N/A	N/A
Lines of Code	N/A	1659	-
Complexity	N/A	Very High (181)	-

Bundle Size Summary

Package	Size (ESM)	Size (CJS)	Gzipped
@astryxdesign/core	N/A	4.8KB	1.2KB

Accessibility Audit

Status: No accessibility violations detected.

---

_{Generated by PR Enrichment workflow | Storybook | Sandbox | View full report}