From b5fb85d0ec17c1a02b1d4c2e373d2204342aac38 Mon Sep 17 00:00:00 2001
From: Shauna Keating <59394696+shkeating@users.noreply.github.com>
Date: Thu, 22 Feb 2024 09:40:41 -0500
Subject: [PATCH] fix: a11y: search component submit accessible naming (#2737)

Co-authored-by: Brandon Lenz <15805554+brandonlenz@users.noreply.github.com>
---
 src/components/Search/Search/Search.test.tsx        | 4 ++--
 src/components/Search/Search/Search.tsx             | 4 +++-
 src/components/Search/SearchButton/SearchButton.tsx | 4 +++-
 3 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/src/components/Search/Search/Search.test.tsx b/src/components/Search/Search/Search.test.tsx
index 7fa4b0e538..76e99ae6ac 100644
--- 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
index 5687b8bcee..9000ca07e2 100644
--- 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
index c69c4625fe..aae112b1e2 100644
--- 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>
         )}