feat(atomic): add an opt-in button to clear recent queries by y-lakhdar · Pull Request #8570 · coveo/ui-kit

y-lakhdar · 2026-10-05T12:56:26Z

Problem

The "Recent searches / Clear" option is the first item of the suggestion list. A screen reader announces how many suggestions are available, but pressing the Down arrow lands on the clear option instead of the first suggestion. Moving it out of the list for everyone would remove documented shadow parts, which is a breaking change.

Solution

Add an opt-in with-clear-recent-button property to atomic-search-box and atomic-commerce-search-box. When it's set, the clear option is rendered as a "Clear recent searches" button below the suggestions, which can be styled with the new recent-query-clear-button part. Tab no longer closes the suggestions while the button is displayed, so keyboard users can reach it. Clicking it clears the recent queries and puts the focus back in the search box, and pressing Escape on it closes the suggestions.

The default behavior and the recent queries components are unchanged.

Note

The property should become the default behavior in v4. It's marked with a TODO - (v4) KIT-4365.

…ons j:KIT-3954 The "Recent searches / Clear" item was the first entry of the suggestion list, so pressing the Down arrow landed on it instead of on the first suggestion announced by screen readers. atomic-search-box and atomic-commerce-search-box now render a "Clear recent searches" button below the suggestion panels. While suggestions are open, Tab in the search box focuses the button, Shift+Tab or Escape returns to the search box, and the focus goes back to the search box once the recent queries are cleared. SearchBoxSuggestions gains an optional renderActions() method so suggestion components can render buttons below the panels. The recent-query-title-item, recent-query-title-content and recent-query-title parts were removed; recent-query-clear is now on the new button, and suggestions-actions / suggestions-action parts were added. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

changeset-bot · 2026-10-05T12:56:36Z

🦋 Changeset detected

Latest commit: 59585eb

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 8 packages

Name	Type
@coveo/atomic	Minor
@coveo/atomic-react	Patch
@coveo/atomic-angular	Patch
@coveo/ui-kit-sample-atomic-commerce-hybrid	Minor
@coveo/ui-kit-sample-atomic-commerce-vite	Minor
@coveo/ui-kit-sample-atomic-search-vite	Minor
@coveo/ui-kit-sample-atomic-commerce-react	Patch
@coveo/ui-kit-sample-atomic-search-react	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

svcsnykcoveo · 2026-10-05T12:56:47Z

✅ Snyk checks have passed. No issues have been found so far.

Status	Scan Engine	Critical	High	Medium	Low	Total (0)
✅	Open Source Security	0	0	0	0	0 issues
✅	Licenses	0	0	0	0	0 issues
✅	Code Security	0	0	0	0	0 issues

💻 Catch issues earlier using the plugins for VS Code, JetBrains IDEs, Visual Studio, and Eclipse.

pkg-pr-new · 2026-10-05T13:01:45Z

@coveo/atomic

npm i https://pkg.pr.new/coveo/ui-kit/@coveo/atomic@8570

@coveo/atomic-hosted-page

npm i https://pkg.pr.new/coveo/ui-kit/@coveo/atomic-hosted-page@8570

@coveo/atomic-legacy

npm i https://pkg.pr.new/coveo/ui-kit/@coveo/atomic-legacy@8570

@coveo/atomic-react

npm i https://pkg.pr.new/coveo/ui-kit/@coveo/atomic-react@8570

@coveo/bueno

npm i https://pkg.pr.new/coveo/ui-kit/@coveo/bueno@8570

coveo.analytics

npm i https://pkg.pr.new/coveo/ui-kit/coveo.analytics@8570

@coveo/create-atomic-rollup-plugin

npm i https://pkg.pr.new/coveo/ui-kit/@coveo/create-atomic-rollup-plugin@8570

@coveo/headless

npm i https://pkg.pr.new/coveo/ui-kit/@coveo/headless@8570

@coveo/headless-react

npm i https://pkg.pr.new/coveo/ui-kit/@coveo/headless-react@8570

@coveo/quantic

npm i https://pkg.pr.new/coveo/ui-kit/@coveo/quantic@8570

@coveo/relay

npm i https://pkg.pr.new/coveo/ui-kit/@coveo/relay@8570

@coveo/shopify

npm i https://pkg.pr.new/coveo/ui-kit/@coveo/shopify@8570

@coveo/atomic-angular

npm i https://pkg.pr.new/coveo/ui-kit/@coveo/atomic-angular@8570

commit: 59585eb

chromatic-com · 2026-10-05T13:01:51Z

Tip

All tests passed and all changes approved!

🟢 UI Tests: 471 tests unchanged
🟢 UI Review: 471 stories published -- no changes
Storybook Publish: 471 stories published

github-actions · 2026-10-05T13:03:58Z

🔗 Scratch Orgs ready to test this PR:

✅ LWS Enabled: Open Org
✅ LWS Disabled: Open Org

Keep the clear option as a regular suggestion element produced by the recent queries components, and let atomic-search-box and atomic-commerce-search-box render it as a button below the suggestions. This drops the renderActions hook, the SearchBoxSuggestionAction type, the suggestion manager changes, the new shared renderer and the fixture changes. Tab no longer closes the suggestions while the button is displayed, so the focus continues in the natural order up to the button. Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>

Copilot

Note

Copilot was unable to run its full agentic suite in this review.

Copilot review overview

Review effort: Lite
Findings: 3 · 2

Open (5)

Same issue as in atomic-search-box: if element.onSelect is async, it is not awaited here, which… · New
Using @mousedown to preventDefault() won’t catch touch/pointer interactions (e.g.,… · New
If element.onSelect is async (returns a Promise), it’s currently not awaited, which can cause… · New
clearRecentQueriesElement performs a .find(...) over allSuggestionElements and is queried… · New
clearRecentQueriesElement performs a .find(...) over allSuggestionElements and is queried… · New

What changed in this PR

This PR moves the “Clear recent searches” affordance out of the suggestions list for both atomic-search-box and atomic-commerce-search-box, rendering it as a dedicated button below the suggestions and updating related parts, selectors, and tests.

Changes:

Render a dedicated “Clear recent searches” button below suggestions (and exclude it from suggestion panels / keyboard list navigation).
Adjust keyboard behavior so Tab no longer closes suggestions while the clear button is present.
Update recent-queries suggestion model/parts and refresh unit + e2e tests accordingly.

File	Description
packages/atomic/src/components/search/atomic-search-box/e2e/page-object.ts	Updates selector for the clear-recent button to use role/name.
packages/atomic/src/components/search/atomic-search-box/e2e/atomic-search-box.e2e.ts	Updates e2e flow to focus/activate the clear button via keyboard.
packages/atomic/src/components/search/atomic-search-box/atomic-search-box.ts	Renders clear button below suggestions, filters it out of panels, adjusts Tab behavior, updates parts doc.
packages/atomic/src/components/search/atomic-search-box/atomic-search-box.spec.ts	Adds unit tests for new clear-button placement/behavior.
packages/atomic/src/components/common/suggestions/recent-queries.ts	Introduces helper to detect clear element; updates clear element parts/content.
packages/atomic/src/components/common/suggestions/recent-queries.spec.ts	Updates/extends specs for new clear element part/content + predicate.
packages/atomic/src/components/commerce/atomic-commerce-search-box/e2e/page-object.ts	Updates selector for the clear-recent button to use role/name.
packages/atomic/src/components/commerce/atomic-commerce-search-box/e2e/atomic-commerce-search-box.e2e.ts	Updates e2e flow to focus/activate the clear button via keyboard.
packages/atomic/src/components/commerce/atomic-commerce-search-box/atomic-commerce-search-box.ts	Mirrors search-box changes: render button below, filter out of panels, adjust Tab behavior, update parts doc.
packages/atomic/src/components/commerce/atomic-commerce-search-box/atomic-commerce-search-box.spec.ts	Adds unit tests for new clear-button placement/behavior.
packages/atomic/src/components/commerce/atomic-commerce-search-box-recent-queries/e2e/page-object.ts	Updates selector for clear button to use role/name.
packages/atomic/src/components/commerce/atomic-commerce-search-box-recent-queries/atomic-commerce-search-box-recent-queries.spec.ts	Updates specs to reflect new `part` and removed properties/structure.
.changeset/recent-queries-clear-button.md	Documents the behavior/parts change as a minor bump.

💡 Add a code-review agent skill for context-aware, tailored reviews. Learn more in the docs.

…operty j:KIT-3954 Moving the clear option out of the list changes documented shadow parts, which is a breaking change. Keep the current behavior by default, and add the enable-clear-recent-queries-button property to atomic-search-box and atomic-commerce-search-box to render a "Clear recent searches" button below the suggestions instead. When the property is set, Tab no longer closes the suggestions while the button is displayed, and clicking the button clears the recent queries and focuses the search box again. The recent queries components and their helpers are unchanged. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

lavoiesl · 2026-10-05T21:18:35Z

+   * The button is reached with the Tab key, so the arrow keys only navigate through the suggestions.
+   */
+  @property({
+    type: Boolean,


Have you considered making this an enum between different options – defaulting to the current behaviour – rather than a boolean?

Something like clearRecentQueriesButtonPosition:

NONE

FIRST_RESULT

LAST_RESULT

AFTER_RESULTS

I don't think this is the right approach because this PR's goal is to have the button at the end of the suggestion (which is clearly the most coherent behaviour).

Giving the choice for weird button placement would open the door to bad UX

Kept the boolean: the button below the suggestions is the only layout that fixes the issue, since FIRST_RESULT and LAST_RESULT keep the option inside the list (arrow keys land on it, screen readers count it as a suggestion) and NONE would remove the ability to clear your own history. The flag only bridges until v4, where the TODO - (v4) KIT-4365 makes the button the only behavior, so an enum would carry the weaker options forward.

🤖 Addressed by Claude Code

…recent-button j:KIT-3954 Use the shorter with-* naming that Atomic uses for opting into extra UI, like with-date-picker and with-search. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

y-lakhdar · 2026-10-06T13:06:45Z

Waiting for UX

…r recent queries button j:KIT-3954 With with-clear-recent-button set, focus can move to the button inside the suggestions, but Escape only worked from the search box. Pressing Escape on the button now closes the suggestions and focuses the search box again. Also use the path alias for the button import in the commerce search box. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

…-searches

y-lakhdar temporarily deployed to pr-workflows October 5, 2026 12:56 — with GitHub Actions Inactive

coveo-code-areas-pr-checks Bot added area:atomic team:dxui labels Oct 5, 2026

y-lakhdar deployed to PR Artifacts October 5, 2026 12:57 — with GitHub Actions Active

y-lakhdar deployed to PR Artifacts October 5, 2026 12:59 — with GitHub Actions Active

y-lakhdar deployed to PR Artifacts October 5, 2026 13:07 — with GitHub Actions Active

y-lakhdar had a problem deploying to pr-workflows October 5, 2026 19:57 — with GitHub Actions Error

y-lakhdar marked this pull request as ready for review October 5, 2026 20:10

y-lakhdar requested review from a team, alexprudhomme, fbeaudoincoveo and louis-bompart and a balanced review from Copilot October 5, 2026 20:10

Copilot AI reviewed Oct 5, 2026

View reviewed changes

y-lakhdar had a problem deploying to pr-workflows October 5, 2026 20:33 — with GitHub Actions Error

y-lakhdar changed the title ~~feat(atomic): move the clear recent queries option below the suggestions~~ feat(atomic): add an opt-in button to clear recent queries Oct 5, 2026

y-lakhdar deployed to PR Artifacts October 5, 2026 20:53 — with GitHub Actions Active

y-lakhdar deployed to PR Artifacts October 5, 2026 21:07 — with GitHub Actions Active

lavoiesl reviewed Oct 5, 2026

View reviewed changes

y-lakhdar deployed to PR Artifacts October 5, 2026 21:32 — with GitHub Actions Active

refactor(atomic): rename the clear recent queries flag to with-clear-…

3b3dec9

…recent-button j:KIT-3954 Use the shorter with-* naming that Atomic uses for opting into extra UI, like with-date-picker and with-search. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

y-lakhdar temporarily deployed to pr-workflows October 6, 2026 12:08 — with GitHub Actions Inactive

y-lakhdar deployed to PR Artifacts October 6, 2026 12:09 — with GitHub Actions Active

y-lakhdar deployed to PR Artifacts October 6, 2026 12:12 — with GitHub Actions Active

y-lakhdar deployed to PR Artifacts October 6, 2026 12:21 — with GitHub Actions Active

y-lakhdar marked this pull request as draft October 6, 2026 13:11

y-lakhdar added the help wanted Extra attention is needed label Oct 6, 2026

y-lakhdar deployed to pr-workflows October 16, 2026 15:53 — with GitHub Actions Active

y-lakhdar deployed to PR Artifacts October 16, 2026 15:54 — with GitHub Actions Active

y-lakhdar had a problem deploying to PR Artifacts October 16, 2026 15:57 — with GitHub Actions Failure

Merge remote-tracking branch 'origin/main' into kit-3954-clear-recent…

59585eb

…-searches

y-lakhdar deployed to pr-workflows October 16, 2026 16:04 — with GitHub Actions Active

y-lakhdar deployed to PR Artifacts October 16, 2026 16:07 — with GitHub Actions Active

y-lakhdar deployed to PR Artifacts October 16, 2026 16:09 — with GitHub Actions Active

y-lakhdar deployed to PR Artifacts October 16, 2026 16:18 — with GitHub Actions Active

y-lakhdar added on-hold Waiting for feedback and removed help wanted Extra attention is needed labels Oct 21, 2026

Conversation

y-lakhdar commented Oct 5, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Problem

Solution

Uh oh!

changeset-bot Bot commented Oct 5, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

svcsnykcoveo commented Oct 5, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Snyk checks have passed. No issues have been found so far.

Uh oh!

pkg-pr-new Bot commented Oct 5, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

chromatic-com Bot commented Oct 5, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

All tests passed and all changes approved!

Uh oh!

github-actions Bot commented Oct 5, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Copilot review overview

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

lavoiesl Oct 5, 2026

Choose a reason for hiding this comment

Uh oh!

y-lakhdar Oct 6, 2026

Choose a reason for hiding this comment

Uh oh!

y-lakhdar Oct 16, 2026

Choose a reason for hiding this comment

Uh oh!

y-lakhdar commented Oct 6, 2026

Uh oh!

This branch was successfully deployed

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

y-lakhdar commented Oct 5, 2026 •

edited

Loading

changeset-bot Bot commented Oct 5, 2026 •

edited

Loading

svcsnykcoveo commented Oct 5, 2026 •

edited

Loading

pkg-pr-new Bot commented Oct 5, 2026 •

edited

Loading

chromatic-com Bot commented Oct 5, 2026 •

edited

Loading

github-actions Bot commented Oct 5, 2026 •

edited

Loading