From dd4a81935fc42ab73950619bea3203a2cef721b8 Mon Sep 17 00:00:00 2001
From: Halvor Haugan <halvor.haugan@nav.no>
Date: Mon, 4 Dec 2023 17:32:20 +0100
Subject: [PATCH] :bug: Modal: Hindre at elementer med sr-only posisjoneres
 feil

---
 .changeset/smooth-numbers-type.md             |  5 ++
 @navikt/core/css/modal.css                    |  1 +
 .../core/react/src/modal/modal.stories.tsx    | 49 ++++++++++++++++++-
 3 files changed, 54 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/smooth-numbers-type.md

diff --git a/.changeset/smooth-numbers-type.md b/.changeset/smooth-numbers-type.md
new file mode 100644
index 0000000000..af55cb335f
--- /dev/null
+++ b/.changeset/smooth-numbers-type.md
@@ -0,0 +1,5 @@
+---
+"@navikt/ds-css": patch
+---
+
+:bug: Modal: Hindre at elementer med sr-only posisjoneres feil
diff --git a/@navikt/core/css/modal.css b/@navikt/core/css/modal.css
index b4769b64e5..458f2f8f82 100644
--- a/@navikt/core/css/modal.css
+++ b/@navikt/core/css/modal.css
@@ -118,6 +118,7 @@
   padding: var(--a-spacing-6);
   overflow: auto;
   overscroll-behavior: contain;
+  position: relative; /* Needed to make sr-only elements position correctly - see Storybook */
 }
 
 .navds-modal__header + .navds-modal__body {
diff --git a/@navikt/core/react/src/modal/modal.stories.tsx b/@navikt/core/react/src/modal/modal.stories.tsx
index 6e10044e83..54c2c4a5d6 100644
--- a/@navikt/core/react/src/modal/modal.stories.tsx
+++ b/@navikt/core/react/src/modal/modal.stories.tsx
@@ -1,7 +1,9 @@
-import { FileIcon } from "@navikt/aksel-icons";
 import { Meta, StoryFn } from "@storybook/react";
 import React, { useRef, useState } from "react";
+import { FileIcon } from "@navikt/aksel-icons";
 import { BodyLong, Button, Heading, Tooltip } from "..";
+import { Checkbox, CheckboxGroup } from "../form/checkbox";
+import { VStack } from "../layout/stack";
 import Modal from "./Modal";
 
 const meta: Meta<typeof Modal> = {
@@ -203,6 +205,51 @@ export const WithTooltip: StoryFn = () => {
   );
 };
 
+export const WithSrOnlyElement: StoryFn = () => (
+  <Modal open width={300} header={{ heading: "Simple header" }}>
+    <Modal.Body>
+      <VStack gap="16">
+        <BodyLong>
+          The modal body needs to have position:relative to make sr-only
+          elements position themselves correctly when the modal body is
+          overflowing (i.e. has a scrollbar).
+        </BodyLong>
+        <BodyLong>
+          If the modal body (and other parents of the sr-only element inside the
+          modal body) does not have position:relative (or equivalent), the
+          sr-only element is pushed downwards relative to the height of the
+          overflowing content.
+        </BodyLong>
+        <BodyLong>
+          In the most extreme cases, an additional scrollbar appears bc. the
+          dialog element (parent of modal body) starts overflowing. (We have
+          overflow:auto on the dialog element in case you are on a small screen
+          and header/footer has a lot of content.)
+        </BodyLong>
+        <BodyLong>Example: CheckboxGroup with a hidden legend:</BodyLong>
+        <CheckboxGroup legend="What fruits do you like?" hideLegend>
+          <Checkbox>Banana</Checkbox>
+          <Checkbox>Apple</Checkbox>
+          <Checkbox>Orange</Checkbox>
+          <Checkbox>Pear</Checkbox>
+        </CheckboxGroup>
+        <BodyLong>
+          Try to remove position:relative from the modal body and see what
+          happens. (Use DevTools to find the legend element.) You might need to
+          make the viewport shorter to get the full effect (double scrollbar).
+        </BodyLong>
+        <BodyLong>
+          Note: The large amount of gap has been added on purpose to force
+          overflow.
+        </BodyLong>
+      </VStack>
+    </Modal.Body>
+    <Modal.Footer>
+      <Button variant="secondary">Dummy button</Button>
+    </Modal.Footer>
+  </Modal>
+);
+
 export const ChromaticViewportTesting: StoryFn = () => (
   <div id="modal-story-wrapper" style={{ width: "100vw", height: "100vh" }}>
     <style>{`#storybook-root { padding: 0 !important }`}</style>