diff --git a/packages/store-ui/src/molecules/SearchInput/SearchInput.test.tsx b/packages/store-ui/src/molecules/SearchInput/SearchInput.test.tsx index 7826d54055..a880498d03 100644 --- a/packages/store-ui/src/molecules/SearchInput/SearchInput.test.tsx +++ b/packages/store-ui/src/molecules/SearchInput/SearchInput.test.tsx @@ -1,4 +1,5 @@ import { render } from '@testing-library/react' +import { axe } from 'jest-axe' import React from 'react' import type { SearchInputProps } from './SearchInput' @@ -16,4 +17,12 @@ describe('SearchInput', () => { 'data-store-search-input' ) }) + + describe('Accessibility', () => { + it('should have no violations', async () => { + const { getByTestId } = render() + + expect(await axe(getByTestId('search-input'))).toHaveNoViolations() + }) + }) }) diff --git a/packages/store-ui/src/molecules/SearchInput/SearchInput.tsx b/packages/store-ui/src/molecules/SearchInput/SearchInput.tsx index dc3dd7b204..6bc2da32ff 100644 --- a/packages/store-ui/src/molecules/SearchInput/SearchInput.tsx +++ b/packages/store-ui/src/molecules/SearchInput/SearchInput.tsx @@ -1,4 +1,9 @@ -import type { FormEvent, InputHTMLAttributes, ReactNode } from 'react' +import type { + AriaAttributes, + FormEvent, + InputHTMLAttributes, + ReactNode, +} from 'react' import React, { forwardRef, useRef } from 'react' import Button from '../../atoms/Button' @@ -33,6 +38,11 @@ export interface SearchInputProps extends InputProps { * Custom icon inside the submit button. */ icon?: ReactNode + /** + * Custom aria-label for input and button. + */ + 'aria-label'?: AriaAttributes['aria-label'] + /** /** * ID to find this component in testing tools (e.g.: cypress, testing library, and jest). */ @@ -41,7 +51,13 @@ export interface SearchInputProps extends InputProps { const SearchInput = forwardRef( function SearchInput( - { onSubmit, icon, testId = 'store-search-input', ...props }, + { + onSubmit, + icon, + 'aria-label': ariaLabel = 'search', + testId = 'store-search-input', + ...props + }, ref ) { const valueRef = useRef(null) @@ -61,8 +77,8 @@ const SearchInput = forwardRef( data-testid={testId} onSubmit={handleSubmit} > - -