From 952122326211b2a70ad94b3661d2fcf2247cb4e6 Mon Sep 17 00:00:00 2001 From: Philip Bruvoll Date: Mon, 18 May 2026 13:37:01 +0200 Subject: [PATCH 1/4] Add a11y addon for storybook in form-component --- libs/form-component/.storybook/main.ts | 7 ++++++- libs/form-component/package.json | 1 + yarn.lock | 20 ++++++++++++++++++++ 3 files changed, 27 insertions(+), 1 deletion(-) diff --git a/libs/form-component/.storybook/main.ts b/libs/form-component/.storybook/main.ts index e09c2fb9e13..97af8aa0111 100644 --- a/libs/form-component/.storybook/main.ts +++ b/libs/form-component/.storybook/main.ts @@ -2,7 +2,12 @@ import type { StorybookConfig } from '@storybook/react-vite'; const config: StorybookConfig = { stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'], - addons: ['@storybook/addon-links', '@chromatic-com/storybook', '@storybook/addon-docs'], + addons: [ + '@storybook/addon-links', + '@chromatic-com/storybook', + '@storybook/addon-docs', + '@storybook/addon-a11y', + ], framework: { name: '@storybook/react-vite', options: {}, diff --git a/libs/form-component/package.json b/libs/form-component/package.json index 612790bf3ef..2e2258dec9d 100644 --- a/libs/form-component/package.json +++ b/libs/form-component/package.json @@ -29,6 +29,7 @@ "@chromatic-com/storybook": "^5.0.1", "@digdir/designsystemet-css": "1.11.1", "@digdir/designsystemet-react": "1.11.1", + "@storybook/addon-a11y": "^10.2.16", "@storybook/addon-docs": "10.2.16", "@storybook/addon-links": "10.2.16", "@storybook/builder-vite": "10.2.16", diff --git a/yarn.lock b/yarn.lock index eb7d20bf6ad..45297e432b0 100644 --- a/yarn.lock +++ b/yarn.lock @@ -131,6 +131,7 @@ __metadata: "@chromatic-com/storybook": "npm:^5.0.1" "@digdir/designsystemet-css": "npm:1.11.1" "@digdir/designsystemet-react": "npm:1.11.1" + "@storybook/addon-a11y": "npm:^10.2.16" "@storybook/addon-docs": "npm:10.2.16" "@storybook/addon-links": "npm:10.2.16" "@storybook/builder-vite": "npm:10.2.16" @@ -6064,6 +6065,18 @@ __metadata: languageName: node linkType: hard +"@storybook/addon-a11y@npm:^10.2.16": + version: 10.4.0 + resolution: "@storybook/addon-a11y@npm:10.4.0" + dependencies: + "@storybook/global": "npm:^5.0.0" + axe-core: "npm:^4.2.0" + peerDependencies: + storybook: ^10.4.0 + checksum: 10/0e3dc46fdef537c35c95f70d755fa4e88dad1526d6c0af4a946896d7b60271c8abe3d52ad5e930d0a37b36303ae2c5a174814a5d1a1e7f73addff39b218b7e8a + languageName: node + linkType: hard + "@storybook/addon-docs@npm:10.2.16": version: 10.2.16 resolution: "@storybook/addon-docs@npm:10.2.16" @@ -9507,6 +9520,13 @@ __metadata: languageName: node linkType: hard +"axe-core@npm:^4.2.0": + version: 4.11.4 + resolution: "axe-core@npm:4.11.4" + checksum: 10/49095daa422d05d99a90b39301a3b5c971e234a4593403dfd6701df637a3e550bcfd7bd096709c5643564dd069208513247791f367790e0605d15386fb2a7bfe + languageName: node + linkType: hard + "axios@npm:1.15.0": version: 1.15.0 resolution: "axios@npm:1.15.0" From a1c794c293c481d2a625c0697076c6265bc52592 Mon Sep 17 00:00:00 2001 From: Philip Bruvoll Date: Mon, 18 May 2026 14:45:23 +0200 Subject: [PATCH 2/4] Hook up action on button --- .../form-component/src/app-components/Button/Button.stories.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/libs/form-component/src/app-components/Button/Button.stories.tsx b/libs/form-component/src/app-components/Button/Button.stories.tsx index 37fe0545170..f0bb92475ad 100644 --- a/libs/form-component/src/app-components/Button/Button.stories.tsx +++ b/libs/form-component/src/app-components/Button/Button.stories.tsx @@ -1,4 +1,5 @@ import type { Meta, StoryObj } from '@storybook/react-vite'; +import { fn } from 'storybook/test'; import { Button } from './Button'; @@ -7,6 +8,7 @@ const meta = { component: Button, args: { children: 'Save', + onClick: fn(), }, } satisfies Meta; From f884d4aaaba7a32bd5e8f9ffea74308506a719fb Mon Sep 17 00:00:00 2001 From: Philip Bruvoll Date: Mon, 18 May 2026 14:49:05 +0200 Subject: [PATCH 3/4] add auto docs --- libs/form-component/.storybook/preview.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/libs/form-component/.storybook/preview.tsx b/libs/form-component/.storybook/preview.tsx index 71974a90443..48db171f08a 100644 --- a/libs/form-component/.storybook/preview.tsx +++ b/libs/form-component/.storybook/preview.tsx @@ -8,6 +8,7 @@ const preview: Preview = { parameters: { layout: 'centered', }, + tags: ['autodocs'], decorators: [ (Story) => (
From 94b7a7361f0278d1b1cedee9428642814cc7001b Mon Sep 17 00:00:00 2001 From: Philip Bruvoll Date: Mon, 18 May 2026 15:04:25 +0200 Subject: [PATCH 4/4] fix: update storybook and a11y addon versions to exact match --- libs/form-component/package.json | 4 ++-- yarn.lock | 16 ++++++++-------- 2 files changed, 10 insertions(+), 10 deletions(-) diff --git a/libs/form-component/package.json b/libs/form-component/package.json index 2e2258dec9d..49deba2f3c3 100644 --- a/libs/form-component/package.json +++ b/libs/form-component/package.json @@ -29,7 +29,7 @@ "@chromatic-com/storybook": "^5.0.1", "@digdir/designsystemet-css": "1.11.1", "@digdir/designsystemet-react": "1.11.1", - "@storybook/addon-a11y": "^10.2.16", + "@storybook/addon-a11y": "10.2.16", "@storybook/addon-docs": "10.2.16", "@storybook/addon-links": "10.2.16", "@storybook/builder-vite": "10.2.16", @@ -41,7 +41,7 @@ "@types/react-dom": "19.2.3", "@vitejs/plugin-react": "^5.0.0", "jsdom": "^26.1.0", - "storybook": "^10.2.11", + "storybook": "10.2.16", "typescript": "5.9.3", "typescript-plugin-css-modules": "5.2.0", "vitest": "^4.1.5" diff --git a/yarn.lock b/yarn.lock index 45297e432b0..fe20f304426 100644 --- a/yarn.lock +++ b/yarn.lock @@ -131,7 +131,7 @@ __metadata: "@chromatic-com/storybook": "npm:^5.0.1" "@digdir/designsystemet-css": "npm:1.11.1" "@digdir/designsystemet-react": "npm:1.11.1" - "@storybook/addon-a11y": "npm:^10.2.16" + "@storybook/addon-a11y": "npm:10.2.16" "@storybook/addon-docs": "npm:10.2.16" "@storybook/addon-links": "npm:10.2.16" "@storybook/builder-vite": "npm:10.2.16" @@ -144,7 +144,7 @@ __metadata: "@vitejs/plugin-react": "npm:^5.0.0" classnames: "npm:2.5.1" jsdom: "npm:^26.1.0" - storybook: "npm:^10.2.11" + storybook: "npm:10.2.16" typescript: "npm:5.9.3" typescript-plugin-css-modules: "npm:5.2.0" vitest: "npm:^4.1.5" @@ -6065,15 +6065,15 @@ __metadata: languageName: node linkType: hard -"@storybook/addon-a11y@npm:^10.2.16": - version: 10.4.0 - resolution: "@storybook/addon-a11y@npm:10.4.0" +"@storybook/addon-a11y@npm:10.2.16": + version: 10.2.16 + resolution: "@storybook/addon-a11y@npm:10.2.16" dependencies: "@storybook/global": "npm:^5.0.0" axe-core: "npm:^4.2.0" peerDependencies: - storybook: ^10.4.0 - checksum: 10/0e3dc46fdef537c35c95f70d755fa4e88dad1526d6c0af4a946896d7b60271c8abe3d52ad5e930d0a37b36303ae2c5a174814a5d1a1e7f73addff39b218b7e8a + storybook: ^10.2.16 + checksum: 10/a7ac6f67c22eb9fcef7dd88d3c23de5563389dca958686096e6b66d29d179f684a32c0b1a3b9bd5789d5b61a26b58c119f0baa74c4ef346d2201ad5d7cd8885a languageName: node linkType: hard @@ -22289,7 +22289,7 @@ __metadata: languageName: node linkType: hard -"storybook@npm:^10.2.11": +"storybook@npm:10.2.16, storybook@npm:^10.2.11": version: 10.2.16 resolution: "storybook@npm:10.2.16" dependencies: