fix(apollo-react): add accessible name to toolbox search clear button [MST-12402]

[BenHorblit-UiPath]

Important

🦾 Part of the Case Management accessibility effort automated burndown

The icon-only "clear" button in the canvas Toolbox search field has no accessible name. Its only child is an aria-hidden "x" icon and it carries no aria-label, so screen readers announce it as an unnamed "button" — a WCAG 2.1 SC 4.1.2 (Name, Role, Value) failure.

The fix adds an optional clearButtonLabel prop to SearchBox (default 'Clear search'), applied as the button's aria-label, and has Toolbox supply a localized value through the package's existing LinguiJS pattern. The default keeps any direct SearchBox consumer accessible even without passing the prop, so it's fixed at the source and covers every reuse of the component.

Changes

• SearchBox.tsx: new optional clearButtonLabel?: string prop (default 'Clear search'), rendered as aria-label on <button className="searchbox-clear">.
• Toolbox.tsx: clearSearchLabel = _({ id: 'toolbox.search.clear', message: 'Clear search' }) (mirrors the existing searchPlaceholder line via useSafeLingui) passed to SearchBox.
• SearchBox.test.tsx: new co-located Vitest suite asserting the clear button's accessible name (default and custom), and that it isn't rendered when the field is empty.
• src/canvas/locales/en.json: added source string "toolbox.search.clear": "Clear search" (English source only — matches how prior canvas keys were added, e.g. commit f26195f5; the localization pipeline fills the other locales, and the baked-in message default renders English until then).

Verification

Rendered in this repo's Storybook and scanned with axe-core 4.11.0 (the same engine @storybook/addon-a11y uses), on story Apollo React/Canvas/Components/Controls/Toolbox → Default with the search field populated so the clear button renders:

Before (base main):

• axe button-name: 1 critical violation on .searchbox-clear — "Buttons must have discernible text… aria-label attribute does not exist or is empty."
• Chrome accessibility tree: button with no accessible name.

Storybook (before)	Clear button zoom (before)

After (this branch):

• axe button-name: 0 violations, 1 pass on .searchbox-clear.
• Chrome accessibility tree: button "Clear search".

Storybook (after)	Clear button zoom (after)

The only behavioral change is an added aria-label; no layout or visual impact. The new prop is additive and optional with a safe default — no breaking change.

Should fix MST-12402 and probably others.

🤖 Generated with Claude Code

[github-actions]

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

Project	Deployment	Review	Updated (PT)
apollo-design	🟢 Ready	Preview, Logs	Jul 17, 2026, 09:21:26 PM
apollo-docs	🟢 Ready	Preview, Logs	Jul 17, 2026, 09:21:26 PM
apollo-landing	🟢 Ready	Preview, Logs	Jul 17, 2026, 09:21:26 PM
apollo-vertex	🟢 Ready	Preview, Logs	Jul 17, 2026, 09:21:26 PM

[github-actions]

Dependency License Review

• ✅ 1950 package(s) scanned
• ✅ No license issues found
• ⚠️ 2 package(s) excluded (see details below)

License distribution

License	Packages
MIT	1720
ISC	89
Apache-2.0	55
BSD-3-Clause	27
BSD-2-Clause	23
BlueOak-1.0.0	8
MPL-2.0	4
MIT-0	3
CC0-1.0	3
MIT OR Apache-2.0	2
(MIT OR Apache-2.0)	2
Unlicense	2
LGPL-3.0-or-later	1
Python-2.0	1
CC-BY-4.0	1
(MPL-2.0 OR Apache-2.0)	1
Unknown	1
Artistic-2.0	1
(WTFPL OR MIT)	1
(BSD-2-Clause OR MIT OR Apache-2.0)	1
CC-BY-3.0	1
0BSD	1
(MIT OR CC0-1.0)	1
MIT AND ISC	1

Excluded packages

Package	Version	License	Reason
@img/sharp-libvips-linux-x64	1.2.4	LGPL-3.0-or-later	LGPL pre-built binary, not linked
khroma	2.1.0	Unknown	MIT per GitHub repo, missing license field in package.json

[Copilot]

Pull request overview

Improves Canvas toolbox search accessibility by giving the icon-only “clear” button a stable accessible name, while keeping the change additive and localized for Toolbox.

Changes:

• Added clearButtonLabel?: string to SearchBox with a safe default ("Clear search"), applied via aria-label on the clear button.
• Updated Toolbox to pass a localized clear-label using the existing useSafeLingui pattern and a new toolbox.search.clear message id.
• Added Vitest coverage to assert the clear button’s accessible name (default + custom) and that the button is not rendered when the input is empty.

Reviewed changes

Copilot reviewed 4 out of 4 changed files in this pull request and generated no comments.

File	Description
packages/apollo-react/src/canvas/locales/en.json	Adds the toolbox.search.clear English source string used by Toolbox.
packages/apollo-react/src/canvas/components/Toolbox/Toolbox.tsx	Provides a localized clear-button label to SearchBox.
packages/apollo-react/src/canvas/components/Toolbox/SearchBox.tsx	Introduces clearButtonLabel prop and wires it to aria-label on the clear button.
packages/apollo-react/src/canvas/components/Toolbox/SearchBox.test.tsx	Adds tests asserting the button’s accessible name behavior and conditional rendering.

[github-actions]

📊 Coverage + size by package

Per-package coverage and bundle size on this PR. New-line coverage = of the source lines this PR adds or changes, the % hit by tests.

Package	Coverage	New-line coverage	Packed (gzip)	Unpacked	vs main
@uipath/apollo-core	9.0%	—	43.82 MB	57.31 MB	±0
@uipath/apollo-react	37.2%	100.0% (1/1)	7.38 MB	28.15 MB	+307 B
@uipath/apollo-wind	40.3%	—	395.2 KB	2.57 MB	+19 B
@uipath/ap-chat	85.8%	—	43.43 MB	55.92 MB	−2 B

_{"Coverage" is each package's own coverage.include scope (e.g. apollo-core instruments only scripts/). "Packed"/"Unpacked" come from npm pack --dry-run and only cover built packages — "—" means not measured this run (package not affected / not built). "vs main" is the packed (gzipped) delta against the last successful main build (the package-sizes artifact from the Release workflow); "—" there means no main baseline was available this run. The baseline is main's latest build, not this PR's exact merge-base, so it includes any drift since the branch diverged. Packages with no vitest config are omitted.}