From 6b337506e7207a6c24b9db9ea63061efbb41eec8 Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Mon, 13 Jan 2025 12:07:25 +0100 Subject: [PATCH] Addon A11y: Change default element selector --- MIGRATION.md | 16 +++++++++- code/addons/a11y/src/a11yRunner.ts | 2 +- .../storybook-addon-a11y-component-config.md | 24 +++++++-------- .../storybook-addon-a11y-global-config.md | 4 +-- .../storybook-addon-a11y-story-config.md | 30 +++++++++---------- docs/_snippets/test-runner-a11y-config.md | 4 +-- docs/_snippets/test-runner-a11y-configure.md | 4 +-- docs/_snippets/test-runner-a11y-disable.md | 4 +-- 8 files changed, 51 insertions(+), 37 deletions(-) diff --git a/MIGRATION.md b/MIGRATION.md index 6ed5766c26ff..d955843ca681 100644 --- a/MIGRATION.md +++ b/MIGRATION.md @@ -4,6 +4,7 @@ - [Introducing features.developmentModeForBuild](#introducing-featuresdevelopmentmodeforbuild) - [Added source code panel to docs](#added-source-code-panel-to-docs) - [Addon-a11y: Component test integration](#addon-a11y-component-test-integration) + - [Addon-a11y: Changing the default element selector](#addon-a11y-changing-the-default-element-selector) - [Addon-a11y: Deprecated `parameters.a11y.manual`](#addon-a11y-deprecated-parametersa11ymanual) - [Addon-test: You should no longer copy the content of `viteFinal` to your configuration](#addon-test-you-should-no-longer-copy-the-content-of-vitefinal-to-your-configuration) - [Addon-test: Indexing behavior of @storybook/experimental-addon-test is changed](#addon-test-indexing-behavior-of-storybookexperimental-addon-test-is-changed) @@ -482,11 +483,24 @@ const annotations = setProjectAnnotations([ beforeAll(annotations.beforeAll); ``` +### Addon-a11y: Changing the default element selector + +In Storybook 8.5, we changed the default element selector used by the Accessibility addon from `#storybook-root` to `body`. This change was made to align with the default element selector used by the Test addon when running accessibility tests via Vitest. Additionally, Tooltips or Popovers that are rendered outside the `#storybook-root` element will now be included in the accessibility tests per default allowing for a more comprehensive test coverage. If you want to fall back to the previous behavior, you can set the `a11y.element` parameter in your `.storybook/preview.` configuration: + +```diff +// .storybook/preview.js +export const parameters = { + a11y: { ++ element: '#storybook-root', + }, +}; +``` + ### Addon-a11y: Deprecated `parameters.a11y.manual` We have deprecated `parameters.a11y.manual` in 8.5. Please use `globals.a11y.manual` instead. -### Addon-test: You should no longer copy the content of `viteFinal` to your configuration +### Addon-test: You should no longer copy the content of `viteFinal` to your configuration In version 8.4 of `@storybook/experimental-addon-test`, it was required to copy any custom configuration you had in `viteFinal` in `main.ts`, to the Vitest Storybook project. This is no longer necessary, as the Storybook Test plugin will automatically include your `viteFinal` configuration. You should remove any configurations you might already have in `viteFinal` to remove duplicates. diff --git a/code/addons/a11y/src/a11yRunner.ts b/code/addons/a11y/src/a11yRunner.ts index be6de1be255f..626ec3135741 100644 --- a/code/addons/a11y/src/a11yRunner.ts +++ b/code/addons/a11y/src/a11yRunner.ts @@ -41,7 +41,7 @@ const runNext = async () => { export const run = async (input: A11yParameters = defaultParameters) => { const { default: axe } = await import('axe-core'); - const { element = '#storybook-root', config = {}, options = {} } = input; + const { element = 'body', config = {}, options = {} } = input; const htmlElement = document.querySelector(element as string) ?? document.body; if (!htmlElement) { diff --git a/docs/_snippets/storybook-addon-a11y-component-config.md b/docs/_snippets/storybook-addon-a11y-component-config.md index 97f1d07c1eeb..d9098f03ebbc 100644 --- a/docs/_snippets/storybook-addon-a11y-component-config.md +++ b/docs/_snippets/storybook-addon-a11y-component-config.md @@ -8,7 +8,7 @@ const meta: Meta = { parameters: { a11y: { // Optional selector to inspect - element: '#storybook-root', + element: 'body', config: { rules: [ { @@ -52,7 +52,7 @@ export default meta; parameters: { a11y: { // Optional selector to inspect - element: '#storybook-root', + element: 'body', config: { rules: [ { @@ -92,7 +92,7 @@ export default { parameters: { a11y: { // Optional selector to inspect - element: '#storybook-root', + element: 'body', config: { rules: [ { @@ -131,7 +131,7 @@ export default { parameters: { a11y: { // Optional selector to inspect - element: '#storybook-root', + element: 'body', config: { rules: [ { @@ -173,7 +173,7 @@ export default { parameters: { a11y: { // Optional selector to inspect - element: '#storybook-root', + element: 'body', config: { rules: [ { @@ -215,7 +215,7 @@ const meta = { parameters: { a11y: { // Optional selector to inspect - element: '#storybook-root', + element: 'body', config: { rules: [ { @@ -259,7 +259,7 @@ const meta = { parameters: { a11y: { // Optional selector to inspect - element: '#storybook-root', + element: 'body', config: { rules: [ { @@ -303,7 +303,7 @@ export default meta; parameters: { a11y: { // Optional selector to inspect - element: '#storybook-root', + element: 'body', config: { rules: [ { @@ -345,7 +345,7 @@ const meta: Meta = { parameters: { a11y: { // Optional selector to inspect - element: '#storybook-root', + element: 'body', config: { rules: [ { @@ -389,7 +389,7 @@ const meta: Meta = { parameters: { a11y: { // Optional selector to inspect - element: '#storybook-root', + element: 'body', config: { rules: [ { @@ -428,7 +428,7 @@ export default { parameters: { a11y: { // Optional selector to inspect - element: '#storybook-root', + element: 'body', config: { rules: [ { @@ -467,7 +467,7 @@ const meta: Meta = { parameters: { a11y: { // Optional selector to inspect - element: '#storybook-root', + element: 'body', config: { rules: [ { diff --git a/docs/_snippets/storybook-addon-a11y-global-config.md b/docs/_snippets/storybook-addon-a11y-global-config.md index cbd7fb07bcc9..a0cad0f62760 100644 --- a/docs/_snippets/storybook-addon-a11y-global-config.md +++ b/docs/_snippets/storybook-addon-a11y-global-config.md @@ -3,7 +3,7 @@ export default { parameters: { a11y: { // Optional selector to inspect - element: '#storybook-root', + element: 'body', config: { rules: [ { @@ -43,7 +43,7 @@ const preview: Preview = { parameters: { a11y: { // Optional selector to inspect - element: '#storybook-root', + element: 'body', config: { rules: [ { diff --git a/docs/_snippets/storybook-addon-a11y-story-config.md b/docs/_snippets/storybook-addon-a11y-story-config.md index ce8adce07f7c..41cc0d43bcfe 100644 --- a/docs/_snippets/storybook-addon-a11y-story-config.md +++ b/docs/_snippets/storybook-addon-a11y-story-config.md @@ -13,7 +13,7 @@ type Story = StoryObj; export const ExampleStory: Story = { parameters: { a11y: { - element: '#storybook-root', + element: 'body', config: { rules: [ { @@ -55,7 +55,7 @@ export default { export const ExampleStory = { parameters: { a11y: { - element: '#storybook-root', + element: 'body', config: { rules: [ { @@ -102,7 +102,7 @@ type Story = StoryObj; export const ExampleStory: Story = { parameters: { a11y: { - element: '#storybook-root', + element: 'body', config: { rules: [ { @@ -149,7 +149,7 @@ type Story = StoryObj; export const ExampleStory: Story = { parameters: { a11y: { - element: '#storybook-root', + element: 'body', config: { rules: [ { @@ -196,7 +196,7 @@ export const ExampleStory: Story = { name="ExampleStory" parameters={{ a11y: { - element: '#storybook-root', + element: 'body', config: { rules: [ { @@ -238,7 +238,7 @@ export default { export const ExampleStory = { parameters: { a11y: { - element: '#storybook-root', + element: 'body', config: { rules: [ { @@ -285,7 +285,7 @@ export const ExampleStory = { name="ExampleStory" parameters={{ a11y: { - element: '#storybook-root', + element: 'body', config: { rules: [ { @@ -332,7 +332,7 @@ type Story = StoryObj; export const ExampleStory: Story = { parameters: { a11y: { - element: '#storybook-root', + element: 'body', config: { rules: [ { @@ -379,7 +379,7 @@ export const ExampleStory: Story = { name="ExampleStory" parameters={{ a11y: { - element: '#storybook-root', + element: 'body', config: { rules: [ { @@ -426,7 +426,7 @@ type Story = StoryObj; export const ExampleStory: Story = { parameters: { a11y: { - element: '#storybook-root', + element: 'body', config: { rules: [ { @@ -468,7 +468,7 @@ export default { export const ExampleStory = { parameters: { a11y: { - element: '#storybook-root', + element: 'body', config: { rules: [ { @@ -515,7 +515,7 @@ type Story = StoryObj; export const ExampleStory = { parameters: { a11y: { - element: '#storybook-root', + element: 'body', config: { rules: [ { @@ -562,7 +562,7 @@ type Story = StoryObj; export const ExampleStory = { parameters: { a11y: { - element: '#storybook-root', + element: 'body', config: { rules: [ { @@ -602,7 +602,7 @@ export default { export const ExampleStory = { parameters: { a11y: { - element: '#storybook-root', + element: 'body', config: { rules: [ { @@ -647,7 +647,7 @@ type Story = StoryObj; export const ExampleStory: Story = { parameters: { a11y: { - element: '#storybook-root', + element: 'body', config: { rules: [ { diff --git a/docs/_snippets/test-runner-a11y-config.md b/docs/_snippets/test-runner-a11y-config.md index 14824205701b..aa5c93cd2908 100644 --- a/docs/_snippets/test-runner-a11y-config.md +++ b/docs/_snippets/test-runner-a11y-config.md @@ -10,7 +10,7 @@ module.exports = { await injectAxe(page); }, async postVisit(page) { - await checkA11y(page, '#storybook-root', { + await checkA11y(page, 'body', { detailedReport: true, detailedReportOptions: { html: true, @@ -33,7 +33,7 @@ const config: TestRunnerConfig = { await injectAxe(page); }, async postVisit(page) { - await checkA11y(page, '#storybook-root', { + await checkA11y(page, 'body', { detailedReport: true, detailedReportOptions: { html: true, diff --git a/docs/_snippets/test-runner-a11y-configure.md b/docs/_snippets/test-runner-a11y-configure.md index cae622a42136..9d43fc889aa0 100644 --- a/docs/_snippets/test-runner-a11y-configure.md +++ b/docs/_snippets/test-runner-a11y-configure.md @@ -20,7 +20,7 @@ module.exports = { rules: storyContext.parameters?.a11y?.config?.rules, }); - const element = storyContext.parameters?.a11y?.element ?? '#storybook-root'; + const element = storyContext.parameters?.a11y?.element ?? 'body'; await checkA11y(page, element, { detailedReport: true, detailedReportOptions: { @@ -54,7 +54,7 @@ const config: TestRunnerConfig = { rules: storyContext.parameters?.a11y?.config?.rules, }); - const element = storyContext.parameters?.a11y?.element ?? '#storybook-root'; + const element = storyContext.parameters?.a11y?.element ?? 'body'; await checkA11y(page, element, { detailedReport: true, detailedReportOptions: { diff --git a/docs/_snippets/test-runner-a11y-disable.md b/docs/_snippets/test-runner-a11y-disable.md index e1b176bc4a0f..831f3c2c2850 100644 --- a/docs/_snippets/test-runner-a11y-disable.md +++ b/docs/_snippets/test-runner-a11y-disable.md @@ -18,7 +18,7 @@ module.exports = { if (storyContext.parameters?.a11y?.disable) { return; } - await checkA11y(page, '#storybook-root', { + await checkA11y(page, 'body', { detailedReport: true, detailedReportOptions: { html: true, @@ -50,7 +50,7 @@ const config: TestRunnerConfig = { if (storyContext.parameters?.a11y?.disable) { return; } - await checkA11y(page, '#storybook-root', { + await checkA11y(page, 'body', { detailedReport: true, detailedReportOptions: { html: true,