fix(styles): Ensure label for submit and reset is aria compatible

bloomreach · Nov 15, 2024 · 59e612d · 59e612d
1 parent de451bd
commit 59e612d
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 10 deletions.
diff --git a/src/components/search-box/search-box.spec.tsx b/src/components/search-box/search-box.spec.tsx
@@ -48,14 +48,14 @@ describe('SearchBox', () => {
 
   describe('Rendering and Accessibility', () => {
     it('renders a search input and submit button', () => {
-      const { getByRole, getByText } = render(
+      const { getByRole, getByLabelText } = render(
         <LimitlessUIProvider>
           <SearchBox {...props} />
         </LimitlessUIProvider>,
       );
 
       expect(getByRole('textbox')).toBeInTheDocument();
-      expect(getByText(props.labels!.submit!)).toBeInTheDocument();
+      expect(getByLabelText(props.labels!.submit!)).toBeInTheDocument();
     });
 
     describe('Customized labels', () => {
@@ -78,21 +78,21 @@ describe('SearchBox', () => {
       });
 
       it('displays custom submit text when provided', () => {
-        const { getByText } = render(
+        const { getByLabelText } = render(
           <LimitlessUIProvider>
             <SearchBox {...props} />
           </LimitlessUIProvider>,
         );
-        expect(getByText(props.labels!.submit!)).toBeInTheDocument();
+        expect(getByLabelText(props.labels!.submit!)).toBeInTheDocument();
       });
 
       it('displays custom reset text when provided', () => {
-        const { getByText } = render(
+        const { getByLabelText } = render(
           <LimitlessUIProvider>
             <SearchBox {...props} />
           </LimitlessUIProvider>,
         );
-        expect(getByText(props.labels!.reset!)).toBeInTheDocument();
+        expect(getByLabelText(props.labels!.reset!)).toBeInTheDocument();
       });
     });
 
@@ -123,7 +123,7 @@ describe('SearchBox', () => {
       );
 
       const input = getByRole('textbox');
-      const button = getAllByRole('button').find((e) => e.getAttribute('type') === 'submit')
+      const button = getAllByRole('button').find((e) => e.getAttribute('type') === 'submit');
 
       fireEvent.change(input, { target: { value: 'chair' } });
       fireEvent.click(button!);

diff --git a/src/components/search-box/search-box.tsx b/src/components/search-box/search-box.tsx
@@ -36,7 +36,8 @@ export const SearchBox = forwardRef<HTMLFormElement, SearchBoxProps>(
       resetIcon,
       ...elementProps
     } = props;
-    const { changeHandler, inputValue, setInputValue, submitHandler, resetHandler } = useSearchBox(props);
+    const { changeHandler, inputValue, setInputValue, submitHandler, resetHandler } =
+      useSearchBox(props);
     const fieldName = elementProps.name || 'lui-search-box-input';
     const submitRef = useRef<HTMLButtonElement>(null);
     const searchIconRef = useRef<SVGSVGElement>(null);
@@ -88,8 +89,8 @@ export const SearchBox = forwardRef<HTMLFormElement, SearchBoxProps>(
               type="submit"
               className={clsx('lui-search-box-submit lui-search-box-button', classNames?.submit)}
               ref={submitRef}
+              aria-label={labels?.submit}
             >
-              {labels?.submit && <span className="lui-sr-only">{labels.submit}</span>}
               {submitIcon ? (
                 <span className={clsx('lui-search-box-submit-icon', classNames?.submitIcon)}>
                   {submitIcon()}
@@ -131,8 +132,8 @@ export const SearchBox = forwardRef<HTMLFormElement, SearchBoxProps>(
           <button
             type="reset"
             className={clsx('lui-search-box-reset lui-search-box-button', classNames?.reset)}
+            aria-label={labels?.reset}
           >
-            {labels?.reset && <span className="lui-sr-only">{labels.reset}</span>}
             {resetIcon ? (
               <span className={clsx('lui-search-box-reset-icon', classNames?.resetIcon)}>
                 {resetIcon()}