add htmlFor to connect Label to Search component

Altinn · Jan 7, 2025 · f2cc3c9 · f2cc3c9
1 parent 02032b5
commit f2cc3c9
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 6 deletions.
diff --git a/frontend/app-development/features/textEditor/TextEditor.test.tsx b/frontend/app-development/features/textEditor/TextEditor.test.tsx
@@ -55,7 +55,9 @@ describe('TextEditor', () => {
     renderTextEditor();
 
     const search = '1';
-    const searchInput = screen.getByRole('searchbox');
+    const searchInput = screen.getByRole('searchbox', {
+      name: textMock('text_editor.search_for_text'),
+    });
     await user.type(searchInput, search);
 
     expect(mockSetSearchParams).toHaveBeenCalledWith({ search });

diff --git a/frontend/libs/studio-components/src/components/StudioSearch/StudioSearch.test.tsx b/frontend/libs/studio-components/src/components/StudioSearch/StudioSearch.test.tsx
@@ -18,6 +18,13 @@ describe('StudioSearch', () => {
   it('should allow custom attributes', () => {
     testCustomAttributes(renderTestSearch, getSearchBox);
   });
+
+  it('should find search component with label name', () => {
+    const label = 'Search for something';
+    renderTestSearch({ label });
+    const search = screen.getByRole('searchbox', { name: label });
+    expect(search).toBeInTheDocument();
+  });
 });
 
 const renderTestSearch = (

diff --git a/frontend/libs/studio-components/src/components/StudioSearch/StudioSearch.tsx b/frontend/libs/studio-components/src/components/StudioSearch/StudioSearch.tsx
@@ -10,8 +10,8 @@ const StudioSearch = forwardRef<HTMLInputElement, StudioSearchProps>(
     const showLabel = !!label;
     return showLabel ? (
       <StudioFieldset legend={legend}>
-        <Label>{label}</Label>
-        <Search {...rest} size={size} ref={ref} />
+        <Label htmlFor='searchId'>{label}</Label>
+        <Search {...rest} id='searchId' size={size} ref={ref} />
       </StudioFieldset>
     ) : (
       <Search {...rest} size={size} ref={ref} />

diff --git a/...ntLibrary/LibraryBody/pages/CodeListPage/CodeListsActionsBar/CodeListsActionsBar.test.tsx b/...ntLibrary/LibraryBody/pages/CodeListPage/CodeListsActionsBar/CodeListsActionsBar.test.tsx
@@ -15,9 +15,9 @@ describe('CodeListsActionsBar', () => {
 
   it('renders the search field with label', () => {
     renderCodeListsActionsBar();
-    const searchFieldLabelText = screen.getByText(
-      textMock('app_content_library.code_lists.search_label'),
-    );
+    const searchFieldLabelText = screen.getByRole('searchbox', {
+      name: textMock('app_content_library.code_lists.search_label'),
+    });
     expect(searchFieldLabelText).toBeInTheDocument();
   });