search

digdir · Oct 30, 2024 · eccd23c · eccd23c
1 parent dda6728
commit eccd23c
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 4 deletions.
diff --git a/packages/react/src/components/form/Search/Search.test.tsx b/packages/react/src/components/form/Search/Search.test.tsx
@@ -13,7 +13,7 @@ describe('Search', () => {
     expect(screen.getByDisplayValue('test')).toBeDefined();
   });
 
-  test('has correct label when label is hidden', () => {
+  test('has correct aria-label when hiding label', () => {
     render({ label: 'label', hideLabel: true });
 
     expect(screen.getByLabelText('label')).toBeDefined();
@@ -48,14 +48,14 @@ describe('Search', () => {
 
   it('Focuses on search field when label is clicked and id is not given', async () => {
     const label = 'Lorem ipsum';
-    const { user } = render({ label });
+    const { user } = render({ label, hideLabel: false });
     await act(async () => await user.click(screen.getByText(label)));
     expect(screen.getByRole('searchbox')).toHaveFocus();
   });
 
   it('Focuses on search field when label is clicked and id is given', async () => {
     const label = 'Lorem ipsum';
-    const { user } = render({ id: 'some-unique-id', label });
+    const { user } = render({ id: 'some-unique-id', label, hideLabel: false });
     await act(async () => await user.click(screen.getByText(label)));
     expect(screen.getByRole('searchbox')).toHaveFocus();
   });

diff --git a/packages/react/src/components/form/Search/Search.tsx b/packages/react/src/components/form/Search/Search.tsx
@@ -7,6 +7,7 @@ import { forwardRef, useCallback, useRef, useState } from 'react';
 import type { DefaultProps } from '../../../types';
 import { omit } from '../../../utilities';
 import { Button } from '../../Button/Button';
+import { Label } from '../../Label';
 import { Paragraph } from '../../Paragraph';
 import type { FormFieldProps } from '../useFormField';
 
@@ -113,6 +114,17 @@ export const Search = forwardRef<HTMLInputElement, SearchProps>(
             className,
           )}
         >
+          {!hideLabel && (
+            <Label
+              data-size={size}
+              weight='medium'
+              htmlFor={inputProps.id}
+              className={cl('ds-search__label', hideLabel && 'ds-sr-only')}
+            >
+              <span>{label}</span>
+            </Label>
+          )}
+
           <div className={'ds-search__field'}>
             <div className={cl('ds-search__field', `ds-search--${size}`)}>
               {isSimple && (
@@ -136,7 +148,7 @@ export const Search = forwardRef<HTMLInputElement, SearchProps>(
                 {...omit(['size', 'error', 'errorId', 'readOnly'], rest)}
                 {...inputProps}
                 onChange={handleChange}
-                aria-label={label?.toString()}
+                aria-label={hideLabel ? label?.toString() : undefined}
               />
               {showClearButton && (
                 <button