From 15de5ccd86d41242de71d1f683087b52a8ef19cc Mon Sep 17 00:00:00 2001
From: Charles de Dreuille <charles.dedreuille@gmail.com>
Date: Mon, 15 Sep 2025 21:26:08 +0100
Subject: [PATCH] Add modes + a11y

Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>
---
 .storybook/main.ts     |  1 +
 .storybook/modes.ts    | 18 ++++++++++++++++++
 .storybook/preview.tsx | 10 ++++++++++
 package.json           |  1 +
 yarn.lock              | 21 +++++++++++++++++----
 5 files changed, 47 insertions(+), 4 deletions(-)
 create mode 100644 .storybook/modes.ts

diff --git a/.storybook/main.ts b/.storybook/main.ts
index 4be06af7fc..788df83ba9 100644
--- a/.storybook/main.ts
+++ b/.storybook/main.ts
@@ -41,6 +41,7 @@ const config: StorybookConfig = {
     getAbsolutePath('@storybook/addon-links'),
     getAbsolutePath('@storybook/addon-themes'),
     getAbsolutePath('@storybook/addon-docs'),
+    getAbsolutePath('@storybook/addon-a11y'),
   ],
   framework: {
     name: getAbsolutePath('@storybook/react-vite'),
diff --git a/.storybook/modes.ts b/.storybook/modes.ts
new file mode 100644
index 0000000000..7087fa35eb
--- /dev/null
+++ b/.storybook/modes.ts
@@ -0,0 +1,18 @@
+export const allModes = {
+  'light backstage': {
+    themeMode: 'light',
+    themeName: 'backstage',
+  },
+  'dark backstage': {
+    themeMode: 'dark',
+    themeName: 'backstage',
+  },
+  'light spotify': {
+    themeMode: 'light',
+    themeName: 'spotify',
+  },
+  'dark spotify': {
+    themeMode: 'dark',
+    themeName: 'spotify',
+  },
+} as const;
diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
index d934412521..6547950705 100644
--- a/.storybook/preview.tsx
+++ b/.storybook/preview.tsx
@@ -5,6 +5,7 @@ import { apis } from './support/apis';
 import type { Decorator, Preview } from '@storybook/react-vite';
 import { useGlobals } from 'storybook/preview-api';
 import { UnifiedThemeProvider, themes } from '@backstage/theme';
+import { allModes } from './modes';
 
 // Default Backstage theme CSS (from packages/ui)
 import '../packages/ui/src/css/styles.css';
@@ -90,6 +91,15 @@ const preview: Preview = {
     docs: {
       codePanel: true,
     },
+
+    chromatic: {
+      modes: {
+        'light backstage': allModes['light backstage'],
+        'dark backstage': allModes['dark backstage'],
+        'light spotify': allModes['light spotify'],
+        'dark spotify': allModes['dark spotify'],
+      },
+    },
   },
   decorators: [
     Story => {
diff --git a/package.json b/package.json
index 34fc4fdf0a..99a6192653 100644
--- a/package.json
+++ b/package.json
@@ -135,6 +135,7 @@
     "@octokit/rest": "^19.0.3",
     "@playwright/test": "^1.32.3",
     "@spotify/eslint-plugin": "^15.0.0",
+    "@storybook/addon-a11y": "^9.1.5",
     "@storybook/addon-docs": "^9.1.5",
     "@storybook/addon-links": "^9.1.5",
     "@storybook/addon-themes": "^9.1.5",
diff --git a/yarn.lock b/yarn.lock
index 3a5aa9ac30..0403d23ed1 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -18321,6 +18321,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@storybook/addon-a11y@npm:^9.1.5":
+  version: 9.1.6
+  resolution: "@storybook/addon-a11y@npm:9.1.6"
+  dependencies:
+    "@storybook/global": "npm:^5.0.0"
+    axe-core: "npm:^4.2.0"
+  peerDependencies:
+    storybook: ^9.1.6
+  checksum: 10/345c44673ccede4073e7415eb7c73f7817cb64b24b75d6f2edae73a0a6e50cc91e098a48dfd55996188aeb04d308c147b6d660bcdd4e5449d601271a83d4f178
+  languageName: node
+  linkType: hard
+
 "@storybook/addon-docs@npm:^9.1.5":
   version: 9.1.5
   resolution: "@storybook/addon-docs@npm:9.1.5"
@@ -24098,10 +24110,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"axe-core@npm:^4.10.0":
-  version: 4.10.0
-  resolution: "axe-core@npm:4.10.0"
-  checksum: 10/6158489a7a704edc98bd30ed56243b8280c5203c60e095a2feb5bff95d9bf2ef10becfe359b1cbc8601338418999c26cf4eee704181dedbcb487f4d63a06d8d5
+"axe-core@npm:^4.10.0, axe-core@npm:^4.2.0":
+  version: 4.10.3
+  resolution: "axe-core@npm:4.10.3"
+  checksum: 10/9ff51ad0fd0fdec5c0247ea74e8ace5990b54c7f01f8fa3e5cd8ba98b0db24d8ebd7bab4a9bd4d75c28c4edcd1eac455b44c8c6c258c6a98f3d2f88bc60af4cc
   languageName: node
   linkType: hard
 
@@ -44141,6 +44153,7 @@ __metadata:
     "@octokit/rest": "npm:^19.0.3"
     "@playwright/test": "npm:^1.32.3"
     "@spotify/eslint-plugin": "npm:^15.0.0"
+    "@storybook/addon-a11y": "npm:^9.1.5"
     "@storybook/addon-docs": "npm:^9.1.5"
     "@storybook/addon-links": "npm:^9.1.5"
     "@storybook/addon-themes": "npm:^9.1.5"