fix: icon abandoning parent (#2699)

resolves #2696

This PR makes `hideLabel` work weird in some form components. This will
be looked at when we refactor these, as this has not been done yet. The
position relative we added makes our `sr-only` class not set its
position absolute.

.changeset/blue-stingrays-heal.md

@@ -0,0 +1,5 @@
+---
+"@digdir/designsystemet-css": patch
+---
+
+Accordion: Fix chevron abandoning parent in scroll container

.changeset/slow-impalas-vanish.md

@@ -0,0 +1,5 @@
+---
+"@digdir/designsystemet-css": patch
+---
+
+Label: Fix icon abandoning parent in scroll container

packages/css/accordion.css

@@ -76,6 +76,7 @@
     gap: var(--dsc-accordion-chevron-gap);
     outline: none;
     padding: var(--dsc-accordion-padding);
+    position: relative;
 
     @composes ds-focus from './base/base.css';
 

packages/css/label.css

@@ -6,6 +6,7 @@
 
   font-weight: var(--ds-font-weight-medium);
   padding-inline-start: var(--dsc-label--readonly) calc(var(--dsc-label-icon-size) + var(--dsc-label-gap));
+  position: relative;
 
   &::before {
     background: currentcolor;

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();
   });

packages/react/src/components/form/Search/Search.tsx

@@ -114,7 +114,7 @@ export const Search = forwardRef<HTMLInputElement, SearchProps>(
             className,
           )}
         >
-          {label && (
+          {!hideLabel && (
             <Label
               data-size={size}
               weight='medium'
@@ -148,6 +148,7 @@ export const Search = forwardRef<HTMLInputElement, SearchProps>(
                 {...omit(['size', 'error', 'errorId', 'readOnly'], rest)}
                 {...inputProps}
                 onChange={handleChange}
+                aria-label={hideLabel ? label?.toString() : undefined}
               />
               {showClearButton && (
                 <button