fix(apollo-react): add accessible name to toolbox search clear button [MST-12402] - #930
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Dependency License Review
License distribution
Excluded packages
|
There was a problem hiding this comment.
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?: stringtoSearchBoxwith a safe default ("Clear search"), applied viaaria-labelon the clear button. - Updated
Toolboxto pass a localized clear-label using the existinguseSafeLinguipattern and a newtoolbox.search.clearmessage 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. |
📊 Coverage + size by packagePer-package coverage and bundle size on this PR. New-line coverage = of the source lines this PR adds or changes, the % hit by tests.
"Coverage" is each package's own |
d310992 to
f4f31e1
Compare
|
Apollo Coded App preview deployments are ready.
|
f4f31e1 to
4421183
Compare
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 4 out of 4 changed files in this pull request and generated no new comments.
Suppressed comments (2)
packages/apollo-react/src/canvas/components/Toolbox/SearchBox.tsx:79
clearButtonLabelcan be passed as an empty/whitespace string, which would makearia-labelempty again and reintroduce the unnamed-button accessibility issue. Consider falling back to the default label when the provided value is blank.
aria-label={clearButtonLabel}
packages/apollo-react/src/canvas/components/Toolbox/SearchBox.test.tsx:28
- The "no value" test queries for a button with the specific accessible name. If the label changes in the future, the test could pass even if the clear button is mistakenly rendered (but with a different name). Since
SearchBoxonly renders a single<button>(the clear button), asserting nobuttonrole is present is more robust.
render(<SearchBox {...baseProps} value="" />);
expect(screen.queryByRole('button', { name: 'Clear search' })).not.toBeInTheDocument();
Addresses review feedback on #930: the prop is applied verbatim as the clear button's aria-label, so the name now says so. Purely a rename -- the default value, behaviour and rendered output are unchanged. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01CuHYHyfQmL25YEEtZNYR5K
6d24826 to
d310992
Compare
d310992 to
4421183
Compare
…tonAriaLabel Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Storybook visual diffBaseline is the deployed main Storybook, so changes merged to main after this branch was last updated can also appear here. Logs Updated (PT): Aug 07, 2026, 04:23:03 PM |
Important
🦾 Part of the Case Management accessibility effort automated burndown
The icon-only "clear" button in the canvas
Toolboxsearch field has no accessible name. Its only child is anaria-hidden"x" icon and it carries noaria-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
clearButtonAriaLabelprop toSearchBox(default'Clear search'), applied as the button'saria-label, and hasToolboxsupply a localized value through the package's existing LinguiJS pattern. The default keeps any directSearchBoxconsumer accessible even without passing the prop, so it's fixed at the source and covers every reuse of the component.Changes
SearchBox.tsx: new optionalclearButtonAriaLabel?: stringprop (default'Clear search'), rendered asaria-labelon<button className="searchbox-clear">.Toolbox.tsx:clearSearchLabel = _({ id: 'toolbox.search.clear', message: 'Clear search' })(mirrors the existingsearchPlaceholderline viauseSafeLingui) passed toSearchBox.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. commitf26195f5; the localization pipeline fills the other locales, and the baked-inmessagedefault renders English until then).Verification
Checked in this repo's Storybook and scanned with axe-core 4.11.0 (the same engine
@storybook/addon-a11yuses), on story Apollo React/Canvas/Components/Controls/Toolbox → Default with the search field populated so the clear button renders.main)button-nameon.searchbox-clearbuttonwith no accessible namebutton "Clear search"This change adds only an
aria-label, so there is no visual delta to show — the accessibility-tree and axe results above are the proof.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.Resolves
.searchbox-clearby a live DOM probe🤖 Generated with Claude Code