diff --git a/code/addons/a11y/src/a11yRunner.ts b/code/addons/a11y/src/a11yRunner.ts index 1d6bd8b2f148..33440623ad17 100644 --- a/code/addons/a11y/src/a11yRunner.ts +++ b/code/addons/a11y/src/a11yRunner.ts @@ -69,9 +69,7 @@ const getParams = async (storyId: string): Promise => { return ( parameters.a11y || { config: {}, - options: { - restoreScroll: true, - }, + options: {}, } ); }; diff --git a/code/addons/a11y/template/stories/parameters.stories.ts b/code/addons/a11y/template/stories/parameters.stories.ts new file mode 100644 index 000000000000..159a6f07fd25 --- /dev/null +++ b/code/addons/a11y/template/stories/parameters.stories.ts @@ -0,0 +1,63 @@ +import globalThis from 'global'; + +export default { + component: globalThis.Components.Html, + args: { + contents: '', + }, + parameters: { + chromatic: { disable: true }, + }, +}; + +export const Options = { + args: { + contents: + '', + }, + parameters: { + a11y: { + config: {}, + options: { + checks: { + 'color-contrast': { enabled: false }, + }, + }, + }, + }, +}; + +export const Config = { + args: { + contents: + '', + }, + parameters: { + a11y: { + config: { + rules: [{ id: 'avoid-inline-spacing', options: {} }], + disableOtherRules: true, + }, + options: {}, + }, + }, +}; + +export const Targetted = { + args: { + contents: '', + }, + parameters: { + a11y: { + element: '.custom-target', + }, + }, +}; + +export const Disabled = { + parameters: { + a11y: { + disable: true, + }, + }, +}; diff --git a/code/addons/a11y/template/stories/tests.stories.ts b/code/addons/a11y/template/stories/tests.stories.ts new file mode 100644 index 000000000000..6c729ad66e05 --- /dev/null +++ b/code/addons/a11y/template/stories/tests.stories.ts @@ -0,0 +1,65 @@ +import globalThis from 'global'; + +export default { + component: globalThis.Components.Html, + args: { + contents: '', + }, + parameters: { + chromatic: { disable: true }, + }, +}; + +export const Violations = { + args: { + contents: ` +
+

empty heading

+

+
+
+

empty button

+ +
+
+

low contrast

+ +
+
+

missing label

+ +
+
+

missing alt

+ +
+ `, + }, +}; + +export const Passes = { + args: { + contents: ` +
+

heading

+

heading 1

+
+
+

button

+ +
+
+

contrast

+ +
+
+

label

+ +
+
+

alt

+ placeholder +
+ `, + }, +}; diff --git a/code/cypress/integration/navigation.spec.ts b/code/cypress/integration/navigation.spec.ts index 120d4e978918..cb8e1d13768f 100644 --- a/code/cypress/integration/navigation.spec.ts +++ b/code/cypress/integration/navigation.spec.ts @@ -28,13 +28,13 @@ describe('Routing', () => { it('should navigate to story addons-a11y-basebutton--default', () => { visit('official-storybook'); - cy.get('#addons-a11y-basebutton--label').click({ force: true }); - cy.url().should('include', 'path=/story/addons-a11y-basebutton--label'); + cy.get('#addons-controls--basic').click({ force: true }); + cy.url().should('include', 'path=/story/addons-controls--basic'); }); it('should directly visit a certain story and render correctly', () => { - visit('official-storybook/?path=/story/addons-a11y-basebutton--label'); + visit('official-storybook/?path=/story/basics-actionbar--single-item'); - cy.getStoryElement().should('contain.text', 'Testing the a11y addon'); + cy.getStoryElement().should('contain.text', 'Clear'); }); }); diff --git a/code/examples/ember-cli/stories/addon-a11y.stories.js b/code/examples/ember-cli/stories/addon-a11y.stories.js deleted file mode 100644 index 92cb2a614cfd..000000000000 --- a/code/examples/ember-cli/stories/addon-a11y.stories.js +++ /dev/null @@ -1,17 +0,0 @@ -import { hbs } from 'ember-cli-htmlbars'; - -export default { - title: 'Addon/a11y', - parameters: { - options: { selectedPanel: '@storybook/a11y/panel' }, - }, -}; - -export const Default = () => hbs``; -export const Label = () => hbs``; -export const Disabled = () => hbs``; - -export const InvalidContrast = () => - hbs``; - -InvalidContrast.storyName = 'Invalid contrast'; diff --git a/code/examples/html-kitchen-sink/.storybook/preview.js b/code/examples/html-kitchen-sink/.storybook/preview.js index 8bf7046aef32..9952d3d77794 100644 --- a/code/examples/html-kitchen-sink/.storybook/preview.js +++ b/code/examples/html-kitchen-sink/.storybook/preview.js @@ -1,11 +1,4 @@ export const parameters = { - a11y: { - config: {}, - options: { - checks: { 'color-contrast': { options: { noScroll: true } } }, - restoreScroll: true, - }, - }, docs: { iframeHeight: '200px', }, diff --git a/code/examples/html-kitchen-sink/stories/__snapshots__/addon-a11y.stories.storyshot b/code/examples/html-kitchen-sink/stories/__snapshots__/addon-a11y.stories.storyshot deleted file mode 100644 index d2f9a117a089..000000000000 --- a/code/examples/html-kitchen-sink/stories/__snapshots__/addon-a11y.stories.storyshot +++ /dev/null @@ -1,27 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`Storyshots Addons/a11y Default 1`] = ` -`; - -exports[`Storyshots Addons/a11y Invalid contrast 1`] = ` - -`; - -exports[`Storyshots Addons/a11y Label 1`] = ` - -`; diff --git a/code/examples/html-kitchen-sink/stories/addon-a11y.stories.js b/code/examples/html-kitchen-sink/stories/addon-a11y.stories.js deleted file mode 100644 index f9ce4af87a50..000000000000 --- a/code/examples/html-kitchen-sink/stories/addon-a11y.stories.js +++ /dev/null @@ -1,27 +0,0 @@ -import global from 'global'; - -const { document, setTimeout } = global; -const text = 'Testing the a11y addon'; - -export default { - title: 'Addons/a11y', - parameters: { - options: { selectedPanel: 'storybook/a11y/panel' }, - }, -}; - -export const Default = () => ``; -export const Label = () => ``; -export const Disabled = () => ``; -export const Story4 = () => - ``; -Story4.storyName = 'Invalid contrast'; - -export const Story5 = () => { - const div = document.createElement('div'); - setTimeout(() => { - div.innerHTML = ``; - }, 1000); - return div; -}; -Story5.storyName = 'Delayed render'; diff --git a/code/examples/official-storybook/preview.js b/code/examples/official-storybook/preview.js index e4e0ef7fa7d9..d9a9ffa5ed45 100644 --- a/code/examples/official-storybook/preview.js +++ b/code/examples/official-storybook/preview.js @@ -173,13 +173,6 @@ export const decorators = [ export const parameters = { exportedParameter: 'exportedParameter', - a11y: { - config: {}, - options: { - checks: { 'color-contrast': { options: { noScroll: true } } }, - restoreScroll: true, - }, - }, actions: { argTypesRegex: '^on.*' }, options: { storySort: (a, b) => diff --git a/code/examples/official-storybook/stories/addon-a11y/base-button.stories.js b/code/examples/official-storybook/stories/addon-a11y/base-button.stories.js deleted file mode 100644 index 94d91b5b9ed5..000000000000 --- a/code/examples/official-storybook/stories/addon-a11y/base-button.stories.js +++ /dev/null @@ -1,30 +0,0 @@ -import React from 'react'; -import BaseButton from '../../components/BaseButton'; -import DelayedRender from '../../components/DelayedRender'; - -const text = 'Testing the a11y addon'; - -export default { - title: 'Addons/A11y/BaseButton', - component: BaseButton, - parameters: { - options: { selectedPanel: 'storybook/a11y/panel' }, - }, -}; - -export const Default = () => ; -export const Label = () => ; -export const Disabled = () => ; - -export const InvalidContrast = () => ( - // FIXME: has no effect on score - -); -InvalidContrast.storyName = 'Invalid contrast'; - -export const DelayedRenderStory = () => ( - - - -); -DelayedRenderStory.storyName = 'delayed render'; diff --git a/code/examples/official-storybook/stories/addon-a11y/button.stories.js b/code/examples/official-storybook/stories/addon-a11y/button.stories.js deleted file mode 100644 index ba4521b71929..000000000000 --- a/code/examples/official-storybook/stories/addon-a11y/button.stories.js +++ /dev/null @@ -1,19 +0,0 @@ -import React from 'react'; -import Button from '../../components/addon-a11y/Button'; - -const text = 'Testing the a11y addon'; - -export default { - title: 'Addons/A11y/Button', - component: Button, - parameters: { - options: { selectedPanel: 'storybook/a11y/panel' }, - }, -}; - -export const Default = () => `; -export const Label: StoryFn = () => html``; -export const Disabled: StoryFn = () => html``; -export const InvalidContrast: StoryFn = () => html` - -`; - -export const DelayedRender: StoryFn = () => { - const div = document.createElement('div'); - setTimeout(() => { - div.innerHTML = ``; - }, 1000); - return div; -}; diff --git a/code/lib/cli/src/upgrade.ts b/code/lib/cli/src/upgrade.ts index 90aeaa3c56b7..8bad1e4be703 100644 --- a/code/lib/cli/src/upgrade.ts +++ b/code/lib/cli/src/upgrade.ts @@ -73,7 +73,9 @@ const warnPackages = (pkgs: Package[]) => pkgs.forEach((pkg) => logger.warn(`- ${formatPackage(pkg)}`)); export const checkVersionConsistency = () => { - const lines = spawnSync('npm', ['ls'], { stdio: 'pipe', shell: true }).output.toString().split('\n'); + const lines = spawnSync('npm', ['ls'], { stdio: 'pipe', shell: true }) + .output.toString() + .split('\n'); const storybookPackages = lines .map(getStorybookVersion) .filter(Boolean) diff --git a/code/renderers/react/template/components/Html.jsx b/code/renderers/react/template/components/Html.jsx new file mode 100644 index 000000000000..974118ca5640 --- /dev/null +++ b/code/renderers/react/template/components/Html.jsx @@ -0,0 +1,9 @@ +import React from 'react'; +import PropTypes from 'prop-types'; + +// eslint-disable-next-line react/no-danger +export const Html = ({ contents }) =>
; + +Html.propTypes = { + contents: PropTypes.string.isRequired, +}; diff --git a/code/renderers/react/template/components/index.js b/code/renderers/react/template/components/index.js index bcf61d0f80eb..4f1579fddddd 100644 --- a/code/renderers/react/template/components/index.js +++ b/code/renderers/react/template/components/index.js @@ -2,5 +2,6 @@ import globalThis from 'global'; import { Button } from './Button.jsx'; import { Pre } from './Pre.jsx'; +import { Html } from './Html.jsx'; -globalThis.Components = { Button, Pre }; +globalThis.Components = { Button, Html, Pre }; diff --git a/code/renderers/svelte/template/components/Html.svelte b/code/renderers/svelte/template/components/Html.svelte new file mode 100644 index 000000000000..b76ec4de7f1a --- /dev/null +++ b/code/renderers/svelte/template/components/Html.svelte @@ -0,0 +1,8 @@ + + +
{@html contents}>
diff --git a/code/renderers/svelte/template/components/index.js b/code/renderers/svelte/template/components/index.js index be8e3993b9c4..cd72160c2659 100644 --- a/code/renderers/svelte/template/components/index.js +++ b/code/renderers/svelte/template/components/index.js @@ -1,6 +1,7 @@ import globalThis from 'global'; import Button from './Button.svelte'; +import Html from './Html.svelte'; import Pre from './Pre.svelte'; -globalThis.Components = { Button, Pre }; +globalThis.Components = { Button, Html, Pre }; diff --git a/code/renderers/vue3/template/components/Html.vue b/code/renderers/vue3/template/components/Html.vue new file mode 100644 index 000000000000..672c95661612 --- /dev/null +++ b/code/renderers/vue3/template/components/Html.vue @@ -0,0 +1,20 @@ + + + diff --git a/code/renderers/vue3/template/components/index.js b/code/renderers/vue3/template/components/index.js index 33b27eb659d4..cff22be00427 100644 --- a/code/renderers/vue3/template/components/index.js +++ b/code/renderers/vue3/template/components/index.js @@ -1,6 +1,7 @@ import globalThis from 'global'; import Button from './Button.vue'; +import Html from './Html.vue'; import Pre from './Pre.vue'; -globalThis.Components = { Button, Pre }; +globalThis.Components = { Button, Html, Pre }; diff --git a/scripts/sandbox.ts b/scripts/sandbox.ts index b9f6cb1d717c..4eb22514fa42 100644 --- a/scripts/sandbox.ts +++ b/scripts/sandbox.ts @@ -14,6 +14,7 @@ import prompts from 'prompts'; import type { AbortController } from 'node-abort-controller'; import command from 'execa'; +import dedent from 'ts-dedent'; import { createOptions, getOptionsOrPrompt, OptionValues } from './utils/options'; import { executeCLIStep } from './utils/cli-step'; import { installYarn2, configureYarn2ForVerdaccio, addPackageResolutions } from './utils/yarn'; @@ -23,13 +24,13 @@ import { ConfigFile, readConfig, writeConfig } from '../code/lib/csf-tools'; import { babelParse } from '../code/lib/csf-tools/src/babelParse'; import TEMPLATES from '../code/lib/cli/src/repro-templates'; import { servePackages } from './utils/serve-packages'; -import dedent from 'ts-dedent'; type Template = keyof typeof TEMPLATES; const templates: Template[] = Object.keys(TEMPLATES) as any; const addons = ['a11y', 'storysource']; const defaultAddons = [ 'actions', + 'a11y', 'backgrounds', 'controls', 'docs',