Add @storybook/addon-a11y (#119)

* add @storybook/addon-a11y * prettier
element-hq · Oct 30, 2023 · 1834501 · 1834501
1 parent d3dfc5d
commit 1834501
Show file tree

Hide file tree

Showing 3 changed files with 167 additions and 8 deletions.
diff --git a/.storybook/main.ts b/.storybook/main.ts
@@ -1,17 +1,23 @@
 import type { StorybookConfig } from "@storybook/react-vite";
 
+const addons = [
+  "@storybook/addon-links",
+  "@storybook/addon-essentials",
+  "@storybook/addon-interactions",
+  "@storybook/addon-designs",
+  "@storybook/addon-themes",
+];
+
+if (process.env.NODE_ENV === "development") {
+  addons.push("@storybook/addon-a11y");
+}
+
 const config: StorybookConfig = {
   stories: [
     "../src/**/*.mdx",
     "../src/**/!(__ComponentTemplate__)*.stories.@(js|jsx|ts|tsx)",
   ],
-  addons: [
-    "@storybook/addon-links",
-    "@storybook/addon-essentials",
-    "@storybook/addon-interactions",
-    "@storybook/addon-designs",
-    "@storybook/addon-themes",
-  ],
+  addons,
   framework: {
     name: "@storybook/react-vite",
     options: {},

diff --git a/package.json b/package.json
@@ -56,6 +56,7 @@
     "@fontsource/inter": "^5.0.8",
     "@percy/cli": "^1.27.1",
     "@percy/storybook": "^4.3.6",
+    "@storybook/addon-a11y": "^7.5.1",
     "@storybook/addon-designs": "7.0.5",
     "@storybook/addon-essentials": "7.4.2",
     "@storybook/addon-interactions": "7.4.2",

diff --git a/yarn.lock b/yarn.lock
@@ -2121,6 +2121,25 @@
   resolved "https://registry.yarnpkg.com/@sinclair/typebox/-/typebox-0.27.8.tgz#6667fac16c436b5434a387a34dedb013198f6e6e"
   integrity sha512-+Fj43pSMwJs4KRrH/938Uf+uAELIgVBmQzg/q1YG10djyfA3TnrU8N8XzqCh/okZdszqBQTZf96idMfE5lnwTA==
 
+"@storybook/addon-a11y@^7.5.1":
+  version "7.5.1"
+  resolved "https://registry.yarnpkg.com/@storybook/addon-a11y/-/addon-a11y-7.5.1.tgz#ed7876245c7b00fab4d742a058a32c577af17a79"
+  integrity sha512-BzmSIhgqR+WSS5gqSOyzFACs20Nv0Wk9b4lpUWw5zEqZkXy1PFAUyRQ65kD9Tdjc1O2KL2Zi1h/gi0O6dWldMg==
+  dependencies:
+    "@storybook/addon-highlight" "7.5.1"
+    "@storybook/channels" "7.5.1"
+    "@storybook/client-logger" "7.5.1"
+    "@storybook/components" "7.5.1"
+    "@storybook/core-events" "7.5.1"
+    "@storybook/global" "^5.0.0"
+    "@storybook/manager-api" "7.5.1"
+    "@storybook/preview-api" "7.5.1"
+    "@storybook/theming" "7.5.1"
+    "@storybook/types" "7.5.1"
+    axe-core "^4.2.0"
+    lodash "^4.17.21"
+    react-resize-detector "^7.1.2"
+
 "@storybook/[email protected]":
   version "7.4.2"
   resolved "https://registry.yarnpkg.com/@storybook/addon-actions/-/addon-actions-7.4.2.tgz#7f1d69a5439d6d39c7453e2167f831f34c620380"
@@ -2238,6 +2257,15 @@
     "@storybook/global" "^5.0.0"
     "@storybook/preview-api" "7.4.2"
 
+"@storybook/[email protected]":
+  version "7.5.1"
+  resolved "https://registry.yarnpkg.com/@storybook/addon-highlight/-/addon-highlight-7.5.1.tgz#575152b8e54464ef6a29f5f58c19c14bfd45730c"
+  integrity sha512-js9OV17kpjRowuaGAPfI9aOn/zzt8P589ACZE+/eYBO9jT65CADwAUxg//Uq0/he+Ac9495pcK3BcYyDeym7/g==
+  dependencies:
+    "@storybook/core-events" "7.5.1"
+    "@storybook/global" "^5.0.0"
+    "@storybook/preview-api" "7.5.1"
+
 "@storybook/[email protected]":
   version "7.4.2"
   resolved "https://registry.yarnpkg.com/@storybook/addon-interactions/-/addon-interactions-7.4.2.tgz#44618d9d00a041058e12d19b774d3cd8ef7baaa9"
@@ -2441,6 +2469,18 @@
     telejson "^7.2.0"
     tiny-invariant "^1.3.1"
 
+"@storybook/[email protected]":
+  version "7.5.1"
+  resolved "https://registry.yarnpkg.com/@storybook/channels/-/channels-7.5.1.tgz#f850c6da3e2cabe51239499d68a8b3d7eb22c621"
+  integrity sha512-7hTGHqvtdFTqRx8LuCznOpqPBYfUeMUt/0IIp7SFuZT585yMPxrYoaK//QmLEWnPb80B8HVTSQi7caUkJb32LA==
+  dependencies:
+    "@storybook/client-logger" "7.5.1"
+    "@storybook/core-events" "7.5.1"
+    "@storybook/global" "^5.0.0"
+    qs "^6.10.0"
+    telejson "^7.2.0"
+    tiny-invariant "^1.3.1"
+
 "@storybook/[email protected]":
   version "7.4.5"
   resolved "https://registry.yarnpkg.com/@storybook/cli/-/cli-7.4.5.tgz#2d21e56f6172ba0a0e162c7d37ded4b07e726d66"
@@ -2502,6 +2542,13 @@
   dependencies:
     "@storybook/global" "^5.0.0"
 
+"@storybook/[email protected]":
+  version "7.5.1"
+  resolved "https://registry.yarnpkg.com/@storybook/client-logger/-/client-logger-7.5.1.tgz#dc4c693900ae1f7ebda9f7faeea46956e70ef184"
+  integrity sha512-XxbLvg0aQRoBrzxYLcVYCbjDkGbkU8Rfb74XbV2CLiO2bIbFPmA1l1Nwbp+wkCGA+O6Z1zwzSl6wcKKqZ6XZCg==
+  dependencies:
+    "@storybook/global" "^5.0.0"
+
 "@storybook/[email protected]":
   version "7.4.5"
   resolved "https://registry.yarnpkg.com/@storybook/codemod/-/codemod-7.4.5.tgz#39cc21a587e1282ad5931e73690c26f48c677140"
@@ -2554,6 +2601,22 @@
     use-resize-observer "^9.1.0"
     util-deprecate "^1.0.2"
 
+"@storybook/[email protected]":
+  version "7.5.1"
+  resolved "https://registry.yarnpkg.com/@storybook/components/-/components-7.5.1.tgz#677eae0e7976939434b5c391fe841ced9b66e082"
+  integrity sha512-fdzzxGBV/Fj9pYwfYL3RZsVUHeBqlfLMBP/L6mPmjaZSwHFqkaRZZUajZc57lCtI+TOy2gY6WH3cPavEtqtgLw==
+  dependencies:
+    "@radix-ui/react-select" "^1.2.2"
+    "@radix-ui/react-toolbar" "^1.0.4"
+    "@storybook/client-logger" "7.5.1"
+    "@storybook/csf" "^0.1.0"
+    "@storybook/global" "^5.0.0"
+    "@storybook/theming" "7.5.1"
+    "@storybook/types" "7.5.1"
+    memoizerific "^1.11.3"
+    use-resize-observer "^9.1.0"
+    util-deprecate "^1.0.2"
+
 "@storybook/[email protected]":
   version "7.4.2"
   resolved "https://registry.yarnpkg.com/@storybook/core-client/-/core-client-7.4.2.tgz#30ae78e856cf1af7898be43f01773c58b52553c8"
@@ -2634,6 +2697,13 @@
   dependencies:
     ts-dedent "^2.0.0"
 
+"@storybook/[email protected]":
+  version "7.5.1"
+  resolved "https://registry.yarnpkg.com/@storybook/core-events/-/core-events-7.5.1.tgz#a6bf057e4605fb8360c76d28a3c36daa676a81a4"
+  integrity sha512-2eyaUhTfmEEqOEZVoCXVITCBn6N7QuZCG2UNxv0l//ED+7MuMiFhVw7kS7H3WOVk65R7gb8qbKFTNX8HFTgBHg==
+  dependencies:
+    ts-dedent "^2.0.0"
+
 "@storybook/[email protected]":
   version "7.4.5"
   resolved "https://registry.yarnpkg.com/@storybook/core-server/-/core-server-7.4.5.tgz#df6bba0178b2470789103463450461d39de54279"
@@ -2809,6 +2879,27 @@
     telejson "^7.2.0"
     ts-dedent "^2.0.0"
 
+"@storybook/[email protected]":
+  version "7.5.1"
+  resolved "https://registry.yarnpkg.com/@storybook/manager-api/-/manager-api-7.5.1.tgz#ebc5c0efc3f9c3451882e61b9b982d898a1fc6c9"
+  integrity sha512-ygwJywluhhE1dpA0jC2D/3NFhMXzFCt+iW4m3cOwexYTuiDWF66AbGOFBx9peE7Wk/Z9doKkf9E3v11enwaidA==
+  dependencies:
+    "@storybook/channels" "7.5.1"
+    "@storybook/client-logger" "7.5.1"
+    "@storybook/core-events" "7.5.1"
+    "@storybook/csf" "^0.1.0"
+    "@storybook/global" "^5.0.0"
+    "@storybook/router" "7.5.1"
+    "@storybook/theming" "7.5.1"
+    "@storybook/types" "7.5.1"
+    dequal "^2.0.2"
+    lodash "^4.17.21"
+    memoizerific "^1.11.3"
+    semver "^7.3.7"
+    store2 "^2.14.2"
+    telejson "^7.2.0"
+    ts-dedent "^2.0.0"
+
 "@storybook/[email protected]":
   version "7.4.5"
   resolved "https://registry.yarnpkg.com/@storybook/manager/-/manager-7.4.5.tgz#efd7c44eac0dc309ee96ab8c4eed54ffabde76d8"
@@ -2874,6 +2965,26 @@
     ts-dedent "^2.0.0"
     util-deprecate "^1.0.2"
 
+"@storybook/[email protected]":
+  version "7.5.1"
+  resolved "https://registry.yarnpkg.com/@storybook/preview-api/-/preview-api-7.5.1.tgz#c21697587d7202941e0f90538115d9c3be21f781"
+  integrity sha512-8xjUbuGmHLmw8tfTUCjXSvMM9r96JaexPFmHdwW6XLe71KKdWp8u96vRDRE5648cd+/of15OjaRtakRKqluA/A==
+  dependencies:
+    "@storybook/channels" "7.5.1"
+    "@storybook/client-logger" "7.5.1"
+    "@storybook/core-events" "7.5.1"
+    "@storybook/csf" "^0.1.0"
+    "@storybook/global" "^5.0.0"
+    "@storybook/types" "7.5.1"
+    "@types/qs" "^6.9.5"
+    dequal "^2.0.2"
+    lodash "^4.17.21"
+    memoizerific "^1.11.3"
+    qs "^6.10.0"
+    synchronous-promise "^2.0.15"
+    ts-dedent "^2.0.0"
+    util-deprecate "^1.0.2"
+
 "@storybook/[email protected]":
   version "7.4.2"
   resolved "https://registry.yarnpkg.com/@storybook/preview/-/preview-7.4.2.tgz#8539e0379f195d12774832bd9c87166b0382fc1e"
@@ -2943,6 +3054,15 @@
     memoizerific "^1.11.3"
     qs "^6.10.0"
 
+"@storybook/[email protected]":
+  version "7.5.1"
+  resolved "https://registry.yarnpkg.com/@storybook/router/-/router-7.5.1.tgz#1d09daa1c7414061fe8c47415b7750a874ad1d9b"
+  integrity sha512-BvKo+IxWwo3dfIG1+vLtZLT4qqkNHL5GTIozTyX04uqt9ByYZL6SJEzxEa1Xn6Qq/fbdQwzCanNHbTlwiTMf7Q==
+  dependencies:
+    "@storybook/client-logger" "7.5.1"
+    memoizerific "^1.11.3"
+    qs "^6.10.0"
+
 "@storybook/[email protected]":
   version "7.4.5"
   resolved "https://registry.yarnpkg.com/@storybook/telemetry/-/telemetry-7.4.5.tgz#e9ce51ce70e763848077bd671057293cc2946f03"
@@ -2986,6 +3106,16 @@
     "@storybook/global" "^5.0.0"
     memoizerific "^1.11.3"
 
+"@storybook/[email protected]":
+  version "7.5.1"
+  resolved "https://registry.yarnpkg.com/@storybook/theming/-/theming-7.5.1.tgz#b3a78f493d644ac8cba5136e04479a58a9ba5546"
+  integrity sha512-ETLAOn10hI4Mkmjsr0HGcM6HbzaURrrPBYmfXOrdbrzEVN+AHW4FlvP9d8fYyP1gdjPE1F39XvF0jYgt1zXiHQ==
+  dependencies:
+    "@emotion/use-insertion-effect-with-fallbacks" "^1.0.0"
+    "@storybook/client-logger" "7.5.1"
+    "@storybook/global" "^5.0.0"
+    memoizerific "^1.11.3"
+
 "@storybook/[email protected]":
   version "7.4.2"
   resolved "https://registry.yarnpkg.com/@storybook/types/-/types-7.4.2.tgz#c7ae7521e6f7a3f811797464724d5e4714597ca9"
@@ -3006,6 +3136,16 @@
     "@types/express" "^4.7.0"
     file-system-cache "2.3.0"
 
+"@storybook/[email protected]":
+  version "7.5.1"
+  resolved "https://registry.yarnpkg.com/@storybook/types/-/types-7.5.1.tgz#fa7f5c4ded412c92af9e6bcb238689c1f4f57d2a"
+  integrity sha512-ZcMSaqFNx1E+G00nRDUi8kKL7gxJVlnCvbKLNj3V85guy4DkIYAZr31yDqze07gDWbjvKoHIp3tKpgE+2i8upQ==
+  dependencies:
+    "@storybook/channels" "7.5.1"
+    "@types/babel__core" "^7.0.0"
+    "@types/express" "^4.7.0"
+    file-system-cache "2.3.0"
+
 "@svgr/[email protected]":
   version "8.0.0"
   resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-add-jsx-attribute/-/babel-plugin-add-jsx-attribute-8.0.0.tgz#4001f5d5dd87fa13303e36ee106e3ff3a7eb8b22"
@@ -3640,7 +3780,7 @@
     "@typescript-eslint/types" "6.7.3"
     eslint-visitor-keys "^3.4.1"
 
-"@vector-im/compound-design-tokens@0.7.0":
+"@vector-im/compound-design-tokens@0.0.7":
   version "0.0.7"
   resolved "https://registry.yarnpkg.com/@vector-im/compound-design-tokens/-/compound-design-tokens-0.0.7.tgz#b0716dd4782dd95900491e45b003b58f93748024"
   integrity sha512-RCQc6qr+s8cp4xKbNi/I3OL43uPCH+N4L9vYf0r+qwRy4WCKdI4QL0TBTV4bOo8hF49z8e+BgU5ZIu5TVQXNMQ==
@@ -4130,6 +4270,11 @@ available-typed-arrays@^1.0.5:
   resolved "https://registry.yarnpkg.com/available-typed-arrays/-/available-typed-arrays-1.0.5.tgz#92f95616501069d07d10edb2fc37d3e1c65123b7"
   integrity sha512-DMD0KiN46eipeziST1LPP/STfDU0sufISXmjSgvVsoU2tqxctQeASejWcfNtxYKqETM1UxQ8sp2OrSBWpHY6sw==
 
+axe-core@^4.2.0:
+  version "4.8.2"
+  resolved "https://registry.yarnpkg.com/axe-core/-/axe-core-4.8.2.tgz#2f6f3cde40935825cf4465e3c1c9e77b240ff6ae"
+  integrity sha512-/dlp0fxyM3R8YW7MFzaHWXrf4zzbr0vaYb23VBFCl83R7nWNPg/yaQw2Dc8jzCMmDVLhSdzH8MjrsuIUuvX+6g==
+
 babel-core@^7.0.0-bridge.0:
   version "7.0.0-bridge.0"
   resolved "https://registry.yarnpkg.com/babel-core/-/babel-core-7.0.0-bridge.0.tgz#95a492ddd90f9b4e9a4a1da14eb335b87b634ece"
@@ -8201,6 +8346,13 @@ [email protected]:
     use-callback-ref "^1.3.0"
     use-sidecar "^1.1.2"
 
+react-resize-detector@^7.1.2:
+  version "7.1.2"
+  resolved "https://registry.yarnpkg.com/react-resize-detector/-/react-resize-detector-7.1.2.tgz#8ef975dd8c3d56f9a5160ac382ef7136dcd2d86c"
+  integrity sha512-zXnPJ2m8+6oq9Nn8zsep/orts9vQv3elrpA+R8XTcW7DVVUJ9vwDwMXaBtykAYjMnkCIaOoK9vObyR7ZgFNlOw==
+  dependencies:
+    lodash "^4.17.21"
+
 react-style-singleton@^2.2.1:
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/react-style-singleton/-/react-style-singleton-2.2.1.tgz#f99e420492b2d8f34d38308ff660b60d0b1205b4"