From d482b46c035e5332499e84030b18f049a56e2670 Mon Sep 17 00:00:00 2001
From: Une Sofie Kinn Ekroll <une.kinn.ekroll@bekk.no>
Date: Mon, 18 May 2026 15:59:47 +0200
Subject: [PATCH 1/7] fix(Tooltip): only set `aria-label` if there is no
 accessible text

---
 .changeset/fuzzy-cooks-rush.md                |  5 ++
 .../components/tooltip/tooltip.stories.tsx    | 37 ++++++++++++-
 .../react/src/components/tooltip/tooltip.tsx  | 53 +++++++++++++++++--
 3 files changed, 90 insertions(+), 5 deletions(-)
 create mode 100644 .changeset/fuzzy-cooks-rush.md

diff --git a/.changeset/fuzzy-cooks-rush.md b/.changeset/fuzzy-cooks-rush.md
new file mode 100644
index 0000000000..6a998cb844
--- /dev/null
+++ b/.changeset/fuzzy-cooks-rush.md
@@ -0,0 +1,5 @@
+---
+"@digdir/designsystemet-react": patch
+---
+
+**Tooltip**: the React component will no longer override existing accessible text. It now correctly sets `aria-description` in that case. If there is no accessible text, `aria-label` will be used as before.
diff --git a/packages/react/src/components/tooltip/tooltip.stories.tsx b/packages/react/src/components/tooltip/tooltip.stories.tsx
index 6557b94658..9c38430c95 100644
--- a/packages/react/src/components/tooltip/tooltip.stories.tsx
+++ b/packages/react/src/components/tooltip/tooltip.stories.tsx
@@ -2,7 +2,7 @@ import { FilesIcon } from '@navikt/aksel-icons';
 import type { Meta, StoryFn, StoryObj } from '@storybook/react-vite';
 import { useEffect, useRef, useState } from 'react';
 import { expect, within } from 'storybook/test';
-import { Button } from '../../';
+import { Button, Link } from '../../';
 import { Tooltip } from './tooltip';
 
 type Story = StoryObj<typeof Tooltip>;
@@ -44,6 +44,33 @@ Preview.args = {
   placement: 'top',
 };
 
+export const WithLink = () => {
+  return (
+    <Tooltip content='Gå til en annen side...' placement='top'>
+      <Link href='#'>En lenke</Link>
+    </Tooltip>
+  );
+};
+WithLink.play = () => {};
+
+export const WithSpan = () => {
+  return (
+    <Tooltip content='Innholdet i tooltipen' placement='top'>
+      <span>Tekst med tooltip</span>
+    </Tooltip>
+  );
+};
+WithSpan.play = () => {};
+
+export const WithPlainText = () => {
+  return (
+    <Tooltip content='Innholdet i tooltipen' placement='top'>
+      Tekst med tooltip
+    </Tooltip>
+  );
+};
+WithPlainText.play = () => {};
+
 export const WithString: Story = {
   args: {
     content: 'Organisasjonsnummer',
@@ -67,9 +94,15 @@ export const Placement: Story = {
 export const Aria: StoryFn<typeof Tooltip> = () => {
   return (
     <>
-      <Tooltip content='Eg er aria-description'>
+      <Tooltip content='Beskrivelse for aria-description'>
         <Button>Eg er aria-description</Button>
       </Tooltip>
+      <Tooltip content='Beskrivelse for aria-description'>
+        <Button>
+          <FilesIcon aria-hidden />
+          <span>Eg er også aria-description</span>
+        </Button>
+      </Tooltip>
       <Tooltip content='Eg er aria-label'>
         <Button icon>
           <FilesIcon aria-hidden />
diff --git a/packages/react/src/components/tooltip/tooltip.tsx b/packages/react/src/components/tooltip/tooltip.tsx
index f993708a1e..8d241cf269 100644
--- a/packages/react/src/components/tooltip/tooltip.tsx
+++ b/packages/react/src/components/tooltip/tooltip.tsx
@@ -1,7 +1,13 @@
 import { Slot } from '@radix-ui/react-slot';
 import '@digdir/designsystemet-web'; // Import _ds-floating functionality
-import type { HTMLAttributes, ReactElement, RefAttributes } from 'react';
-import { forwardRef } from 'react';
+import type {
+  HTMLAttributes,
+  PropsWithChildren,
+  ReactElement,
+  ReactNode,
+  RefAttributes,
+} from 'react';
+import { Children, forwardRef } from 'react';
 import type { DefaultProps, Placement } from '../../types';
 import type { MergeRight } from '../../utilities';
 
@@ -65,10 +71,17 @@ export const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(
   ) {
     /* check if children is a string */
     const isString = typeof rest.children === 'string';
+    let tooltipAttribute: 'aria-label' | 'aria-description' | undefined;
+    const childInfo = hasAccessibleText(rest.children);
+    if (childInfo.type === 'text') {
+      tooltipAttribute = 'aria-description';
+    } else if (childInfo.type === 'visual') {
+      tooltipAttribute = 'aria-label';
+    }
 
     return (
       <Slot
-        aria-label={content || undefined} // designsystemet-web will re-evaulate if this should be an aria-label or aria-description, but kept here for better SSR
+        {...(tooltipAttribute && { [tooltipAttribute]: content || undefined })} // designsystemet-web will re-evaulate if this should be an aria-label or aria-description, but kept here for better SSR
         data-tooltip={content}
         data-placement={placement}
         data-autoplacement={autoPlacement}
@@ -81,3 +94,37 @@ export const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(
     );
   },
 );
+
+function isIterable(child: ReactNode): child is Iterable<ReactNode> {
+  return typeof (child as Iterable<ReactNode>)[Symbol.iterator] === 'function';
+}
+
+function hasAccessibleText(children?: ReactNode) {
+  // Breadth-first search, with early return if a text child is found
+  const haystack: ReactNode[] = Children.toArray(children);
+  const promises = [];
+  while (haystack.length) {
+    const child = haystack.shift();
+    if (!child) {
+      continue;
+    }
+    if (typeof child !== 'object') {
+      return { type: 'text', value: child } as const;
+    }
+    if (child instanceof Promise) {
+      promises.push(child);
+    } else if (isIterable(child)) {
+      haystack.push(...child);
+    } else {
+      const childsChildren = (child.props as PropsWithChildren | undefined)
+        ?.children;
+      if (childsChildren) {
+        haystack.push(Children.toArray(childsChildren));
+      }
+    }
+  }
+  if (promises.length) {
+    return { type: 'undecided' } as const;
+  }
+  return { type: 'visual' } as const;
+}

From 20a1eada81250f3d1226311ee0f3dc6a19b8ea7c Mon Sep 17 00:00:00 2001
From: Une Sofie Kinn Ekroll <une.kinn.ekroll@bekk.no>
Date: Mon, 18 May 2026 16:32:17 +0200
Subject: [PATCH 2/7] fix(Tooltip): deprecate `type` prop

---
 .changeset/fast-cats-play.md                      | 5 +++++
 packages/react/src/components/tooltip/tooltip.tsx | 4 ++--
 2 files changed, 7 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/fast-cats-play.md

diff --git a/.changeset/fast-cats-play.md b/.changeset/fast-cats-play.md
new file mode 100644
index 0000000000..425b4758db
--- /dev/null
+++ b/.changeset/fast-cats-play.md
@@ -0,0 +1,5 @@
+---
+"@digdir/designsystemet-react": patch
+---
+
+**Tooltip**: deprecate `type` prop, as it no longer does anything
diff --git a/packages/react/src/components/tooltip/tooltip.tsx b/packages/react/src/components/tooltip/tooltip.tsx
index 8d241cf269..8c0de7df6e 100644
--- a/packages/react/src/components/tooltip/tooltip.tsx
+++ b/packages/react/src/components/tooltip/tooltip.tsx
@@ -44,8 +44,8 @@ export type TooltipProps = MergeRight<
      */
     open?: boolean;
     /**
-     * Override if `aria-describedby` or `aria-labelledby` is used.
-     * By default, if the trigger element has no inner text, `aria-labelledby` is used.
+     * @deprecated This prop has no effect. The tooltip will be set as `aria-description`
+     * if the component already contains accessible text, and `aria-label` otherwise.
      */
     type?: 'describedby' | 'labelledby';
   }

From dba15d5a5614e434b0b93d64bae0428359614fad Mon Sep 17 00:00:00 2001
From: Une Sofie Kinn Ekroll <une.kinn.ekroll@bekk.no>
Date: Tue, 19 May 2026 12:25:19 +0200
Subject: [PATCH 3/7] defer aria-label/description logic to custom element on
 client side

---
 .../react/src/components/tooltip/tooltip.tsx  | 52 +------------------
 1 file changed, 2 insertions(+), 50 deletions(-)

diff --git a/packages/react/src/components/tooltip/tooltip.tsx b/packages/react/src/components/tooltip/tooltip.tsx
index 8c0de7df6e..49ddddecee 100644
--- a/packages/react/src/components/tooltip/tooltip.tsx
+++ b/packages/react/src/components/tooltip/tooltip.tsx
@@ -1,13 +1,7 @@
 import { Slot } from '@radix-ui/react-slot';
 import '@digdir/designsystemet-web'; // Import _ds-floating functionality
-import type {
-  HTMLAttributes,
-  PropsWithChildren,
-  ReactElement,
-  ReactNode,
-  RefAttributes,
-} from 'react';
-import { Children, forwardRef } from 'react';
+import type { HTMLAttributes, ReactElement, RefAttributes } from 'react';
+import { forwardRef } from 'react';
 import type { DefaultProps, Placement } from '../../types';
 import type { MergeRight } from '../../utilities';
 
@@ -71,17 +65,9 @@ export const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(
   ) {
     /* check if children is a string */
     const isString = typeof rest.children === 'string';
-    let tooltipAttribute: 'aria-label' | 'aria-description' | undefined;
-    const childInfo = hasAccessibleText(rest.children);
-    if (childInfo.type === 'text') {
-      tooltipAttribute = 'aria-description';
-    } else if (childInfo.type === 'visual') {
-      tooltipAttribute = 'aria-label';
-    }
 
     return (
       <Slot
-        {...(tooltipAttribute && { [tooltipAttribute]: content || undefined })} // designsystemet-web will re-evaulate if this should be an aria-label or aria-description, but kept here for better SSR
         data-tooltip={content}
         data-placement={placement}
         data-autoplacement={autoPlacement}
@@ -94,37 +80,3 @@ export const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(
     );
   },
 );
-
-function isIterable(child: ReactNode): child is Iterable<ReactNode> {
-  return typeof (child as Iterable<ReactNode>)[Symbol.iterator] === 'function';
-}
-
-function hasAccessibleText(children?: ReactNode) {
-  // Breadth-first search, with early return if a text child is found
-  const haystack: ReactNode[] = Children.toArray(children);
-  const promises = [];
-  while (haystack.length) {
-    const child = haystack.shift();
-    if (!child) {
-      continue;
-    }
-    if (typeof child !== 'object') {
-      return { type: 'text', value: child } as const;
-    }
-    if (child instanceof Promise) {
-      promises.push(child);
-    } else if (isIterable(child)) {
-      haystack.push(...child);
-    } else {
-      const childsChildren = (child.props as PropsWithChildren | undefined)
-        ?.children;
-      if (childsChildren) {
-        haystack.push(Children.toArray(childsChildren));
-      }
-    }
-  }
-  if (promises.length) {
-    return { type: 'undecided' } as const;
-  }
-  return { type: 'visual' } as const;
-}

From 9425a366a69ca2f7378a6e2f3e2dd988b6573363 Mon Sep 17 00:00:00 2001
From: Une Sofie Kinn Ekroll <une.kinn.ekroll@bekk.no>
Date: Tue, 19 May 2026 14:54:42 +0200
Subject: [PATCH 4/7] test(tooltip): update play function to work for all
 examples and test more cases

---
 .../components/tooltip/tooltip.stories.tsx    | 71 +++++++++++--------
 1 file changed, 41 insertions(+), 30 deletions(-)

diff --git a/packages/react/src/components/tooltip/tooltip.stories.tsx b/packages/react/src/components/tooltip/tooltip.stories.tsx
index 9c38430c95..a7ead2ce45 100644
--- a/packages/react/src/components/tooltip/tooltip.stories.tsx
+++ b/packages/react/src/components/tooltip/tooltip.stories.tsx
@@ -1,11 +1,17 @@
 import { FilesIcon } from '@navikt/aksel-icons';
 import type { Meta, StoryFn, StoryObj } from '@storybook/react-vite';
 import { useEffect, useRef, useState } from 'react';
-import { expect, within } from 'storybook/test';
+import { expect, fireEvent, userEvent, waitFor } from 'storybook/test';
 import { Button, Link } from '../../';
 import { Tooltip } from './tooltip';
 
 type Story = StoryObj<typeof Tooltip>;
+type FnStory = StoryFn<typeof Tooltip>;
+
+function isInViewport(el: Element) {
+  const { height, width } = el.getBoundingClientRect();
+  return height > 1 && width > 1;
+}
 
 export default {
   title: 'Komponenter/Tooltip',
@@ -17,17 +23,29 @@ export default {
     },
   },
   play: async (ctx) => {
-    document.querySelector('.ds-tooltip')?.remove(); // Reset to run next test without waiting for tooltip to disappear // <== Må "nullstille"/fjerne tooltip mellom hver test
-    const button =
-      ctx.canvasElement.querySelector<HTMLButtonElement>('[data-tooltip]');
-
-    await new Promise((resolve) => {
-      document.addEventListener('animationend', resolve, true); // <== Merk at vi binder event-listener før vi gjør hover
-      button?.focus();
-    });
-
-    const tooltip = await within(document.body).findByText(ctx.args.content); // <== trenger ikke sjekke toBeInDocument siden denne testen krever det
-    expect(tooltip).toBeVisible();
+    const tooltips = ctx.canvasElement.querySelectorAll('[data-tooltip]');
+    for (const event of [fireEvent.focus, userEvent.hover])
+      for (const tooltipTrigger of tooltips) {
+        await event(tooltipTrigger);
+        await waitFor(async () => {
+          const text = tooltipTrigger.getAttribute('data-tooltip');
+          if (!text) {
+            throw new Error('Tooltip trigger has no data-tooltip attribute');
+          }
+          const tooltipRenderer = document.body.querySelector('.ds-tooltip');
+          await expect(tooltipRenderer).toBeVisible();
+          await expect(tooltipRenderer).toSatisfy(isInViewport); // toBeVisible() doesn't check if the element is in the viewport
+          await expect(tooltipRenderer).toHaveTextContent(text);
+          if (tooltipTrigger.textContent.trim()) {
+            await expect(tooltipTrigger).toHaveAttribute(
+              'aria-description',
+              text,
+            );
+          } else {
+            await expect(tooltipTrigger).toHaveAttribute('aria-label', text);
+          }
+        });
+      }
   },
 } satisfies Meta;
 
@@ -44,32 +62,29 @@ Preview.args = {
   placement: 'top',
 };
 
-export const WithLink = () => {
+export const WithLink: FnStory = () => {
   return (
     <Tooltip content='Gå til en annen side...' placement='top'>
       <Link href='#'>En lenke</Link>
     </Tooltip>
   );
 };
-WithLink.play = () => {};
 
-export const WithSpan = () => {
+export const WithSpan: FnStory = () => {
   return (
     <Tooltip content='Innholdet i tooltipen' placement='top'>
       <span>Tekst med tooltip</span>
     </Tooltip>
   );
 };
-WithSpan.play = () => {};
 
-export const WithPlainText = () => {
+export const WithPlainText: FnStory = () => {
   return (
     <Tooltip content='Innholdet i tooltipen' placement='top'>
       Tekst med tooltip
     </Tooltip>
   );
 };
-WithPlainText.play = () => {};
 
 export const WithString: Story = {
   args: {
@@ -91,7 +106,7 @@ export const Placement: Story = {
   },
 };
 
-export const Aria: StoryFn<typeof Tooltip> = () => {
+export const Aria: FnStory = () => {
   return (
     <>
       <Tooltip content='Beskrivelse for aria-description'>
@@ -112,17 +127,13 @@ export const Aria: StoryFn<typeof Tooltip> = () => {
   );
 };
 
-Aria.decorators = [
-  (Story) => (
-    <div
-      style={{ display: 'flex', gap: 'var(--ds-size-2)', alignItems: 'center' }}
-    >
-      <Story />
-    </div>
-  ),
-];
-
-Aria.play = async () => {};
+Aria.parameters = {
+  customStyles: {
+    display: 'flex',
+    gap: 'var(--ds-size-2)',
+    alignItems: 'center',
+  },
+};
 
 export const WithDynamicTooltipText: Story = {
   args: {

From da9a08dae463d0208a2143c15574e1b9dc0fda94 Mon Sep 17 00:00:00 2001
From: Une Sofie Kinn Ekroll <une.kinn.ekroll@bekk.no>
Date: Tue, 19 May 2026 15:24:52 +0200
Subject: [PATCH 5/7] test(tooltip): fix unit tests that always passed, even
 though the attrs tested were not set

---
 packages/react/src/components/tooltip/tooltip.test.tsx | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/packages/react/src/components/tooltip/tooltip.test.tsx b/packages/react/src/components/tooltip/tooltip.test.tsx
index 446e132333..514a5604fe 100644
--- a/packages/react/src/components/tooltip/tooltip.test.tsx
+++ b/packages/react/src/components/tooltip/tooltip.test.tsx
@@ -1,4 +1,4 @@
-import { render, screen } from '@testing-library/react';
+import { render, screen, waitFor } from '@testing-library/react';
 import { act } from 'react';
 import { Tooltip } from './tooltip';
 
@@ -64,7 +64,9 @@ describe('Tooltip', () => {
       </Tooltip>,
     );
     const trigger = screen.getByRole('button');
-    expect(trigger.getAttribute('aria-describedby')).toBeDefined();
+    waitFor(() =>
+      expect(trigger.getAttribute('aria-description')).not.toBeNullable(),
+    );
   });
 
   it('should be aria-labelledby when there is no text in the trigger', () => {
@@ -74,6 +76,8 @@ describe('Tooltip', () => {
       </Tooltip>,
     );
     const trigger = screen.getByRole('button');
-    expect(trigger.getAttribute('aria-labelledby')).toBeDefined();
+    waitFor(() =>
+      expect(trigger.getAttribute('aria-label')).not.toBeNullable(),
+    );
   });
 });

From 6cf63f577c6320410f905fbc16982a1ffee1ae26 Mon Sep 17 00:00:00 2001
From: Une Sofie Kinn Ekroll <une.kinn.ekroll@bekk.no>
Date: Wed, 20 May 2026 10:44:01 +0200
Subject: [PATCH 6/7] do focus event last for less visual diff in chromatic

---
 packages/react/src/components/tooltip/tooltip.stories.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react/src/components/tooltip/tooltip.stories.tsx b/packages/react/src/components/tooltip/tooltip.stories.tsx
index a7ead2ce45..de637e23e4 100644
--- a/packages/react/src/components/tooltip/tooltip.stories.tsx
+++ b/packages/react/src/components/tooltip/tooltip.stories.tsx
@@ -24,7 +24,7 @@ export default {
   },
   play: async (ctx) => {
     const tooltips = ctx.canvasElement.querySelectorAll('[data-tooltip]');
-    for (const event of [fireEvent.focus, userEvent.hover])
+    for (const event of [userEvent.hover, fireEvent.focus])
       for (const tooltipTrigger of tooltips) {
         await event(tooltipTrigger);
         await waitFor(async () => {

From 7fcb60ac4e3a9a75255e09d2a5d08abe61c1e0bc Mon Sep 17 00:00:00 2001
From: Une Sofie Kinn Ekroll <une.kinn.ekroll@bekk.no>
Date: Wed, 20 May 2026 14:11:45 +0200
Subject: [PATCH 7/7] second attempt at getting focus-visible styling

---
 .../react/src/components/tooltip/tooltip.stories.tsx     | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/packages/react/src/components/tooltip/tooltip.stories.tsx b/packages/react/src/components/tooltip/tooltip.stories.tsx
index de637e23e4..844fff2096 100644
--- a/packages/react/src/components/tooltip/tooltip.stories.tsx
+++ b/packages/react/src/components/tooltip/tooltip.stories.tsx
@@ -23,8 +23,13 @@ export default {
     },
   },
   play: async (ctx) => {
-    const tooltips = ctx.canvasElement.querySelectorAll('[data-tooltip]');
-    for (const event of [userEvent.hover, fireEvent.focus])
+    const tooltips =
+      ctx.canvasElement.querySelectorAll<HTMLElement>('[data-tooltip]');
+    const fakeFocus = (e: HTMLElement) => {
+      fireEvent.focus(e); // shows up in interaction log in Storybook
+      e.focus({ focusVisible: true } as Record<string, unknown>); // necessary to get focusVisible styling, but doesn't show up in interaction log
+    };
+    for (const event of [userEvent.hover, fakeFocus])
       for (const tooltipTrigger of tooltips) {
         await event(tooltipTrigger);
         await waitFor(async () => {