diff --git a/MIGRATION.md b/MIGRATION.md index 6ed5766c26f..d955843ca68 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 be6de1be255..626ec313574 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 97f1d07c1ee..d9098f03ebb 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 cbd7fb07bcc..a0cad0f6276 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 ce8adce07f7..41cc0d43bcf 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 14824205701..aa5c93cd290 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 cae622a4213..9d43fc889aa 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 e1b176bc4a0..831f3c2c285 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,