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}
>
-
-