Some Storybook configuration

web/.storybook/main.js

@@ -9,6 +9,10 @@ module.exports = {
     '@storybook/addon-interactions',
     '@storybook/preset-scss',
     '@storybook/addon-postcss',
+    '@storybook/addon-a11y',
+    '@storybook/addon-viewport',
+    'storybook-dark-mode',
+    'addon-screen-reader',
   ],
   webpackFinal: async (config, { configType }) => {
     config.module.rules.push({

web/package.json

@@ -37,11 +37,14 @@
   },
   "devDependencies": {
     "@babel/core": "^7.17.9",
+    "@storybook/addon-a11y": "^6.4.22",
     "@storybook/addon-actions": "^6.4.22",
+    "@storybook/addon-docs": "^6.4.22",
     "@storybook/addon-essentials": "^6.4.22",
     "@storybook/addon-interactions": "^6.4.22",
     "@storybook/addon-links": "^6.4.22",
     "@storybook/addon-postcss": "^2.0.0",
+    "@storybook/addon-viewport": "^6.4.22",
     "@storybook/builder-webpack5": "^6.4.22",
     "@storybook/manager-webpack5": "^6.4.22",
     "@storybook/preset-scss": "^1.0.3",
@@ -56,6 +59,7 @@
     "@types/ua-parser-js": "0.7.36",
     "@typescript-eslint/eslint-plugin": "5.10.2",
     "@typescript-eslint/parser": "5.10.2",
+    "addon-screen-reader": "^1.8.6",
     "babel-loader": "^8.2.4",
     "css-loader": "^5.2.7",
     "eslint": "8.8.0",
@@ -75,6 +79,7 @@
     "sass": "^1.50.0",
     "sass-loader": "^10.1.1",
     "sb": "^6.4.22",
+    "storybook-dark-mode": "^1.0.9",
     "storybook-preset-less": "^1.1.2",
     "style-loader": "^2.0.0",
     "typescript": "4.5.5"