From fbb88021e3e323aacd5179e62d6f3b697c22ffee Mon Sep 17 00:00:00 2001
From: Gert Hengeveld <info@ghengeveld.nl>
Date: Tue, 23 Dec 2025 16:09:05 +0100
Subject: [PATCH 1/7] Synchronize vision simulator state with globals and apply
 vision filters in the preview rather than on the manager's preview iframe

---
 .../a11y/src/components/ColorFilters.tsx      |  57 ----------
 .../a11y/src/components/VisionSimulator.tsx   |  76 ++++---------
 code/addons/a11y/src/constants.ts             |   1 +
 code/addons/a11y/src/preview.tsx              |   4 +
 .../addons/a11y/src/visionSimulatorFilters.ts | 100 ++++++++++++++++++
 code/addons/a11y/src/withVisionSimulator.ts   |  36 +++++++
 6 files changed, 159 insertions(+), 115 deletions(-)
 delete mode 100644 code/addons/a11y/src/components/ColorFilters.tsx
 create mode 100644 code/addons/a11y/src/visionSimulatorFilters.ts
 create mode 100644 code/addons/a11y/src/withVisionSimulator.ts

diff --git a/code/addons/a11y/src/components/ColorFilters.tsx b/code/addons/a11y/src/components/ColorFilters.tsx
deleted file mode 100644
index 24c82e9f95cb..000000000000
--- a/code/addons/a11y/src/components/ColorFilters.tsx
+++ /dev/null
@@ -1,57 +0,0 @@
-import * as React from 'react';
-
-export const Filters: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
-  <svg {...props}>
-    <defs>
-      <filter id="protanopia">
-        <feColorMatrix
-          in="SourceGraphic"
-          type="matrix"
-          values="0.567, 0.433, 0, 0, 0 0.558, 0.442, 0, 0, 0 0, 0.242, 0.758, 0, 0 0, 0, 0, 1, 0"
-        />
-      </filter>
-      <filter id="protanomaly">
-        <feColorMatrix
-          in="SourceGraphic"
-          type="matrix"
-          values="0.817, 0.183, 0, 0, 0 0.333, 0.667, 0, 0, 0 0, 0.125, 0.875, 0, 0 0, 0, 0, 1, 0"
-        />
-      </filter>
-      <filter id="deuteranopia">
-        <feColorMatrix
-          in="SourceGraphic"
-          type="matrix"
-          values="0.625, 0.375, 0, 0, 0 0.7, 0.3, 0, 0, 0 0, 0.3, 0.7, 0, 0 0, 0, 0, 1, 0"
-        />
-      </filter>
-      <filter id="deuteranomaly">
-        <feColorMatrix
-          in="SourceGraphic"
-          type="matrix"
-          values="0.8, 0.2, 0, 0, 0 0.258, 0.742, 0, 0, 0 0, 0.142, 0.858, 0, 0 0, 0, 0, 1, 0"
-        />
-      </filter>
-      <filter id="tritanopia">
-        <feColorMatrix
-          in="SourceGraphic"
-          type="matrix"
-          values="0.95, 0.05,  0, 0, 0 0,  0.433, 0.567, 0, 0 0,  0.475, 0.525, 0, 0 0,  0, 0, 1, 0"
-        />
-      </filter>
-      <filter id="tritanomaly">
-        <feColorMatrix
-          in="SourceGraphic"
-          type="matrix"
-          values="0.967, 0.033, 0, 0, 0 0, 0.733, 0.267, 0, 0 0, 0.183, 0.817, 0, 0 0, 0, 0, 1, 0"
-        />
-      </filter>
-      <filter id="achromatopsia">
-        <feColorMatrix
-          in="SourceGraphic"
-          type="matrix"
-          values="0.299, 0.587, 0.114, 0, 0 0.299, 0.587, 0.114, 0, 0 0.299, 0.587, 0.114, 0, 0 0, 0, 0, 1, 0"
-        />
-      </filter>
-    </defs>
-  </svg>
-);
diff --git a/code/addons/a11y/src/components/VisionSimulator.tsx b/code/addons/a11y/src/components/VisionSimulator.tsx
index c029abe20332..195e47ecd9d3 100644
--- a/code/addons/a11y/src/components/VisionSimulator.tsx
+++ b/code/addons/a11y/src/components/VisionSimulator.tsx
@@ -1,47 +1,20 @@
-import React, { useState } from 'react';
+import React from 'react';
 
 import { Select } from 'storybook/internal/components';
 
 import { AccessibilityIcon } from '@storybook/icons';
 
-import { Global, styled } from 'storybook/theming';
+import { useGlobals } from 'storybook/manager-api';
+import { styled } from 'storybook/theming';
 
-import { Filters } from './ColorFilters';
-
-const iframeId = 'storybook-preview-iframe';
+import { VISION_GLOBAL_KEY } from '../constants';
+import { filterDefs, filters } from '../visionSimulatorFilters';
 
 interface Option {
   name: string;
   percentage?: number;
 }
 
-export const baseList = [
-  { name: 'blurred vision', percentage: 22.9 },
-  { name: 'deuteranomaly', percentage: 2.7 },
-  { name: 'deuteranopia', percentage: 0.56 },
-  { name: 'protanomaly', percentage: 0.66 },
-  { name: 'protanopia', percentage: 0.59 },
-  { name: 'tritanomaly', percentage: 0.01 },
-  { name: 'tritanopia', percentage: 0.016 },
-  { name: 'achromatopsia', percentage: 0.0001 },
-  { name: 'grayscale' },
-] as Option[];
-
-type Filter = Option | null;
-
-const getFilter = (filterName: string) => {
-  if (!filterName) {
-    return 'none';
-  }
-  if (filterName === 'blurred vision') {
-    return 'blur(2px)';
-  }
-  if (filterName === 'grayscale') {
-    return 'grayscale(100%)';
-  }
-  return `url('#${filterName}')`;
-};
-
 const Hidden = styled.div({
   '&, & svg': {
     position: 'absolute',
@@ -59,7 +32,7 @@ const ColorIcon = styled.span<{ $filter: string }>(
     width: '1rem',
   },
   ({ $filter }) => ({
-    filter: getFilter($filter),
+    filter: filters[$filter as keyof typeof filters].filter || 'none',
   }),
   ({ theme }) => ({
     boxShadow: `${theme.appBorderColor} 0 0 0 1px inset`,
@@ -67,41 +40,28 @@ const ColorIcon = styled.span<{ $filter: string }>(
 );
 
 export const VisionSimulator = () => {
-  const [filter, setFilter] = useState<Filter>(null);
+  const [globals, updateGlobals] = useGlobals();
+  const value = globals[VISION_GLOBAL_KEY];
 
-  const options = baseList.map(({ name, percentage }) => {
-    const description = percentage !== undefined ? `${percentage}% of users` : undefined;
-    return {
-      title: name,
-      description,
-      icon: <ColorIcon $filter={name} />,
-      value: name,
-    };
-  });
+  const options = Object.entries(filters).map(([key, { label, percentage }]) => ({
+    title: label,
+    description: percentage ? `${percentage}% of users` : undefined,
+    icon: <ColorIcon $filter={key} />,
+    value: key,
+  }));
 
   return (
     <>
-      {filter && (
-        <Global
-          styles={{
-            [`#${iframeId}`]: {
-              filter: getFilter(filter.name),
-            },
-          }}
-        />
-      )}
       <Select
         resetLabel="Reset color filter"
-        onReset={() => setFilter(null)}
+        onReset={() => updateGlobals({ [VISION_GLOBAL_KEY]: undefined })}
         icon={<AccessibilityIcon />}
         ariaLabel="Vision simulator"
-        defaultOptions={filter?.name}
+        defaultOptions={value}
         options={options}
-        onSelect={(selected) => setFilter(() => ({ name: selected }))}
+        onSelect={(selected) => updateGlobals({ [VISION_GLOBAL_KEY]: selected })}
       />
-      <Hidden>
-        <Filters />
-      </Hidden>
+      <Hidden dangerouslySetInnerHTML={{ __html: filterDefs }} />
     </>
   );
 };
diff --git a/code/addons/a11y/src/constants.ts b/code/addons/a11y/src/constants.ts
index 8bbef9b4f643..d9820b28e4cf 100755
--- a/code/addons/a11y/src/constants.ts
+++ b/code/addons/a11y/src/constants.ts
@@ -1,6 +1,7 @@
 export const ADDON_ID = 'storybook/a11y';
 export const PANEL_ID = `${ADDON_ID}/panel`;
 export const PARAM_KEY = `a11y`;
+export const VISION_GLOBAL_KEY = `vision`;
 export const UI_STATE_ID = `${ADDON_ID}/ui`;
 const RESULT = `${ADDON_ID}/result`;
 const REQUEST = `${ADDON_ID}/request`;
diff --git a/code/addons/a11y/src/preview.tsx b/code/addons/a11y/src/preview.tsx
index ee93f6d2c26a..8257d122e8b7 100644
--- a/code/addons/a11y/src/preview.tsx
+++ b/code/addons/a11y/src/preview.tsx
@@ -5,9 +5,12 @@ import { expect } from 'storybook/test';
 import { run } from './a11yRunner';
 import type { A11yParameters } from './params';
 import { getIsVitestStandaloneRun } from './utils';
+import { withVisionSimulator } from './withVisionSimulator';
 
 let vitestMatchersExtended = false;
 
+export const decorators = [withVisionSimulator];
+
 export const afterEach: AfterEach<any> = async ({
   id: storyId,
   reporting,
@@ -94,6 +97,7 @@ export const initialGlobals = {
   a11y: {
     manual: false,
   },
+  vision: undefined,
 };
 
 export const parameters = {
diff --git a/code/addons/a11y/src/visionSimulatorFilters.ts b/code/addons/a11y/src/visionSimulatorFilters.ts
new file mode 100644
index 000000000000..dd1907f7674f
--- /dev/null
+++ b/code/addons/a11y/src/visionSimulatorFilters.ts
@@ -0,0 +1,100 @@
+export const filters: Record<string, { label: string; filter: string; percentage?: number }> = {
+  blurred: {
+    label: 'Blurred vision',
+    filter: 'blur(2px)',
+    percentage: 22.9,
+  },
+  deuteranomaly: {
+    label: 'Deuteranomaly',
+    filter: 'url("#storybook-a11y-vision-deuteranomaly")',
+    percentage: 2.7,
+  },
+  deuteranopia: {
+    label: 'Deuteranopia',
+    filter: 'url("#storybook-a11y-vision-deuteranopia")',
+    percentage: 0.56,
+  },
+  protanomaly: {
+    label: 'Protanomaly',
+    filter: 'url("#storybook-a11y-vision-protanomaly")',
+    percentage: 0.66,
+  },
+  protanopia: {
+    label: 'Protanopia',
+    filter: 'url("#storybook-a11y-vision-protanopia")',
+    percentage: 0.59,
+  },
+  tritanomaly: {
+    label: 'Tritanomaly',
+    filter: 'url("#storybook-a11y-vision-tritanomaly")',
+    percentage: 0.01,
+  },
+  tritanopia: {
+    label: 'Tritanopia',
+    filter: 'url("#storybook-a11y-vision-tritanopia")',
+    percentage: 0.016,
+  },
+  achromatopsia: {
+    label: 'Achromatopsia',
+    filter: 'url("#storybook-a11y-vision-achromatopsia")',
+    percentage: 0.0001,
+  },
+  grayscale: {
+    label: 'Grayscale',
+    filter: 'grayscale(100%)',
+  },
+} as const;
+
+export const filterDefs = `<svg id="storybook-a11y-vision-filters" style="display: none !important;">
+  <defs>
+    <filter id="storybook-a11y-vision-protanopia">
+      <feColorMatrix
+        in="SourceGraphic"
+        type="matrix"
+        values="0.567, 0.433, 0, 0, 0 0.558, 0.442, 0, 0, 0 0, 0.242, 0.758, 0, 0 0, 0, 0, 1, 0"
+      />
+    </filter>
+    <filter id="storybook-a11y-vision-protanomaly">
+      <feColorMatrix
+        in="SourceGraphic"
+        type="matrix"
+        values="0.817, 0.183, 0, 0, 0 0.333, 0.667, 0, 0, 0 0, 0.125, 0.875, 0, 0 0, 0, 0, 1, 0"
+      />
+    </filter>
+    <filter id="storybook-a11y-vision-deuteranopia">
+      <feColorMatrix
+        in="SourceGraphic"
+        type="matrix"
+        values="0.625, 0.375, 0, 0, 0 0.7, 0.3, 0, 0, 0 0, 0.3, 0.7, 0, 0 0, 0, 0, 1, 0"
+      />
+    </filter>
+    <filter id="storybook-a11y-vision-deuteranomaly">
+      <feColorMatrix
+        in="SourceGraphic"
+        type="matrix"
+        values="0.8, 0.2, 0, 0, 0 0.258, 0.742, 0, 0, 0 0, 0.142, 0.858, 0, 0 0, 0, 0, 1, 0"
+      />
+    </filter>
+    <filter id="storybook-a11y-vision-tritanopia">
+      <feColorMatrix
+        in="SourceGraphic"
+        type="matrix"
+        values="0.95, 0.05,  0, 0, 0 0,  0.433, 0.567, 0, 0 0,  0.475, 0.525, 0, 0 0,  0, 0, 1, 0"
+      />
+    </filter>
+    <filter id="storybook-a11y-vision-tritanomaly">
+      <feColorMatrix
+        in="SourceGraphic"
+        type="matrix"
+        values="0.967, 0.033, 0, 0, 0 0, 0.733, 0.267, 0, 0 0, 0.183, 0.817, 0, 0 0, 0, 0, 1, 0"
+      />
+    </filter>
+    <filter id="storybook-a11y-vision-achromatopsia">
+      <feColorMatrix
+        in="SourceGraphic"
+        type="matrix"
+        values="0.299, 0.587, 0.114, 0, 0 0.299, 0.587, 0.114, 0, 0 0.299, 0.587, 0.114, 0, 0 0, 0, 0, 1, 0"
+      />
+    </filter>
+  </defs>
+</svg>`;
diff --git a/code/addons/a11y/src/withVisionSimulator.ts b/code/addons/a11y/src/withVisionSimulator.ts
new file mode 100644
index 000000000000..f2ec81c6d11d
--- /dev/null
+++ b/code/addons/a11y/src/withVisionSimulator.ts
@@ -0,0 +1,36 @@
+import type { DecoratorFunction } from 'storybook/internal/types';
+
+import { useEffect } from 'storybook/preview-api';
+
+import { filterDefs, filters } from './visionSimulatorFilters';
+
+const knownFilters: string[] = Object.values(filters).map((f) => f.filter);
+
+export const withVisionSimulator: DecoratorFunction = (StoryFn, { globals }) => {
+  const { vision } = globals;
+
+  useEffect(() => {
+    document.body.insertAdjacentHTML('beforeend', filterDefs);
+
+    return () => {
+      document.body.removeChild(document.getElementById('storybook-a11y-vision-filters')!);
+    };
+  }, []);
+
+  useEffect(() => {
+    const existingFilters = document.body.style.filter.split(' ').filter((filter) => {
+      return filter && filter !== 'none' && !knownFilters.includes(filter);
+    });
+
+    const visionFilter = filters[vision as keyof typeof filters]?.filter;
+    if (visionFilter) {
+      document.body.style.filter = [...existingFilters, visionFilter].join(' ');
+    }
+
+    return () => {
+      document.body.style.filter = existingFilters.join(' ');
+    };
+  }, [vision]);
+
+  return StoryFn();
+};

From 8bf98c1c9306ba4167e87da13f36a6dda232ecf3 Mon Sep 17 00:00:00 2001
From: Gert Hengeveld <info@ghengeveld.nl>
Date: Tue, 23 Dec 2025 16:46:18 +0100
Subject: [PATCH 2/7] Ensure error display is not affected by vision filter,
 and add stories

---
 .../components/VisionSimulator.stories.tsx    | 46 +++++++++++++++++++
 .../a11y/src/components/VisionSimulator.tsx   |  5 --
 code/addons/a11y/src/withVisionSimulator.ts   | 36 +++++++++++----
 3 files changed, 72 insertions(+), 15 deletions(-)
 create mode 100644 code/addons/a11y/src/components/VisionSimulator.stories.tsx

diff --git a/code/addons/a11y/src/components/VisionSimulator.stories.tsx b/code/addons/a11y/src/components/VisionSimulator.stories.tsx
new file mode 100644
index 000000000000..b1f742f970b6
--- /dev/null
+++ b/code/addons/a11y/src/components/VisionSimulator.stories.tsx
@@ -0,0 +1,46 @@
+import type { PlayFunction } from 'storybook/internal/types';
+
+import { ManagerContext } from 'storybook/manager-api';
+import { fn } from 'storybook/test';
+
+import preview from '../../../../.storybook/preview';
+import { VisionSimulator } from './VisionSimulator';
+
+const managerContext: any = {
+  state: {},
+  api: {
+    getGlobals: fn(() => ({ vision: undefined })),
+    updateGlobals: fn(),
+    getStoryGlobals: fn(() => ({ vision: undefined })),
+    getUserGlobals: fn(() => ({ vision: undefined })),
+  },
+};
+
+const meta = preview.meta({
+  title: 'Vision Simulator',
+  component: VisionSimulator,
+  decorators: [
+    (Story: any) => (
+      <ManagerContext.Provider value={managerContext}>
+        <Story />
+      </ManagerContext.Provider>
+    ),
+  ],
+});
+
+export default meta;
+
+const openMenu: PlayFunction = async ({ canvas, userEvent }) => {
+  await userEvent.click(canvas.getByRole('button', { name: 'Vision simulator' }));
+};
+
+export const Default = meta.story({
+  play: openMenu,
+});
+
+export const WithFilter = meta.story({
+  play: openMenu,
+  globals: {
+    vision: 'achromatopsia',
+  },
+});
diff --git a/code/addons/a11y/src/components/VisionSimulator.tsx b/code/addons/a11y/src/components/VisionSimulator.tsx
index 195e47ecd9d3..4783a556ed57 100644
--- a/code/addons/a11y/src/components/VisionSimulator.tsx
+++ b/code/addons/a11y/src/components/VisionSimulator.tsx
@@ -10,11 +10,6 @@ import { styled } from 'storybook/theming';
 import { VISION_GLOBAL_KEY } from '../constants';
 import { filterDefs, filters } from '../visionSimulatorFilters';
 
-interface Option {
-  name: string;
-  percentage?: number;
-}
-
 const Hidden = styled.div({
   '&, & svg': {
     position: 'absolute',
diff --git a/code/addons/a11y/src/withVisionSimulator.ts b/code/addons/a11y/src/withVisionSimulator.ts
index f2ec81c6d11d..f7370f1280ad 100644
--- a/code/addons/a11y/src/withVisionSimulator.ts
+++ b/code/addons/a11y/src/withVisionSimulator.ts
@@ -1,3 +1,5 @@
+import { useCallback } from 'react';
+
 import type { DecoratorFunction } from 'storybook/internal/types';
 
 import { useEffect } from 'storybook/preview-api';
@@ -9,22 +11,16 @@ const knownFilters: string[] = Object.values(filters).map((f) => f.filter);
 export const withVisionSimulator: DecoratorFunction = (StoryFn, { globals }) => {
   const { vision } = globals;
 
-  useEffect(() => {
-    document.body.insertAdjacentHTML('beforeend', filterDefs);
-
-    return () => {
-      document.body.removeChild(document.getElementById('storybook-a11y-vision-filters')!);
-    };
-  }, []);
-
-  useEffect(() => {
+  const applyVisionFilter = useCallback(() => {
     const existingFilters = document.body.style.filter.split(' ').filter((filter) => {
       return filter && filter !== 'none' && !knownFilters.includes(filter);
     });
 
     const visionFilter = filters[vision as keyof typeof filters]?.filter;
-    if (visionFilter) {
+    if (visionFilter && document.body.classList.contains('sb-show-main')) {
       document.body.style.filter = [...existingFilters, visionFilter].join(' ');
+    } else {
+      document.body.style.filter = existingFilters.join(' ');
     }
 
     return () => {
@@ -32,5 +28,25 @@ export const withVisionSimulator: DecoratorFunction = (StoryFn, { globals }) =>
     };
   }, [vision]);
 
+  useEffect(applyVisionFilter, [vision]);
+
+  useEffect(() => {
+    const observer = new MutationObserver(() => applyVisionFilter());
+    observer.observe(document.body, { attributeFilter: ['class'] });
+
+    return () => {
+      observer.disconnect();
+    };
+  }, [applyVisionFilter]);
+
+  useEffect(() => {
+    document.body.insertAdjacentHTML('beforeend', filterDefs);
+
+    return () => {
+      const filterDefsElement = document.getElementById('storybook-a11y-vision-filters');
+      filterDefsElement?.parentElement?.removeChild(filterDefsElement);
+    };
+  }, []);
+
   return StoryFn();
 };

From 74f71239cbe088178b2233e6d25976d712809b27 Mon Sep 17 00:00:00 2001
From: Gert Hengeveld <info@ghengeveld.nl>
Date: Tue, 23 Dec 2025 17:07:18 +0100
Subject: [PATCH 3/7] Fix import

---
 code/addons/a11y/src/withVisionSimulator.ts | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/code/addons/a11y/src/withVisionSimulator.ts b/code/addons/a11y/src/withVisionSimulator.ts
index f7370f1280ad..b0c4d553f9e6 100644
--- a/code/addons/a11y/src/withVisionSimulator.ts
+++ b/code/addons/a11y/src/withVisionSimulator.ts
@@ -1,8 +1,6 @@
-import { useCallback } from 'react';
-
 import type { DecoratorFunction } from 'storybook/internal/types';
 
-import { useEffect } from 'storybook/preview-api';
+import { useCallback, useEffect } from 'storybook/preview-api';
 
 import { filterDefs, filters } from './visionSimulatorFilters';
 

From db0548d2c961710510ab6eb402e42c31aa8a6d41 Mon Sep 17 00:00:00 2001
From: Gert Hengeveld <info@ghengeveld.nl>
Date: Tue, 23 Dec 2025 19:55:57 +0100
Subject: [PATCH 4/7] Drop unit tests in favor of story with play function
 assertions

---
 .../components/VisionSimulator.stories.tsx    | 15 +++-
 .../src/components/VisionSimulator.test.tsx   | 80 -------------------
 2 files changed, 13 insertions(+), 82 deletions(-)
 delete mode 100644 code/addons/a11y/src/components/VisionSimulator.test.tsx

diff --git a/code/addons/a11y/src/components/VisionSimulator.stories.tsx b/code/addons/a11y/src/components/VisionSimulator.stories.tsx
index b1f742f970b6..ccbf09fbe583 100644
--- a/code/addons/a11y/src/components/VisionSimulator.stories.tsx
+++ b/code/addons/a11y/src/components/VisionSimulator.stories.tsx
@@ -1,7 +1,7 @@
-import type { PlayFunction } from 'storybook/internal/types';
+import type { PlayFunction, PlayFunctionContext } from 'storybook/internal/types';
 
 import { ManagerContext } from 'storybook/manager-api';
-import { fn } from 'storybook/test';
+import { expect, fn, screen } from 'storybook/test';
 
 import preview from '../../../../.storybook/preview';
 import { VisionSimulator } from './VisionSimulator';
@@ -44,3 +44,14 @@ export const WithFilter = meta.story({
     vision: 'achromatopsia',
   },
 });
+
+export const Selection = meta.story({
+  play: async (context) => {
+    await openMenu(context);
+    await context.userEvent.click(await screen.findByText('Blurred vision'));
+    await expect(managerContext.api.updateGlobals).toHaveBeenCalledWith({ vision: 'blurred' });
+    await expect(
+      context.canvas.getByRole('button', { name: 'Vision simulator Blurred vision' })
+    ).toBeVisible();
+  },
+});
diff --git a/code/addons/a11y/src/components/VisionSimulator.test.tsx b/code/addons/a11y/src/components/VisionSimulator.test.tsx
deleted file mode 100644
index 7b0ef88c9290..000000000000
--- a/code/addons/a11y/src/components/VisionSimulator.test.tsx
+++ /dev/null
@@ -1,80 +0,0 @@
-// @vitest-environment happy-dom
-/// <reference types="@testing-library/jest-dom" />;
-import { fireEvent, render, screen, waitFor } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import { describe, expect, it } from 'vitest';
-
-import React from 'react';
-
-import { ThemeProvider, convert, themes } from 'storybook/theming';
-
-import { VisionSimulator, baseList } from './VisionSimulator';
-
-const getOptionByNameAndPercentage = (option: string, percentage?: number) =>
-  screen.getByText(
-    (content, element) =>
-      content !== '' &&
-      // @ts-expect-error (TODO)
-      element.textContent === option &&
-      // @ts-expect-error (TODO)
-      (percentage === undefined || element.nextSibling.textContent === `${percentage}% of users`)
-  );
-
-function ThemedVisionSimulator() {
-  return (
-    <ThemeProvider theme={convert(themes.light)}>
-      <VisionSimulator />
-    </ThemeProvider>
-  );
-}
-
-describe('Vision Simulator', () => {
-  // TODO: there are issues with the ThemeProvider from lib/theming for some reason
-  // which are causing rendering issues in the component for all these tests
-  it.skip('should render tool button', async () => {
-    // when
-    render(<ThemedVisionSimulator />);
-
-    // then
-    // waitFor because WithTooltip is a lazy component
-    await waitFor(() => expect(screen.getByTitle('Vision simulator')).toBeInTheDocument());
-  });
-
-  it.skip('should display tooltip on click', async () => {
-    // given
-    render(<ThemedVisionSimulator />);
-    await waitFor(() => expect(screen.getByTitle('Vision simulator')).toBeInTheDocument());
-
-    // when
-    userEvent.click(screen.getByRole('button', { name: 'Vision simulator' }));
-
-    // then
-    await waitFor(() => expect(screen.getByText('blurred vision')).toBeInTheDocument());
-    baseList.forEach(({ name, percentage }) =>
-      expect(getOptionByNameAndPercentage(name, percentage)).toBeInTheDocument()
-    );
-  });
-
-  it.skip('should set filter', async () => {
-    // given
-    render(<ThemedVisionSimulator />);
-    await waitFor(() => expect(screen.getByTitle('Vision simulator')).toBeInTheDocument());
-    userEvent.click(screen.getByRole('button', { name: 'Vision simulator' }));
-    await waitFor(() => expect(screen.getByText('blurred vision')).toBeInTheDocument());
-
-    // when
-    fireEvent.click(screen.getByText('blurred vision'));
-
-    // then
-    const rule = Object.values(document.styleSheets)
-      .filter(({ cssRules }) => cssRules)
-      .map(({ cssRules }) => Object.values(cssRules))
-      .flat()
-      // @ts-expect-error (TODO)
-      .find((cssRule: CSSRule) => cssRule.selectorText === '#storybook-preview-iframe');
-
-    expect(rule).toBeDefined();
-    // @ts-expect-error (TODO)
-    expect(rule.style.filter).toBe('blur(2px)');
-  });
-});

From 3830aed10afd9de64b007ecd60f01748284a610e Mon Sep 17 00:00:00 2001
From: Gert Hengeveld <info@ghengeveld.nl>
Date: Tue, 23 Dec 2025 20:41:09 +0100
Subject: [PATCH 5/7] Avoid splitting filter string, which may not work
 properly

---
 code/addons/a11y/src/withVisionSimulator.ts | 24 +++++++++++----------
 1 file changed, 13 insertions(+), 11 deletions(-)

diff --git a/code/addons/a11y/src/withVisionSimulator.ts b/code/addons/a11y/src/withVisionSimulator.ts
index b0c4d553f9e6..1ccda2e57f5d 100644
--- a/code/addons/a11y/src/withVisionSimulator.ts
+++ b/code/addons/a11y/src/withVisionSimulator.ts
@@ -4,35 +4,37 @@ import { useCallback, useEffect } from 'storybook/preview-api';
 
 import { filterDefs, filters } from './visionSimulatorFilters';
 
-const knownFilters: string[] = Object.values(filters).map((f) => f.filter);
+const knownFilters = Object.values(filters).map((f) => f.filter);
+const knownFiltersRegExp = new RegExp(`\\b(${knownFilters.join('|')})\\b`, 'g');
 
 export const withVisionSimulator: DecoratorFunction = (StoryFn, { globals }) => {
   const { vision } = globals;
 
   const applyVisionFilter = useCallback(() => {
-    const existingFilters = document.body.style.filter.split(' ').filter((filter) => {
-      return filter && filter !== 'none' && !knownFilters.includes(filter);
-    });
+    const existingFilters = document.body.style.filter.replaceAll(knownFiltersRegExp, '').trim();
 
     const visionFilter = filters[vision as keyof typeof filters]?.filter;
     if (visionFilter && document.body.classList.contains('sb-show-main')) {
-      document.body.style.filter = [...existingFilters, visionFilter].join(' ');
+      if (!existingFilters || existingFilters === 'none') {
+        document.body.style.filter = visionFilter;
+      } else {
+        document.body.style.filter = `${existingFilters} ${visionFilter}`;
+      }
     } else {
-      document.body.style.filter = existingFilters.join(' ');
+      document.body.style.filter = existingFilters || 'none';
     }
 
-    return () => {
-      document.body.style.filter = existingFilters.join(' ');
-    };
+    return () => (document.body.style.filter = existingFilters || 'none');
   }, [vision]);
 
-  useEffect(applyVisionFilter, [vision]);
-
   useEffect(() => {
+    const cleanup = applyVisionFilter();
+
     const observer = new MutationObserver(() => applyVisionFilter());
     observer.observe(document.body, { attributeFilter: ['class'] });
 
     return () => {
+      cleanup();
       observer.disconnect();
     };
   }, [applyVisionFilter]);

From b7a6c6ac0b77fc396cddaebdbcb8e184f5cf7f4d Mon Sep 17 00:00:00 2001
From: Gert Hengeveld <info@ghengeveld.nl>
Date: Wed, 7 Jan 2026 12:26:22 +0100
Subject: [PATCH 6/7] Add Jest DOM types reference in A11YPanel test file

---
 code/addons/a11y/src/components/A11YPanel.test.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/code/addons/a11y/src/components/A11YPanel.test.tsx b/code/addons/a11y/src/components/A11YPanel.test.tsx
index b39be8e1712a..b5c10cbc7661 100644
--- a/code/addons/a11y/src/components/A11YPanel.test.tsx
+++ b/code/addons/a11y/src/components/A11YPanel.test.tsx
@@ -1,4 +1,5 @@
 // @vitest-environment happy-dom
+/// <reference types="@testing-library/jest-dom" />;
 import { fireEvent, render } from '@testing-library/react';
 import { describe, expect, it, vi } from 'vitest';
 

From e3601eabde591d55486d2e149f4e57853e1a04fb Mon Sep 17 00:00:00 2001
From: Gert Hengeveld <info@ghengeveld.nl>
Date: Thu, 8 Jan 2026 10:32:53 +0100
Subject: [PATCH 7/7] Remove invalid closing semicolon from triple-slash
 directives

---
 code/addons/a11y/src/components/A11YPanel.test.tsx              | 2 +-
 code/addons/links/src/react/components/link.test.tsx            | 2 +-
 code/core/src/common/utils/__tests__/normalize-stories.test.ts  | 2 +-
 .../svelte/src/__test__/composeStories/portable-stories.test.ts | 2 +-
 .../vue3/src/__tests__/composeStories/portable-stories.test.ts  | 2 +-
 .../portable-stories-kitchen-sink/svelte/stories/Button.test.ts | 2 +-
 6 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/code/addons/a11y/src/components/A11YPanel.test.tsx b/code/addons/a11y/src/components/A11YPanel.test.tsx
index b5c10cbc7661..9352981fc613 100644
--- a/code/addons/a11y/src/components/A11YPanel.test.tsx
+++ b/code/addons/a11y/src/components/A11YPanel.test.tsx
@@ -1,5 +1,5 @@
 // @vitest-environment happy-dom
-/// <reference types="@testing-library/jest-dom" />;
+/// <reference types="@testing-library/jest-dom" />
 import { fireEvent, render } from '@testing-library/react';
 import { describe, expect, it, vi } from 'vitest';
 
diff --git a/code/addons/links/src/react/components/link.test.tsx b/code/addons/links/src/react/components/link.test.tsx
index 77c6e2224a90..8eb0aff454be 100644
--- a/code/addons/links/src/react/components/link.test.tsx
+++ b/code/addons/links/src/react/components/link.test.tsx
@@ -1,5 +1,5 @@
 // @vitest-environment happy-dom
-/// <reference types="@testing-library/jest-dom" />;
+/// <reference types="@testing-library/jest-dom" />
 import { act, cleanup, render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { afterEach, describe, expect, it, vi } from 'vitest';
diff --git a/code/core/src/common/utils/__tests__/normalize-stories.test.ts b/code/core/src/common/utils/__tests__/normalize-stories.test.ts
index c104114f7e3f..1c78c2737873 100644
--- a/code/core/src/common/utils/__tests__/normalize-stories.test.ts
+++ b/code/core/src/common/utils/__tests__/normalize-stories.test.ts
@@ -1,4 +1,4 @@
-/// <reference types="@testing-library/jest-dom" />;
+/// <reference types="@testing-library/jest-dom" />
 import { sep } from 'node:path';
 
 import { describe, expect, it, vi } from 'vitest';
diff --git a/code/renderers/svelte/src/__test__/composeStories/portable-stories.test.ts b/code/renderers/svelte/src/__test__/composeStories/portable-stories.test.ts
index fb4d5d3ab017..36250fc8d666 100644
--- a/code/renderers/svelte/src/__test__/composeStories/portable-stories.test.ts
+++ b/code/renderers/svelte/src/__test__/composeStories/portable-stories.test.ts
@@ -1,5 +1,5 @@
 // @vitest-environment happy-dom
-/// <reference types="@testing-library/jest-dom" />;
+/// <reference types="@testing-library/jest-dom" />
 import { cleanup, render, screen } from '@testing-library/svelte';
 import { afterEach, describe, expect, it } from 'vitest';
 
diff --git a/code/renderers/vue3/src/__tests__/composeStories/portable-stories.test.ts b/code/renderers/vue3/src/__tests__/composeStories/portable-stories.test.ts
index f6b21b7db14f..0ce97a8ecb3a 100644
--- a/code/renderers/vue3/src/__tests__/composeStories/portable-stories.test.ts
+++ b/code/renderers/vue3/src/__tests__/composeStories/portable-stories.test.ts
@@ -1,5 +1,5 @@
 // @vitest-environment happy-dom
-/// <reference types="@testing-library/jest-dom" />;
+/// <reference types="@testing-library/jest-dom" />
 import { cleanup, render, screen } from '@testing-library/vue';
 import { afterEach, describe, expect, it, vi } from 'vitest';
 
diff --git a/test-storybooks/portable-stories-kitchen-sink/svelte/stories/Button.test.ts b/test-storybooks/portable-stories-kitchen-sink/svelte/stories/Button.test.ts
index 75d325a031e4..01071a390341 100644
--- a/test-storybooks/portable-stories-kitchen-sink/svelte/stories/Button.test.ts
+++ b/test-storybooks/portable-stories-kitchen-sink/svelte/stories/Button.test.ts
@@ -1,4 +1,4 @@
-/// <reference types="@testing-library/jest-dom" />;
+/// <reference types="@testing-library/jest-dom" />
 import { it, expect, describe, afterEach } from 'vitest';
 import { render, screen, cleanup } from '@testing-library/svelte';
 // import '@testing-library/svelte/vitest';