diff --git a/packages/apollo-react/src/canvas/components/Toolbox/SearchBox.test.tsx b/packages/apollo-react/src/canvas/components/Toolbox/SearchBox.test.tsx
new file mode 100644
index 000000000..177c6c8dd
--- /dev/null
+++ b/packages/apollo-react/src/canvas/components/Toolbox/SearchBox.test.tsx
@@ -0,0 +1,29 @@
+import { describe, expect, it, vi } from 'vitest';
+import { render, screen } from '../../utils/testing';
+import { SearchBox } from './SearchBox';
+
+const baseProps = {
+ value: 'query',
+ onChange: vi.fn(),
+ clear: vi.fn(),
+};
+
+describe('SearchBox clear button accessible name', () => {
+ it('exposes a default accessible name on the clear button when a value is present', () => {
+ render();
+
+ expect(screen.getByRole('button', { name: 'Clear search' })).toBeInTheDocument();
+ });
+
+ it('uses the provided clearButtonLabel as the accessible name', () => {
+ render();
+
+ expect(screen.getByRole('button', { name: 'Clear search nodes' })).toBeInTheDocument();
+ });
+
+ it('does not render the clear button when there is no value', () => {
+ render();
+
+ expect(screen.queryByRole('button', { name: 'Clear search' })).not.toBeInTheDocument();
+ });
+});
diff --git a/packages/apollo-react/src/canvas/components/Toolbox/SearchBox.tsx b/packages/apollo-react/src/canvas/components/Toolbox/SearchBox.tsx
index 6b0b4b37e..5e40f4892 100644
--- a/packages/apollo-react/src/canvas/components/Toolbox/SearchBox.tsx
+++ b/packages/apollo-react/src/canvas/components/Toolbox/SearchBox.tsx
@@ -9,6 +9,7 @@ interface SearchBoxProps {
onChange: (value: string) => void;
clear: () => void;
placeholder?: string;
+ clearButtonLabel?: string;
inputRef?: React.RefObject;
clearButtonRef?: React.RefObject;
onNavigationKeyDown?: (e: React.KeyboardEvent) => void;
@@ -21,6 +22,7 @@ export const SearchBox = memo(function SearchBox({
onChange,
clear,
placeholder = 'Search...',
+ clearButtonLabel = 'Clear search',
inputRef: externalInputRef,
clearButtonRef,
onNavigationKeyDown,
@@ -74,6 +76,7 @@ export const SearchBox = memo(function SearchBox({
ref={clearButtonRef}
type="button"
className="searchbox-clear"
+ aria-label={clearButtonLabel}
onClick={clear}
onKeyDown={handleClearButtonKeyDown}
>
diff --git a/packages/apollo-react/src/canvas/components/Toolbox/Toolbox.tsx b/packages/apollo-react/src/canvas/components/Toolbox/Toolbox.tsx
index 4fb6c306c..8c0985009 100644
--- a/packages/apollo-react/src/canvas/components/Toolbox/Toolbox.tsx
+++ b/packages/apollo-react/src/canvas/components/Toolbox/Toolbox.tsx
@@ -164,6 +164,7 @@ export function Toolbox({
}: ToolboxProps) {
const { _ } = useSafeLingui();
const searchPlaceholder = searchPlaceholderProp ?? _({ id: 'toolbox.search', message: 'Search' });
+ const clearSearchLabel = _({ id: 'toolbox.search.clear', message: 'Clear search' });
const [items, setItems] = useState[]>(initialItems);
const [search, setSearch] = useState('');
const [searchLoading, setSearchLoading] = useState(false);
@@ -680,6 +681,7 @@ export function Toolbox({
onChange={handleSearch}
clear={clearSearch}
placeholder={searchPlaceholder}
+ clearButtonLabel={clearSearchLabel}
inputRef={searchInputRef}
clearButtonRef={clearButtonRef}
onNavigationKeyDown={handleNavigationKeyDown}
diff --git a/packages/apollo-react/src/canvas/locales/en.json b/packages/apollo-react/src/canvas/locales/en.json
index 4fcc16788..0f2905f0c 100644
--- a/packages/apollo-react/src/canvas/locales/en.json
+++ b/packages/apollo-react/src/canvas/locales/en.json
@@ -80,6 +80,7 @@
"sticky-note.toolbar.edit": "Edit",
"add-node-panel.search-nodes": "Search nodes",
"toolbox.search": "Search",
+ "toolbox.search.clear": "Clear search",
"loop-node.add-node": "Add node to loop",
"loop-node.mode.parallel": "Parallel",
"loop-node.mode.sequential": "Sequential",