diff --git a/web-components/packages/carbon-web-components/.storybook/main.ts b/web-components/packages/carbon-web-components/.storybook/main.ts index b98aeab250b3..de5e9915df67 100644 --- a/web-components/packages/carbon-web-components/.storybook/main.ts +++ b/web-components/packages/carbon-web-components/.storybook/main.ts @@ -23,6 +23,7 @@ const config: StorybookConfig = { '@storybook/addon-links', '@storybook/addon-essentials', '@storybook/addon-mdx-gfm', + 'storybook-addon-accessibility-checker', ], framework: { name: '@storybook/web-components-vite', diff --git a/web-components/packages/carbon-web-components/.storybook/preview.js b/web-components/packages/carbon-web-components/.storybook/preview.js index f7489ba63db0..f2bca3082400 100644 --- a/web-components/packages/carbon-web-components/.storybook/preview.js +++ b/web-components/packages/carbon-web-components/.storybook/preview.js @@ -67,6 +67,25 @@ export const globalTypes = { }; export const parameters = { + a11y: { + // Can specify engine as "axe" or "accessibility-checker" (axe default) + engine: 'accessibility-checker', + config: { + rules: [ + { + // To disable a rule across all stories, set `enabled` to `false`. + // Use with caution: all violations of this rule will be ignored! + id: 'html_lang_exists', + enabled: false, + }, + { id: 'page_title_exists', enabled: false }, + { id: 'skip_main_exists', enabled: false }, + { id: 'html_skipnav_exists', enabled: false }, + { id: 'aria_content_in_landmark', enabled: false }, + { id: 'aria_child_tabbable', enabled: false }, + ], + }, + }, actions: { argTypesRegex: '^on.*' }, backgrounds: { // https://storybook.js.org/docs/react/essentials/backgrounds#grid diff --git a/web-components/packages/carbon-web-components/docs/welcome.mdx b/web-components/packages/carbon-web-components/docs/welcome.mdx index d84d8b6ae78e..f98ef3e050fa 100644 --- a/web-components/packages/carbon-web-components/docs/welcome.mdx +++ b/web-components/packages/carbon-web-components/docs/welcome.mdx @@ -1,5 +1,4 @@ import { Meta } from '@storybook/addon-docs/blocks'; -import basicExampleCDN from '../.storybook/basic-example-cdn.html'; @@ -110,14 +109,6 @@ An alternative to using a bundler are CDN artifacts which can be added client si ``` - - ### JavaScript framework integration In addition to the available Web Component versions of Carbon components, this diff --git a/web-components/packages/carbon-web-components/package.json b/web-components/packages/carbon-web-components/package.json index 005fb2dcafc6..06fbd1b065c6 100644 --- a/web-components/packages/carbon-web-components/package.json +++ b/web-components/packages/carbon-web-components/package.json @@ -201,6 +201,7 @@ "sass": "~1.69.0", "sass-loader": "^10.0.0", "storybook": "^7.6.4", + "storybook-addon-accessibility-checker": "^3.1.61-rc.2", "strip-comments": "^1.0.0", "style-loader": "^2.0.0", "temp": "^0.9.0",