docs: update to storybook 10 and add a11y tests

Author: gavmck

.eslintrc.cjs

@@ -1,5 +1,5 @@
 module.exports = {
-  extends: ['@etchteam', 'plugin:storybook/recommended'],
+  extends: ['@etchteam'],
   rules: {
     '@next/next/no-html-link-for-pages': 0,
     '@next/next/no-img-element': 0,

.storybook/DocPage.tsx

@@ -7,7 +7,7 @@ import {
   Stories,
   useOf,
   Description,
-} from '@storybook/blocks';
+} from '@storybook/addon-docs/blocks';
 import { PreparedStory, Renderer } from 'storybook/internal/types';
 import Related from './blocks/Related';
 import Meta from './blocks/Meta';

.storybook/blocks/Meta.tsx

@@ -1,4 +1,4 @@
-import { useOf } from '@storybook/blocks';
+import { useOf } from '@storybook/addon-docs/blocks';
 import React from 'react';
 
 /**

.storybook/blocks/Related.tsx

@@ -1,4 +1,4 @@
-import { useOf } from '@storybook/blocks';
+import { useOf } from '@storybook/addon-docs/blocks';
 import React, { useEffect, useState } from 'react';
 
 import '../../src/components/composition/Grid/Grid';

.storybook/main.ts

@@ -1,27 +1,21 @@
+// This file has been automatically migrated to valid ESM format by Storybook.
+import { fileURLToPath } from "node:url";
 import type { StorybookConfig } from '@storybook/react-vite';
-import path from 'node:path';
+import path, { dirname } from 'node:path';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
 
 const config: StorybookConfig = {
   stories: [
     '../src/**/*.mdx',
     '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'
   ],
+
   addons: [
     '@storybook/addon-a11y',
     '@storybook/addon-docs',
     '@chromatic-com/storybook',
-    {
-      name: '@storybook/addon-essentials',
-      options: {
-        toolbars: true,
-        backgrounds: false,
-        actions: false,
-        outline: false,
-        measure: false,
-        viewport: true,
-      },
-    },
-    '@storybook/addon-interactions',
     {
       name: '@storybook/preset-scss',
       options: {
@@ -33,20 +27,32 @@ const config: StorybookConfig = {
 
         }
       }
-    },
+    }
   ],
+
   framework: {
     name: '@storybook/react-vite',
     options: {}
   },
+
   staticDirs: [path.resolve(__dirname, '../src/assets')],
+
   typescript: {
     reactDocgen: 'react-docgen-typescript',
     reactDocgenTypescriptOptions: {
       shouldExtractLiteralValuesFromEnum: true,
       propFilter: (prop) => (prop.parent ? !/node_modules/.test(prop.parent.fileName) : true),
     },
   },
+
+  features: {
+    toolbars: true,
+    backgrounds: false,
+    actions: false,
+    outline: false,
+    measure: false,
+    viewport: true
+  }
 };
 
 export default config;

.storybook/manager.ts

@@ -1,5 +1,5 @@
-import { addons } from '@storybook/manager-api';
-import { create } from '@storybook/theming/create';
+import { addons } from 'storybook/manager-api';
+import { create } from 'storybook/theming/create';
 
 
 addons.setConfig({

.storybook/preview.ts

@@ -1,4 +1,4 @@
-import type { Preview } from '@storybook/react'
+import type { Preview } from '@storybook/react-vite'
 import { DocPage } from './DocPage';
 import tokens from '@wrap.ngo/tokens/dist/index.css?raw'
 
@@ -52,7 +52,7 @@ const preview: Preview = {
       page: ({ of }: { of: any }) => DocPage({ of }),
     },
     backgrounds: {
-      disable: true,
+      disabled: true,
     },
     designTokenTables: {
       tokens: [
@@ -72,7 +72,7 @@ const preview: Preview = {
       },
     },
     viewport: {
-      viewports: {
+      options: {
         aaMinimum: {
           name: 'AA minimum small mobile',
           styles: {