Skip to content

UI: Add Combobox and Autocomplete Status - #82195

Open
mirka wants to merge 8 commits into
trunkfrom
add-combobox-autocomplete-status
Open

UI: Add Combobox and Autocomplete Status#82195
mirka wants to merge 8 commits into
trunkfrom
add-combobox-autocomplete-status

Conversation

@mirka

@mirka mirka commented Aug 28, 2026

Copy link
Copy Markdown
Member

What?

Adds Combobox.Status and Autocomplete.Status subcomponents that wrap the Base UI Status primitive.

This PR does not add Status to higher-level components such as SearchableChipSelect or SelectControl. Those can take it in a follow-up.

Why?

Autocomplete and Combobox had no way to announce async list status.

How?

Thin wrappers matching Empty.

Tests cover ref forwarding. Keep-mounted live region behavior is Base UI, not something we retest here.

Testing Instructions

  1. Open Storybook to Design System / Components / Form / Primitives / Autocomplete / Async Items.
  2. Type in the input.
  3. Confirm a spinner and "Loading…" appear in the popup, with no options listed, then matching results replace the status.
  4. Open Combobox / Async Items.
  5. Activate the trigger.
  6. Confirm a spinner and "Loading…" appear, then the item list (Apple first).
  7. Close and reopen the popup to see the loading state again.
  8. In the inspector, confirm the role="status" node stays in the DOM after the message clears.

@github-actions github-actions Bot added the [Package] UI /packages/ui label Aug 28, 2026
@github-actions

github-actions Bot commented Aug 28, 2026

Copy link
Copy Markdown

Size Change: +59 B (0%)

Total Size: 7.92 MB

📦 View Changed
Filename Size Change
build/scripts/block-editor/index.min.js 478 kB +59 B (+0.01%)

compressed-size-action

@github-actions

github-actions Bot commented Aug 28, 2026

Copy link
Copy Markdown

Flaky tests detected in 3f7eca6.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/33426202645
📝 Reported tests:

As a user I want to be able to customize the navigation overlay with styled content in /test/e2e/specs/site-editor/navigation-overlay-template-part.spec.js, passed after 2 failed attempts.
Error: apiRequestContext.fetch: socket hang up
Call log:
  - → GET http://localhost:8889/wp-json/wp/v2/templates
    - user-agent: Playwright/1.62.1 (x64; ubuntu 24.04) node/20.20 CI/1
    - accept: */*
    - accept-encoding: gzip,deflate,br
    - X-WP-Nonce: cb6c48ef31
    - cookie: wordpress_test_cookie=WP%20Cookie%20check; wordpress_logged_in_23778236db82f19306f247e20a353a99=admin%7C1788374887%7CqkXZgeZ2tqDsa4pLXNLG22GYkIN08ZiVvp6x5s3sb4F%7Cbba0b07c257c53a66e6ca43aeeb238f3e977ede30a4425b9e610bd09279e2d1e; wp-settings-time-1=1788203129

    at RequestUtils.rest (/home/runner/work/gutenberg/gutenberg/packages/e2e-test-utils-playwright/src/request-utils/rest.ts:112:39)
    at RequestUtils.deleteAllTemplates (/home/runner/work/gutenberg/gutenberg/packages/e2e-test-utils-playwright/src/request-utils/templates.ts:35:31)
    at /home/runner/work/gutenberg/gutenberg/test/e2e/specs/site-editor/navigation-overlay-template-part.spec.js:57:22
TimeoutError: locator.click: Timeout 10000ms exceeded.
Call log:
  - waiting for getByRole('button', { name: 'Create overlay', exact: true })

    at createNavigationOverlay (/home/runner/work/gutenberg/gutenberg/test/e2e/specs/site-editor/navigation-overlay-template-part.spec.js:44:28)
    at /home/runner/work/gutenberg/gutenberg/test/e2e/specs/site-editor/navigation-overlay-template-part.spec.js:113:4

@mirka mirka self-assigned this Aug 28, 2026
@mirka mirka added the [Type] Enhancement A suggestion for improvement. label Aug 31, 2026
@mirka
mirka marked this pull request as ready for review August 31, 2026 19:55
@mirka
mirka requested a review from a team as a code owner August 31, 2026 19:55
@mirka
mirka requested a review from Mamaduka August 31, 2026 19:55
@github-actions

github-actions Bot commented Aug 31, 2026

Copy link
Copy Markdown

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: mirka <0mirka00@git.wordpress.org>
Co-authored-by: ciampo <mciampini@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

@ciampo ciampo left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM 🚀

Comment on lines +42 to +44
<Autocomplete.Status ref={ statusRef }>
Loading...
</Autocomplete.Status>

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should we also check that the rendered node has role="status", aria-live="polite", and aria-atomic="true"? Or do we delegate / trust base ui on this? (the current ref assertion would also pass for a plain <div>, so it does not protect the accessible behavior these subcomponents add)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

[Package] UI /packages/ui [Type] Enhancement A suggestion for improvement.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants