Add accessibility add-on for Storybook

This will make it easier to detect and debug accessibility issues
inside Storybook.
This commit is contained in:
Vincent 2023-06-15 11:17:42 +02:00 коммит произвёл Vincent
Родитель 48163094bd
Коммит 7575b860fa
3 изменённых файлов: 431 добавлений и 0 удалений

Просмотреть файл

@ -2,6 +2,7 @@ import type { StorybookConfig } from "@storybook/nextjs";
const config: StorybookConfig = {
stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
addons: [
"@storybook/addon-a11y",
"@storybook/addon-links",
"@storybook/addon-essentials",
"@storybook/addon-interactions",

429
package-lock.json сгенерированный
Просмотреть файл

@ -42,6 +42,7 @@
"devDependencies": {
"@google-cloud/functions-framework": "^3.2.0",
"@playwright/test": "^1.32.3",
"@storybook/addon-a11y": "^7.0.21",
"@storybook/addon-essentials": "^7.0.18",
"@storybook/addon-interactions": "^7.0.18",
"@storybook/addon-links": "^7.0.18",
@ -3995,6 +3996,246 @@
"integrity": "sha512-XJfwUVUKDHF5ugKwIcxEgc9k8b7HbznCp6eUfWgu710hMPNIO4aw4/zB5RogDQz8nd6gyCDpU9O/m6qYEWY6yQ==",
"dev": true
},
"node_modules/@storybook/addon-a11y": {
"version": "7.0.21",
"resolved": "https://registry.npmjs.org/@storybook/addon-a11y/-/addon-a11y-7.0.21.tgz",
"integrity": "sha512-bUpJXzXm6cVcHdyIzN004m/mC/yU314dBRrmXmnuZQV5FYuaykrJ7BxmjlsZovl/UZ5fcPm3TdstqqQ1UJMsrQ==",
"dev": true,
"dependencies": {
"@storybook/addon-highlight": "7.0.21",
"@storybook/channels": "7.0.21",
"@storybook/client-logger": "7.0.21",
"@storybook/components": "7.0.21",
"@storybook/core-events": "7.0.21",
"@storybook/global": "^5.0.0",
"@storybook/manager-api": "7.0.21",
"@storybook/preview-api": "7.0.21",
"@storybook/theming": "7.0.21",
"@storybook/types": "7.0.21",
"axe-core": "^4.2.0",
"lodash": "^4.17.21",
"react-resize-detector": "^7.1.2"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/storybook"
},
"peerDependencies": {
"react": "^16.8.0 || ^17.0.0 || ^18.0.0",
"react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
},
"peerDependenciesMeta": {
"react": {
"optional": true
},
"react-dom": {
"optional": true
}
}
},
"node_modules/@storybook/addon-a11y/node_modules/@storybook/addon-highlight": {
"version": "7.0.21",
"resolved": "https://registry.npmjs.org/@storybook/addon-highlight/-/addon-highlight-7.0.21.tgz",
"integrity": "sha512-BMMkqLza05VeQl4+U7Gb9GrYm0BnLCU0WzcpPXlqbAZhRw1KliXyofH8buVzXoJ1Ozr9+sOHgc3ujThOrG3KAQ==",
"dev": true,
"dependencies": {
"@storybook/core-events": "7.0.21",
"@storybook/global": "^5.0.0",
"@storybook/preview-api": "7.0.21"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/storybook"
}
},
"node_modules/@storybook/addon-a11y/node_modules/@storybook/channel-postmessage": {
"version": "7.0.21",
"resolved": "https://registry.npmjs.org/@storybook/channel-postmessage/-/channel-postmessage-7.0.21.tgz",
"integrity": "sha512-zlm40ZMhi76gVPMJsOLyorcKQy4RpAoVQfdXne83x+xP/A2ppOyXEAhC9pQ5oaKM+ag3EQuIS+yK4zGIeriaYg==",
"dev": true,
"dependencies": {
"@storybook/channels": "7.0.21",
"@storybook/client-logger": "7.0.21",
"@storybook/core-events": "7.0.21",
"@storybook/global": "^5.0.0",
"qs": "^6.10.0",
"telejson": "^7.0.3"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/storybook"
}
},
"node_modules/@storybook/addon-a11y/node_modules/@storybook/channels": {
"version": "7.0.21",
"resolved": "https://registry.npmjs.org/@storybook/channels/-/channels-7.0.21.tgz",
"integrity": "sha512-8h4lvGQsdWrn/eLW9D9ZGB8FGTzRuC1almykVThb9SkATKZjUyUvtRT+BklsDIinptham83+0QiSdTrv52kAfA==",
"dev": true,
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/storybook"
}
},
"node_modules/@storybook/addon-a11y/node_modules/@storybook/client-logger": {
"version": "7.0.21",
"resolved": "https://registry.npmjs.org/@storybook/client-logger/-/client-logger-7.0.21.tgz",
"integrity": "sha512-ENoBDuVr3RPepm6cBp61GGtGGUuogBzqMUaN4Rti+wYx9sKJlmDA8SR/fMk+GxeiJ5NOnYoa1Q1kCaF8/VFD9A==",
"dev": true,
"dependencies": {
"@storybook/global": "^5.0.0"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/storybook"
}
},
"node_modules/@storybook/addon-a11y/node_modules/@storybook/components": {
"version": "7.0.21",
"resolved": "https://registry.npmjs.org/@storybook/components/-/components-7.0.21.tgz",
"integrity": "sha512-5h3ptaQxSwFetd0dhlNTZeaLfDYY7Mj9n/N6pTs71piW5gaM+o/Na7EMhuDDWa001zBXYdJYdcKU/a7FDQDuGQ==",
"dev": true,
"dependencies": {
"@storybook/client-logger": "7.0.21",
"@storybook/csf": "^0.1.0",
"@storybook/global": "^5.0.0",
"@storybook/theming": "7.0.21",
"@storybook/types": "7.0.21",
"memoizerific": "^1.11.3",
"use-resize-observer": "^9.1.0",
"util-deprecate": "^1.0.2"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/storybook"
},
"peerDependencies": {
"react": "^16.8.0 || ^17.0.0 || ^18.0.0",
"react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
}
},
"node_modules/@storybook/addon-a11y/node_modules/@storybook/core-events": {
"version": "7.0.21",
"resolved": "https://registry.npmjs.org/@storybook/core-events/-/core-events-7.0.21.tgz",
"integrity": "sha512-Qjtjrj+hFaC3b00p6q2aAxyLaRQWBf5eEPw5r0djcm5esXIs/q2xvu2xby7PR6KnKg/jT1bU9TOBxWbtKycijQ==",
"dev": true,
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/storybook"
}
},
"node_modules/@storybook/addon-a11y/node_modules/@storybook/manager-api": {
"version": "7.0.21",
"resolved": "https://registry.npmjs.org/@storybook/manager-api/-/manager-api-7.0.21.tgz",
"integrity": "sha512-YgS676/OMq2KmvYomcNzjwsVUtMYUylIt/0z5Fmg7exPXubEGpRd4OZIrQGHgcLKQRKZMK9GcsSkxebHO+qrsg==",
"dev": true,
"dependencies": {
"@storybook/channels": "7.0.21",
"@storybook/client-logger": "7.0.21",
"@storybook/core-events": "7.0.21",
"@storybook/csf": "^0.1.0",
"@storybook/global": "^5.0.0",
"@storybook/router": "7.0.21",
"@storybook/theming": "7.0.21",
"@storybook/types": "7.0.21",
"dequal": "^2.0.2",
"lodash": "^4.17.21",
"memoizerific": "^1.11.3",
"semver": "^7.3.7",
"store2": "^2.14.2",
"telejson": "^7.0.3",
"ts-dedent": "^2.0.0"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/storybook"
},
"peerDependencies": {
"react": "^16.8.0 || ^17.0.0 || ^18.0.0",
"react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
}
},
"node_modules/@storybook/addon-a11y/node_modules/@storybook/preview-api": {
"version": "7.0.21",
"resolved": "https://registry.npmjs.org/@storybook/preview-api/-/preview-api-7.0.21.tgz",
"integrity": "sha512-IvOxQdSLV3B+82zS8MDHSO/pMEQdKIXJaz3knizhRuuB+cCdfv2Sro3IL3l8m2+90ySSwkfCqVEI4tdIC1ODXg==",
"dev": true,
"dependencies": {
"@storybook/channel-postmessage": "7.0.21",
"@storybook/channels": "7.0.21",
"@storybook/client-logger": "7.0.21",
"@storybook/core-events": "7.0.21",
"@storybook/csf": "^0.1.0",
"@storybook/global": "^5.0.0",
"@storybook/types": "7.0.21",
"@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"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/storybook"
}
},
"node_modules/@storybook/addon-a11y/node_modules/@storybook/router": {
"version": "7.0.21",
"resolved": "https://registry.npmjs.org/@storybook/router/-/router-7.0.21.tgz",
"integrity": "sha512-zVEwW8PPrg3UXaBlVw9s5wXlJhm9AwG0Lta9Oc0limg1JeXtE1alV+VH8b/O5ECjp34mTXHIAyNU1EF0bozgVw==",
"dev": true,
"dependencies": {
"@storybook/client-logger": "7.0.21",
"memoizerific": "^1.11.3",
"qs": "^6.10.0"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/storybook"
},
"peerDependencies": {
"react": "^16.8.0 || ^17.0.0 || ^18.0.0",
"react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
}
},
"node_modules/@storybook/addon-a11y/node_modules/@storybook/theming": {
"version": "7.0.21",
"resolved": "https://registry.npmjs.org/@storybook/theming/-/theming-7.0.21.tgz",
"integrity": "sha512-tgWoT0IdyPQIg+s/JMnP+MGTsAvNm6FJuiuKPebngids6rdYQ3EA5uQjBVV7De650JLhBFTFocS2Puj4Lti2bw==",
"dev": true,
"dependencies": {
"@emotion/use-insertion-effect-with-fallbacks": "^1.0.0",
"@storybook/client-logger": "7.0.21",
"@storybook/global": "^5.0.0",
"memoizerific": "^1.11.3"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/storybook"
},
"peerDependencies": {
"react": "^16.8.0 || ^17.0.0 || ^18.0.0",
"react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
}
},
"node_modules/@storybook/addon-a11y/node_modules/@storybook/types": {
"version": "7.0.21",
"resolved": "https://registry.npmjs.org/@storybook/types/-/types-7.0.21.tgz",
"integrity": "sha512-gZ8XEsg0upyiisbe2Qv+G+XN2+nZCxj6vJKvgWxuBPCjqN3Uw34cgDrIJuSa8YjE/yl/nsaV5s0xYdFXAl7JVQ==",
"dev": true,
"dependencies": {
"@storybook/channels": "7.0.21",
"@types/babel__core": "^7.0.0",
"@types/express": "^4.7.0",
"file-system-cache": "^2.0.0"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/storybook"
}
},
"node_modules/@storybook/addon-actions": {
"version": "7.0.20",
"resolved": "https://registry.npmjs.org/@storybook/addon-actions/-/addon-actions-7.0.20.tgz",
@ -18385,6 +18626,19 @@
"node": ">=0.10.0"
}
},
"node_modules/react-resize-detector": {
"version": "7.1.2",
"resolved": "https://registry.npmjs.org/react-resize-detector/-/react-resize-detector-7.1.2.tgz",
"integrity": "sha512-zXnPJ2m8+6oq9Nn8zsep/orts9vQv3elrpA+R8XTcW7DVVUJ9vwDwMXaBtykAYjMnkCIaOoK9vObyR7ZgFNlOw==",
"dev": true,
"dependencies": {
"lodash": "^4.17.21"
},
"peerDependencies": {
"react": "^16.0.0 || ^17.0.0 || ^18.0.0",
"react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0"
}
},
"node_modules/read-pkg": {
"version": "5.2.0",
"resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-5.2.0.tgz",
@ -25012,6 +25266,172 @@
"integrity": "sha512-XJfwUVUKDHF5ugKwIcxEgc9k8b7HbznCp6eUfWgu710hMPNIO4aw4/zB5RogDQz8nd6gyCDpU9O/m6qYEWY6yQ==",
"dev": true
},
"@storybook/addon-a11y": {
"version": "7.0.21",
"resolved": "https://registry.npmjs.org/@storybook/addon-a11y/-/addon-a11y-7.0.21.tgz",
"integrity": "sha512-bUpJXzXm6cVcHdyIzN004m/mC/yU314dBRrmXmnuZQV5FYuaykrJ7BxmjlsZovl/UZ5fcPm3TdstqqQ1UJMsrQ==",
"dev": true,
"requires": {
"@storybook/addon-highlight": "7.0.21",
"@storybook/channels": "7.0.21",
"@storybook/client-logger": "7.0.21",
"@storybook/components": "7.0.21",
"@storybook/core-events": "7.0.21",
"@storybook/global": "^5.0.0",
"@storybook/manager-api": "7.0.21",
"@storybook/preview-api": "7.0.21",
"@storybook/theming": "7.0.21",
"@storybook/types": "7.0.21",
"axe-core": "^4.2.0",
"lodash": "^4.17.21",
"react-resize-detector": "^7.1.2"
},
"dependencies": {
"@storybook/addon-highlight": {
"version": "7.0.21",
"resolved": "https://registry.npmjs.org/@storybook/addon-highlight/-/addon-highlight-7.0.21.tgz",
"integrity": "sha512-BMMkqLza05VeQl4+U7Gb9GrYm0BnLCU0WzcpPXlqbAZhRw1KliXyofH8buVzXoJ1Ozr9+sOHgc3ujThOrG3KAQ==",
"dev": true,
"requires": {
"@storybook/core-events": "7.0.21",
"@storybook/global": "^5.0.0",
"@storybook/preview-api": "7.0.21"
}
},
"@storybook/channel-postmessage": {
"version": "7.0.21",
"resolved": "https://registry.npmjs.org/@storybook/channel-postmessage/-/channel-postmessage-7.0.21.tgz",
"integrity": "sha512-zlm40ZMhi76gVPMJsOLyorcKQy4RpAoVQfdXne83x+xP/A2ppOyXEAhC9pQ5oaKM+ag3EQuIS+yK4zGIeriaYg==",
"dev": true,
"requires": {
"@storybook/channels": "7.0.21",
"@storybook/client-logger": "7.0.21",
"@storybook/core-events": "7.0.21",
"@storybook/global": "^5.0.0",
"qs": "^6.10.0",
"telejson": "^7.0.3"
}
},
"@storybook/channels": {
"version": "7.0.21",
"resolved": "https://registry.npmjs.org/@storybook/channels/-/channels-7.0.21.tgz",
"integrity": "sha512-8h4lvGQsdWrn/eLW9D9ZGB8FGTzRuC1almykVThb9SkATKZjUyUvtRT+BklsDIinptham83+0QiSdTrv52kAfA==",
"dev": true
},
"@storybook/client-logger": {
"version": "7.0.21",
"resolved": "https://registry.npmjs.org/@storybook/client-logger/-/client-logger-7.0.21.tgz",
"integrity": "sha512-ENoBDuVr3RPepm6cBp61GGtGGUuogBzqMUaN4Rti+wYx9sKJlmDA8SR/fMk+GxeiJ5NOnYoa1Q1kCaF8/VFD9A==",
"dev": true,
"requires": {
"@storybook/global": "^5.0.0"
}
},
"@storybook/components": {
"version": "7.0.21",
"resolved": "https://registry.npmjs.org/@storybook/components/-/components-7.0.21.tgz",
"integrity": "sha512-5h3ptaQxSwFetd0dhlNTZeaLfDYY7Mj9n/N6pTs71piW5gaM+o/Na7EMhuDDWa001zBXYdJYdcKU/a7FDQDuGQ==",
"dev": true,
"requires": {
"@storybook/client-logger": "7.0.21",
"@storybook/csf": "^0.1.0",
"@storybook/global": "^5.0.0",
"@storybook/theming": "7.0.21",
"@storybook/types": "7.0.21",
"memoizerific": "^1.11.3",
"use-resize-observer": "^9.1.0",
"util-deprecate": "^1.0.2"
}
},
"@storybook/core-events": {
"version": "7.0.21",
"resolved": "https://registry.npmjs.org/@storybook/core-events/-/core-events-7.0.21.tgz",
"integrity": "sha512-Qjtjrj+hFaC3b00p6q2aAxyLaRQWBf5eEPw5r0djcm5esXIs/q2xvu2xby7PR6KnKg/jT1bU9TOBxWbtKycijQ==",
"dev": true
},
"@storybook/manager-api": {
"version": "7.0.21",
"resolved": "https://registry.npmjs.org/@storybook/manager-api/-/manager-api-7.0.21.tgz",
"integrity": "sha512-YgS676/OMq2KmvYomcNzjwsVUtMYUylIt/0z5Fmg7exPXubEGpRd4OZIrQGHgcLKQRKZMK9GcsSkxebHO+qrsg==",
"dev": true,
"requires": {
"@storybook/channels": "7.0.21",
"@storybook/client-logger": "7.0.21",
"@storybook/core-events": "7.0.21",
"@storybook/csf": "^0.1.0",
"@storybook/global": "^5.0.0",
"@storybook/router": "7.0.21",
"@storybook/theming": "7.0.21",
"@storybook/types": "7.0.21",
"dequal": "^2.0.2",
"lodash": "^4.17.21",
"memoizerific": "^1.11.3",
"semver": "^7.3.7",
"store2": "^2.14.2",
"telejson": "^7.0.3",
"ts-dedent": "^2.0.0"
}
},
"@storybook/preview-api": {
"version": "7.0.21",
"resolved": "https://registry.npmjs.org/@storybook/preview-api/-/preview-api-7.0.21.tgz",
"integrity": "sha512-IvOxQdSLV3B+82zS8MDHSO/pMEQdKIXJaz3knizhRuuB+cCdfv2Sro3IL3l8m2+90ySSwkfCqVEI4tdIC1ODXg==",
"dev": true,
"requires": {
"@storybook/channel-postmessage": "7.0.21",
"@storybook/channels": "7.0.21",
"@storybook/client-logger": "7.0.21",
"@storybook/core-events": "7.0.21",
"@storybook/csf": "^0.1.0",
"@storybook/global": "^5.0.0",
"@storybook/types": "7.0.21",
"@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/router": {
"version": "7.0.21",
"resolved": "https://registry.npmjs.org/@storybook/router/-/router-7.0.21.tgz",
"integrity": "sha512-zVEwW8PPrg3UXaBlVw9s5wXlJhm9AwG0Lta9Oc0limg1JeXtE1alV+VH8b/O5ECjp34mTXHIAyNU1EF0bozgVw==",
"dev": true,
"requires": {
"@storybook/client-logger": "7.0.21",
"memoizerific": "^1.11.3",
"qs": "^6.10.0"
}
},
"@storybook/theming": {
"version": "7.0.21",
"resolved": "https://registry.npmjs.org/@storybook/theming/-/theming-7.0.21.tgz",
"integrity": "sha512-tgWoT0IdyPQIg+s/JMnP+MGTsAvNm6FJuiuKPebngids6rdYQ3EA5uQjBVV7De650JLhBFTFocS2Puj4Lti2bw==",
"dev": true,
"requires": {
"@emotion/use-insertion-effect-with-fallbacks": "^1.0.0",
"@storybook/client-logger": "7.0.21",
"@storybook/global": "^5.0.0",
"memoizerific": "^1.11.3"
}
},
"@storybook/types": {
"version": "7.0.21",
"resolved": "https://registry.npmjs.org/@storybook/types/-/types-7.0.21.tgz",
"integrity": "sha512-gZ8XEsg0upyiisbe2Qv+G+XN2+nZCxj6vJKvgWxuBPCjqN3Uw34cgDrIJuSa8YjE/yl/nsaV5s0xYdFXAl7JVQ==",
"dev": true,
"requires": {
"@storybook/channels": "7.0.21",
"@types/babel__core": "^7.0.0",
"@types/express": "^4.7.0",
"file-system-cache": "^2.0.0"
}
}
}
},
"@storybook/addon-actions": {
"version": "7.0.20",
"resolved": "https://registry.npmjs.org/@storybook/addon-actions/-/addon-actions-7.0.20.tgz",
@ -35770,6 +36190,15 @@
"integrity": "sha512-F27qZr8uUqwhWZboondsPx8tnC3Ct3SxZA3V5WyEvujRyyNv0VYPhoBg1gZ8/MV5tubQp76Trw8lTv9hzRBa+A==",
"dev": true
},
"react-resize-detector": {
"version": "7.1.2",
"resolved": "https://registry.npmjs.org/react-resize-detector/-/react-resize-detector-7.1.2.tgz",
"integrity": "sha512-zXnPJ2m8+6oq9Nn8zsep/orts9vQv3elrpA+R8XTcW7DVVUJ9vwDwMXaBtykAYjMnkCIaOoK9vObyR7ZgFNlOw==",
"dev": true,
"requires": {
"lodash": "^4.17.21"
}
},
"read-pkg": {
"version": "5.2.0",
"resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-5.2.0.tgz",

Просмотреть файл

@ -80,6 +80,7 @@
"devDependencies": {
"@google-cloud/functions-framework": "^3.2.0",
"@playwright/test": "^1.32.3",
"@storybook/addon-a11y": "^7.0.21",
"@storybook/addon-essentials": "^7.0.18",
"@storybook/addon-interactions": "^7.0.18",
"@storybook/addon-links": "^7.0.18",