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

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(<SearchBox {...baseProps} />);
+
+    expect(screen.getByRole('button', { name: 'Clear search' })).toBeInTheDocument();
+  });
+
+  it('uses the provided clearButtonLabel as the accessible name', () => {
+    render(<SearchBox {...baseProps} clearButtonLabel="Clear search nodes" />);
+
+    expect(screen.getByRole('button', { name: 'Clear search nodes' })).toBeInTheDocument();
+  });
+
+  it('does not render the clear button when there is no value', () => {
+    render(<SearchBox {...baseProps} value="" />);
+
+    expect(screen.queryByRole('button', { name: 'Clear search' })).not.toBeInTheDocument();
+  });
+});

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<HTMLInputElement | null>;
   clearButtonRef?: React.RefObject<HTMLButtonElement | null>;
   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}
           >

packages/apollo-react/src/canvas/components/Toolbox/Toolbox.tsx

@@ -164,6 +164,7 @@ export function Toolbox<T>({
 }: ToolboxProps<T>) {
   const { _ } = useSafeLingui();
   const searchPlaceholder = searchPlaceholderProp ?? _({ id: 'toolbox.search', message: 'Search' });
+  const clearSearchLabel = _({ id: 'toolbox.search.clear', message: 'Clear search' });
   const [items, setItems] = useState<ListItem<T>[]>(initialItems);
   const [search, setSearch] = useState('');
   const [searchLoading, setSearchLoading] = useState(false);
@@ -680,6 +681,7 @@ export function Toolbox<T>({
           onChange={handleSearch}
           clear={clearSearch}
           placeholder={searchPlaceholder}
+          clearButtonLabel={clearSearchLabel}
           inputRef={searchInputRef}
           clearButtonRef={clearButtonRef}
           onNavigationKeyDown={handleNavigationKeyDown}

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",