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