A11y: Make search clear button keyboard accessible

[ritoban23]

Closes #32582

What I did

Fixed the search clear button keyboard accessibility issue by changing the button's visibility condition from isOpen to input. This ensures the clear button remains visible and focusable even when the search input loses focus, allowing keyboard users to tab to and activate it. Also added proper aria-label for screen readers and improved the clear functionality.

Checklist for Contributors

Testing

The changes in this PR are covered in the following automated tests:

• stories
• unit tests
• integration tests
• end-to-end tests

Manual testing

This section is mandatory for all contributions. If you believe no manual test is necessary, please state so explicitly. Thanks!

1. Run Storybook UI: cd code && yarn storybook:ui
2. Open Storybook in your browser at http://localhost:6006/
3. Type something in the search field
4. Press Tab again - the clear button should now be focused
5. Press Enter on the clear button - it should clear the search input
6. Verify the button disappears when there's no input text

Documentation

• Add or update documentation reflecting your changes
• If you are deprecating/removing a feature, make sure to update
  MIGRATION.MD

Checklist for Maintainers

• When this PR is ready for testing, make sure to add ci:normal, ci:merged or ci:daily GH label to it to run a specific set of sandboxes. The particular set of sandboxes can be found in code/lib/cli-storybook/src/sandbox-templates.ts

• Make sure this PR contains one of the labels below:

  Available labels

  • bug: Internal changes that fixes incorrect behavior.
  • maintenance: User-facing maintenance tasks.
  • dependencies: Upgrading (sometimes downgrading) dependencies.
  • build: Internal-facing build tooling & test updates. Will not show up in release changelog.
  • cleanup: Minor cleanup style change. Will not show up in release changelog.
  • documentation: Documentation only changes. Will not show up in release changelog.
  • feature request: Introducing a new feature.
  • BREAKING CHANGE: Changes that break compatibility in some way with current major version.
  • other: Changes that don't fit in the above categories.

🦋 Canary release

This PR does not have a canary release associated. You can request a canary release of this pull request by mentioning the @storybookjs/core team here.

core team members can create a canary release here or locally with gh workflow run --repo storybookjs/storybook canary-release-pr.yml --field pr=<PR_NUMBER>

Summary by CodeRabbit

• Bug Fixes
  • Sidebar search clear button now appears only when text is entered, not based on menu state.
  • Clicking the clear button fully resets the input and closes the suggestions menu for a clean restart.
  • Added an accessible aria-label to the clear button to improve screen reader support.
  • Clear action consistently closes the menu to avoid leftover suggestions.
  • Button retains familiar close-icon appearance for visual consistency.

[coderabbitai]

Walkthrough

The Search.tsx component now renders the clear button based on the presence of input text (inputValue) instead of the menu open state. The button includes an aria-label and, when activated, calls Downshift's reset({ inputValue: '' }) and then closeMenu(), replacing the previous clearSelection behavior. The button remains a CloseIcon and is only rendered while input text exists.

Sequence Diagram(s)

sequenceDiagram
  autonumber
  actor User
  participant SearchInput
  participant ClearButton
  participant Downshift
  participant Menu

  rect rgb(245,245,255)
  note right of SearchInput: Clear button visible only when inputValue !== ''
  User->>SearchInput: Type query
  SearchInput-->>ClearButton: Becomes visible
  end

  alt Activate clear (click/Enter/Space)
    User->>ClearButton: Activate
    ClearButton->>Downshift: reset({ inputValue: '' })
    Downshift-->>SearchInput: input cleared
    ClearButton->>Menu: closeMenu()
    Menu-->>User: Menu closed
    SearchInput-->>ClearButton: Hides (inputValue === '')
  else No input present
    ClearButton--x User: Not rendered / not reachable
  end

Loading

Pre-merge checks and finishing touches

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title Check	✅ Passed	The title succinctly describes the core fix by indicating that the search clear button has been made keyboard accessible, directly reflecting the primary change of adjusting visibility and focus logic for accessibility without extraneous detail.
Linked Issues Check	✅ Passed	The modifications to Search.tsx replace the visibility check tied to menu openness with input presence, add an aria-label, enable reset and menu closure on clear, and ensure the button hides when empty, fully addressing the linked issue’s objectives of keyboard reachability, screen reader support, and proper clear functionality.
Out of Scope Changes Check	✅ Passed	All changes are confined to Search.tsx and pertain directly to improving the clear button’s accessibility behavior as described in the issue, with no unrelated code or features modified.
Docstring Coverage	✅ Passed	No functions found in the changes. Docstring coverage check skipped.

✨ Finishing touches

• 📝 Generate Docstrings

🧪 Generate unit tests

• Create PR with unit tests
• Post copyable unit tests in a comment

---

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between d44b51a and 818d81f.

📒 Files selected for processing (1)

• code/core/src/manager/components/sidebar/Search.tsx (2 hunks)

🚧 Files skipped from review as they are similar to previous changes (1)

• code/core/src/manager/components/sidebar/Search.tsx

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[Sidnioulz]

Thanks for attempting a fix on this issue, @ritoban23!

Unfortunately, we've since noticed that the issue is a regression on a specific branch (a11y-consolidation) and we've found and fixed the root cause for this regression. So, I'll be closing the GitHub issue.

I want to discuss your changes to the event handler before closing the PR though. Could you please walk me through what it does?

[Sidnioulz]

This will be fixed upstream with changes to the button component, so it won't be necessary :)

[ritoban23]

@Sidnioulz hello , apologies for the late reply....I tried to explain my proposed changes to the best of my understanding hope it helps!

[Sidnioulz]

@Sidnioulz hello , apologies for the late reply....I tried to explain my proposed changes to the best of my understanding hope it helps!

Absolutely, thank you for this contribution!

[nx-cloud]

View your CI Pipeline Execution ↗ for commit 6116541

Command	Status	Duration	Result
nx run-many -t build --parallel=3	✅ Succeeded	48s	View ↗

---

☁️ Nx Cloud last updated this comment at 2025-10-13 19:20:42 UTC