fix: a11y: search component submit accessible naming (#2737)

Co-authored-by: Brandon Lenz <[email protected]>
trussworks · Feb 22, 2024 · b5fb85d · b5fb85d
1 parent d4b30d8
commit b5fb85d
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 4 deletions.
diff --git a/src/components/Search/Search/Search.test.tsx b/src/components/Search/Search/Search.test.tsx
@@ -47,14 +47,14 @@ describe('Search component', () => {
 
   it('renders a label', () => {
     const mockSubmit = jest.fn()
-    const { queryByLabelText } = render(
+    const { queryAllByLabelText } = render(
       <Search
         onSubmit={mockSubmit}
         label="Buscar"
         i18n={sampleLocalization}></Search>
     )
 
-    expect(queryByLabelText('Buscar')).toBeInTheDocument()
+    expect(queryAllByLabelText('Buscar')).toHaveLength(2)
   })
 
   it('does not render button text when small', () => {

diff --git a/src/components/Search/Search/Search.tsx b/src/components/Search/Search/Search.tsx
@@ -19,6 +19,7 @@ type SearchInputProps = {
   placeholder?: string
   label?: React.ReactNode
   i18n?: SearchLocalization
+  buttonAriaLabel?: string
   inputProps?: OptionalTextInputProps
 }
 
@@ -31,6 +32,7 @@ export const Search = ({
   label = 'Search',
   inputId = 'search-field',
   i18n,
+  buttonAriaLabel,
   inputProps,
   ...formProps
 }: SearchInputProps & OptionalFormProps): React.ReactElement => {
@@ -52,7 +54,7 @@ export const Search = ({
         label={label}
         defaultValue={formProps.defaultValue}
       />
-      <SearchButton size={size} i18n={i18n} />
+      <SearchButton size={size} i18n={i18n} buttonAriaLabel={buttonAriaLabel} />
     </Form>
   )
 }

diff --git a/src/components/Search/SearchButton/SearchButton.tsx b/src/components/Search/SearchButton/SearchButton.tsx
@@ -13,12 +13,14 @@ type SearchButtonProps = {
   size?: 'big' | 'small'
   className?: string
   i18n?: SearchLocalization
+  buttonAriaLabel?: string
 }
 
 export const SearchButton = ({
   size,
   className,
   i18n,
+  buttonAriaLabel,
 }: SearchButtonProps): React.ReactElement => {
   const buttonText = i18n?.buttonText || 'Search'
   const isSmall = size === 'small'
@@ -33,7 +35,7 @@ export const SearchButton = ({
   )
   return (
     <div className={classes}>
-      <Button type="submit">
+      <Button aria-label={buttonAriaLabel || buttonText} type="submit">
         {!isSmall && (
           <span className="usa-search__submit-text">{buttonText}</span>
         )}