Add Storybook a11y addon (#80069) (#80778)

package.json

@@ -249,6 +249,13 @@
     "@microsoft/api-documenter": "7.7.2",
     "@microsoft/api-extractor": "7.7.0",
     "@percy/agent": "^0.26.0",
+    "@storybook/addon-a11y": "^6.0.26",
+    "@storybook/addon-actions": "^6.0.26",
+    "@storybook/addon-essentials": "^6.0.26",
+    "@storybook/addon-knobs": "^6.0.26",
+    "@storybook/addon-storyshots": "^6.0.26",
+    "@storybook/react": "^6.0.26",
+    "@storybook/theming": "^6.0.26",
     "@testing-library/dom": "^7.24.2",
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.0.4",
@@ -297,6 +304,7 @@
     "@types/json5": "^0.0.30",
     "@types/license-checker": "15.0.0",
     "@types/listr": "^0.14.0",
+    "@types/loader-utils": "^1.1.3",
     "@types/lodash": "^4.14.159",
     "@types/lru-cache": "^5.1.0",
     "@types/markdown-it": "^0.0.7",
@@ -342,6 +350,7 @@
     "@types/vinyl-fs": "^2.4.11",
     "@types/webpack": "^4.41.3",
     "@types/webpack-env": "^1.15.2",
+    "@types/webpack-merge": "^4.1.5",
     "@types/zen-observable": "^0.8.0",
     "@typescript-eslint/eslint-plugin": "^3.10.0",
     "@typescript-eslint/parser": "^3.10.0",

packages/kbn-optimizer/src/worker/webpack.config.ts

@@ -23,7 +23,6 @@ import { stringifyRequest } from 'loader-utils';
 import webpack from 'webpack';
 // @ts-expect-error
 import TerserPlugin from 'terser-webpack-plugin';
-// @ts-expect-error
 import webpackMerge from 'webpack-merge';
 import { CleanWebpackPlugin } from 'clean-webpack-plugin';
 import CompressionPlugin from 'compression-webpack-plugin';

packages/kbn-storybook/lib/default_config.ts

@@ -20,7 +20,12 @@
 import { StorybookConfig } from '@storybook/core/types';
 
 export const defaultConfig: StorybookConfig = {
-  addons: ['@kbn/storybook/preset', '@storybook/addon-knobs', '@storybook/addon-essentials'],
+  addons: [
+    '@kbn/storybook/preset',
+    '@storybook/addon-a11y',
+    '@storybook/addon-knobs',
+    '@storybook/addon-essentials',
+  ],
   stories: ['../**/*.stories.tsx'],
   typescript: {
     reactDocgen: false,

packages/kbn-storybook/package.json

@@ -4,37 +4,13 @@
   "private": true,
   "license": "Apache-2.0",
   "main": "./target/index.js",
-  "kibana": {
-    "devOnly": true
-  },
-  "dependencies": {
+  "devDependencies": {
     "@kbn/dev-utils": "1.0.0",
-    "@storybook/addon-actions": "^6.0.16",
-    "@storybook/addon-essentials": "^6.0.16",
-    "@storybook/addon-knobs": "^6.0.16",
-    "@storybook/addon-storyshots": "^6.0.16",
-    "@storybook/core": "^6.0.16",
-    "@storybook/react": "^6.0.16",
-    "@storybook/theming": "^6.0.16",
     "@types/loader-utils": "^1.1.3",
-    "@types/webpack": "^4.41.3",
-    "@types/webpack-env": "^1.15.2",
-    "@types/webpack-merge": "^4.1.5",
-    "@kbn/utils": "1.0.0",
-    "babel-loader": "^8.0.6",
-    "copy-webpack-plugin": "^6.0.2",
-    "fast-glob": "2.2.7",
-    "glob-watcher": "5.0.3",
-    "jest-specific-snapshot": "2.0.0",
-    "jest-styled-components": "^7.0.2",
-    "mkdirp": "0.5.1",
-    "mini-css-extract-plugin": "0.8.0",
-    "normalize-path": "^3.0.0",
-    "react-docgen-typescript-loader": "^3.1.1",
-    "rxjs": "^6.5.5",
-    "serve-static": "1.14.1",
-    "styled-components": "^5.1.0",
-    "webpack": "^4.41.5"
+    "@types/webpack-merge": "^4.1.5"
+  },
+  "kibana": {
+    "devOnly": true
   },
   "scripts": {
     "build": "tsc",

x-pack/package.json

@@ -44,12 +44,6 @@
     "@mapbox/mapbox-gl-draw": "^1.2.0",
     "@mapbox/mapbox-gl-rtl-text": "^0.2.3",
     "@scant/router": "^0.1.0",
-    "@storybook/addon-actions": "^6.0.16",
-    "@storybook/addon-essentials": "^6.0.16",
-    "@storybook/addon-knobs": "^6.0.16",
-    "@storybook/addon-storyshots": "^6.0.16",
-    "@storybook/react": "^6.0.16",
-    "@storybook/theming": "^6.0.16",
     "@testing-library/dom": "^7.24.2",
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.0.4",

x-pack/plugins/canvas/scripts/storybook.js

@@ -8,6 +8,8 @@ const path = require('path');
 const fs = require('fs');
 const del = require('del');
 const { run } = require('@kbn/dev-utils');
+// This is included in the main Kibana package.json
+// eslint-disable-next-line import/no-extraneous-dependencies
 const storybook = require('@storybook/react/standalone');
 const execa = require('execa');
 const { DLL_OUTPUT } = require('./../storybook/constants');

x-pack/plugins/canvas/storybook/storyshots.test.tsx

@@ -111,6 +111,7 @@ addSerializer(styleSheetSerializer);
 // Initialize Storyshots and build the Jest Snapshots
 initStoryshots({
   configPath: path.resolve(__dirname, './../storybook'),
+  framework: 'react',
   test: multiSnapshotWithOptions({}),
   // Don't snapshot tests that start with 'redux'
   storyNameRegex: /^((?!.*?redux).)*$/,