fix(fieldset): support visually hidden legend (#3996)

Co-authored-by: Tobias Barsnes <tobias.barsnes@digdir.no>

Author: oddvernes

.changeset/green-bushes-sink.md

@@ -0,0 +1,5 @@
+---
+"@digdir/designsystemet-css": patch
+---
+
+**Fieldset**: Removed uneccessary margin when visually hiding `Fieldset.Legend` with `.ds-sr-only`

packages/css/src/fieldset.css

@@ -23,6 +23,10 @@
     margin-block: var(--ds-size-1) 0;
   }
 
+  & > *.ds-sr-only + * {
+    margin-block-start: 0;
+  }
+
   &:disabled > legend,
   &:disabled > legend + p {
     opacity: var(--ds-opacity-disabled);

packages/react/src/components/checkbox/checkbox.stories.tsx

@@ -418,3 +418,11 @@ export const ContentEx3: StoryFn<typeof Fieldset> = () => (
     <Checkbox label='Kolleger' value='kolleger' />
   </Fieldset>
 );
+export const hiddenLegend: StoryFn<typeof Fieldset> = () => (
+  <Fieldset>
+    <Fieldset.Legend className='ds-sr-only'>
+      Tekst for skjermleser
+    </Fieldset.Legend>
+    <Checkbox label='Test av skjermleser legend' value='selvstendige' />
+  </Fieldset>
+);

packages/react/src/components/fieldset/fieldset.mdx

@@ -41,7 +41,7 @@ Når du bruker `Fieldset`, bør du starte med en `Fieldset.Legend` som forklarer
 Unngå å bruke samme tekst i både `label` og `legend`. Ha gjerne med en hjelpetekst (`Fieldset.Description`) hvis det gjør det enklere for brukerne å fylle ut skjemaet. Lag teksten så kort som mulig.
 
 ## Tilgjengelighet
-Sørg for at du alltid bruker en `legend` for å sikre god tilgjengelighet for skjermlesere og andre hjelpemidler.
+Sørg for at du alltid bruker en `legend` for å sikre god tilgjengelighet for skjermlesere og andre hjelpemidler. Dersom `legend` kun er for skjermleser, bruk hjelpeklassen `ds-sr-only`, da sørger vi for at det ikke blir en unødvendig toppmarg på elementet direkte under `legend`.
 
 ## Referanser