diff --git a/MIGRATION.md b/MIGRATION.md index 1e3ef9d02ce0..9058e78c81a0 100644 --- a/MIGRATION.md +++ b/MIGRATION.md @@ -1911,7 +1911,7 @@ To configure a11y now, you have to specify configuration using story parameters, ```js export const parameters = { a11y: { - element: '#root', + element: "#storybook-root", config: {}, options: {}, manual: true, diff --git a/addons/a11y/README.md b/addons/a11y/README.md index 14f3b309de6c..ac6613594d31 100755 --- a/addons/a11y/README.md +++ b/addons/a11y/README.md @@ -175,7 +175,7 @@ export default { parameters: { a11y: { // optional selector which element to inspect - element: '#root', + element: '#storybook-root', // axe-core configurationOptions (https://github.com/dequelabs/axe-core/blob/develop/doc/API.md#parameters-1) config: {}, // axe-core optionsParameter (https://github.com/dequelabs/axe-core/blob/develop/doc/API.md#options-parameter) diff --git a/addons/a11y/src/a11yRunner.ts b/addons/a11y/src/a11yRunner.ts index 1f4fd7ddeab6..1d6bd8b2f148 100644 --- a/addons/a11y/src/a11yRunner.ts +++ b/addons/a11y/src/a11yRunner.ts @@ -36,7 +36,7 @@ const run = async (storyId: string) => { channel.emit(EVENTS.RUNNING); const axe = (await import('axe-core')).default; - const { element = '#root', config, options = {} } = input; + const { element = '#storybook-root', config, options = {} } = input; const htmlElement = document.querySelector(element); axe.reset(); if (config) { diff --git a/addons/a11y/src/components/Report/HighlightToggle.test.tsx b/addons/a11y/src/components/Report/HighlightToggle.test.tsx index cbfc33297db8..e488c33bc1b4 100644 --- a/addons/a11y/src/components/Report/HighlightToggle.test.tsx +++ b/addons/a11y/src/components/Report/HighlightToggle.test.tsx @@ -28,7 +28,9 @@ const defaultProviderValue = { describe('', () => { it('should render', () => { - const { container } = render(); + const { container } = render( + + ); expect(container.firstChild).toBeTruthy(); }); @@ -37,10 +39,10 @@ describe('', () => { - + ); const checkbox = getByRole('checkbox') as HTMLInputElement; @@ -52,10 +54,12 @@ describe('', () => { - + ); const checkbox = getByRole('checkbox') as HTMLInputElement; @@ -64,10 +68,10 @@ describe('', () => { describe('toggleHighlight', () => { it.each` - highlighted | elementsToHighlight | expected - ${[]} | ${['#root']} | ${true} - ${['#root']} | ${['#root']} | ${false} - ${['#root']} | ${['#root', '#root1']} | ${true} + highlighted | elementsToHighlight | expected + ${[]} | ${['#storybook-root']} | ${true} + ${['#storybook-root']} | ${['#storybook-root']} | ${false} + ${['#storybook-root']} | ${['#storybook-root', '#storybook-root1']} | ${true} `( 'should be triggered with $expected when highlighted is $highlighted and elementsToHighlight is $elementsToHighlight', ({ highlighted, elementsToHighlight, expected }) => { diff --git a/addons/actions/src/preview/withActions.ts b/addons/actions/src/preview/withActions.ts index d48ded13eae7..4a3d48eba773 100644 --- a/addons/actions/src/preview/withActions.ts +++ b/addons/actions/src/preview/withActions.ts @@ -15,7 +15,7 @@ const delegateEventSplitter = /^(\S+)\s*(.*)$/; const isIE = Element != null && !Element.prototype.matches; const matchesMethod = isIE ? 'msMatchesSelector' : 'matches'; -const root = document && document.getElementById('root'); +const root = document && document.getElementById('storybook-root'); const hasMatchInAncestry = (element: any, selector: any): boolean => { if (element[matchesMethod](selector)) { diff --git a/addons/docs/src/blocks/DocsContainer.tsx b/addons/docs/src/blocks/DocsContainer.tsx index cb3738804daf..7d2ad37169fd 100644 --- a/addons/docs/src/blocks/DocsContainer.tsx +++ b/addons/docs/src/blocks/DocsContainer.tsx @@ -76,7 +76,7 @@ export const DocsContainer: FunctionComponent = ({ context, let scrollTarget = element; if (allStories && allStories[0] === element) { // Include content above first story - scrollTarget = document.getElementById('docs-root'); + scrollTarget = document.getElementById('storybook-docs-root'); } // Introducing a delay to ensure scrolling works when it's a full refresh. setTimeout(() => { diff --git a/addons/storyshots/storyshots-core/src/frameworks/riot/renderTree.ts b/addons/storyshots/storyshots-core/src/frameworks/riot/renderTree.ts index e44e181e241c..c4f1ce24419d 100644 --- a/addons/storyshots/storyshots-core/src/frameworks/riot/renderTree.ts +++ b/addons/storyshots/storyshots-core/src/frameworks/riot/renderTree.ts @@ -6,7 +6,7 @@ const riotForStorybook = jest.requireActual('@storybook/riot'); function bootstrapADocumentAndReturnANode() { const rootElement = document.createElement('div'); - rootElement.id = 'root'; + rootElement.id = 'storybook-root'; document.body = document.createElement('body'); document.body.appendChild(rootElement); return rootElement; diff --git a/addons/storyshots/storyshots-puppeteer/README.md b/addons/storyshots/storyshots-puppeteer/README.md index c2b6ab49566b..9ed21ea4520b 100644 --- a/addons/storyshots/storyshots-puppeteer/README.md +++ b/addons/storyshots/storyshots-puppeteer/README.md @@ -333,7 +333,7 @@ To create a screenshot of just a single element (with its children), rather than import initStoryshots from '@storybook/addon-storyshots'; import { imageSnapshot } from '@storybook/addon-storyshots-puppeteer'; -const beforeScreenshot = (page) => page.$('#root > *'); +const beforeScreenshot = (page) => page.$('#storybook-root > *'); initStoryshots({ suite: 'Image storyshots', diff --git a/addons/storyshots/storyshots-puppeteer/src/axeTest.ts b/addons/storyshots/storyshots-puppeteer/src/axeTest.ts index 21548a4a0e0a..987a72da8e9a 100644 --- a/addons/storyshots/storyshots-puppeteer/src/axeTest.ts +++ b/addons/storyshots/storyshots-puppeteer/src/axeTest.ts @@ -10,7 +10,7 @@ export const axeTest = (customConfig: Partial = {}) => { ...extendedConfig, async testBody(page, testOptions) { const { - element = '#root', + element = '#storybook-root', exclude, disabledRules, options, diff --git a/cypress/helper.ts b/cypress/helper.ts index 088c5fdfdf34..7142feb8ff5b 100644 --- a/cypress/helper.ts +++ b/cypress/helper.ts @@ -20,7 +20,7 @@ export const visit = (route = '') => { expect(element).not.null; if (element !== null) { - expect(element.querySelector('#root > *')).not.null; + expect(element.querySelector('#storybook-root > *')).not.null; } }); }); @@ -41,11 +41,11 @@ export const getStorybookPreview = () => { expect(element).not.null; if (element !== null) { - expect(element.querySelector('#root > *')).not.null; + expect(element.querySelector('#storybook-root > *')).not.null; } }) .then(() => { - return cy.wrap(element).get('#root'); + return cy.wrap(element).get('#storybook-root'); }); }); }; diff --git a/cypress/support/commands.js b/cypress/support/commands.js index d5e6e32cadfb..38fd278e53d8 100644 --- a/cypress/support/commands.js +++ b/cypress/support/commands.js @@ -46,7 +46,7 @@ Cypress.Commands.add('visitStorybook', () => { .its('0.contentDocument.body', { log: false }) .should('not.be.empty') .then((body) => cy.wrap(body, { log: false })) - .find('#docs-root', { log: false }) + .find('#storybook-docs-root', { log: false }) .should('not.be.empty'); }); @@ -57,7 +57,7 @@ Cypress.Commands.add('getStoryElement', {}, () => { .its('0.contentDocument.body', { log: false }) .should('not.be.empty') .then((body) => cy.wrap(body, { log: false })) - .find('#root', { log: false }) + .find('#storybook-root', { log: false }) .should('not.be.empty') .then((storyRoot) => cy.wrap(storyRoot, { log: false })); }); @@ -69,7 +69,7 @@ Cypress.Commands.add('getDocsElement', {}, () => { .its('0.contentDocument.body', { log: false }) .should('not.be.empty') .then((body) => cy.wrap(body, { log: false })) - .find('#docs-root', { log: false }) + .find('#storybook-docs-root', { log: false }) .should('not.be.empty') .then((storyRoot) => cy.wrap(storyRoot, { log: false })); }); diff --git a/docs/snippets/angular/storybook-addon-a11y-story-config.mdx.mdx b/docs/snippets/angular/storybook-addon-a11y-story-config.mdx.mdx index 4b39ad459c52..57c37663fb52 100644 --- a/docs/snippets/angular/storybook-addon-a11y-story-config.mdx.mdx +++ b/docs/snippets/angular/storybook-addon-a11y-story-config.mdx.mdx @@ -15,7 +15,7 @@ export const Template = () => ({}); name="ExampleStory" parameters={{ a11y: { - element: '#root', + element: '#storybook-root', config: { rules: [ { diff --git a/docs/snippets/angular/storybook-addon-a11y-story-config.ts.mdx b/docs/snippets/angular/storybook-addon-a11y-story-config.ts.mdx index 9b434d8a6506..525248c17fcc 100644 --- a/docs/snippets/angular/storybook-addon-a11y-story-config.ts.mdx +++ b/docs/snippets/angular/storybook-addon-a11y-story-config.ts.mdx @@ -19,7 +19,7 @@ const Template: Story = () => ({}); export const ExampleStory = Template.bind({}); ExampleStory.parameters = { a11y: { - element: '#root', + element: '#storybook-root', config: { rules: [ { diff --git a/docs/snippets/common/storybook-addon-a11y-component-config.js.mdx b/docs/snippets/common/storybook-addon-a11y-component-config.js.mdx index 9ba337a7df3d..babfbcb741f7 100644 --- a/docs/snippets/common/storybook-addon-a11y-component-config.js.mdx +++ b/docs/snippets/common/storybook-addon-a11y-component-config.js.mdx @@ -13,7 +13,7 @@ export default { parameters: { a11y: { // Optional selector to inspect - element: '#root', + element: '#storybook-root', config: { rules: [ { diff --git a/docs/snippets/common/storybook-addon-a11y-component-config.mdx.mdx b/docs/snippets/common/storybook-addon-a11y-component-config.mdx.mdx index b3fef6f2c27d..62dfd2ac8dee 100644 --- a/docs/snippets/common/storybook-addon-a11y-component-config.mdx.mdx +++ b/docs/snippets/common/storybook-addon-a11y-component-config.mdx.mdx @@ -11,7 +11,7 @@ import { MyComponent } from './MyComponent'; parameters={{ a11y: { // Optional selector to inspect - element: '#root', + element: '#storybook-root', config: { rules: [ { diff --git a/docs/snippets/common/storybook-addon-a11y-global-config.js.mdx b/docs/snippets/common/storybook-addon-a11y-global-config.js.mdx index 22e59b2a76de..2cb61b3b69e7 100644 --- a/docs/snippets/common/storybook-addon-a11y-global-config.js.mdx +++ b/docs/snippets/common/storybook-addon-a11y-global-config.js.mdx @@ -4,7 +4,7 @@ export const parameters = { a11y: { // Optional selector to inspect - element: '#root', + element: '#storybook-root', config: { rules: [ { diff --git a/docs/snippets/common/storybook-test-runner-a11y-config.js.mdx b/docs/snippets/common/storybook-test-runner-a11y-config.js.mdx index 22bf4552fe90..59bb98c7c871 100644 --- a/docs/snippets/common/storybook-test-runner-a11y-config.js.mdx +++ b/docs/snippets/common/storybook-test-runner-a11y-config.js.mdx @@ -12,7 +12,7 @@ module.exports = { await injectAxe(page); }, async postRender(page) { - await checkA11y(page, '#root', { + await checkA11y(page, '#storybook-root', { detailedReport: true, detailedReportOptions: { html: true, diff --git a/docs/snippets/common/storybook-test-runner-a11y-config.ts.mdx b/docs/snippets/common/storybook-test-runner-a11y-config.ts.mdx index aed751c49a9b..7463f0015bac 100644 --- a/docs/snippets/common/storybook-test-runner-a11y-config.ts.mdx +++ b/docs/snippets/common/storybook-test-runner-a11y-config.ts.mdx @@ -14,7 +14,7 @@ const a11yConfig: TestRunnerConfig = { await injectAxe(page); }, async postRender(page) { - await checkA11y(page, '#root', { + await checkA11y(page, '#storybook-root', { detailedReport: true, detailedReportOptions: { html: true, diff --git a/docs/snippets/react/storybook-addon-a11y-story-config.js.mdx b/docs/snippets/react/storybook-addon-a11y-story-config.js.mdx index cc39f6799564..5cd61a5559ec 100644 --- a/docs/snippets/react/storybook-addon-a11y-story-config.js.mdx +++ b/docs/snippets/react/storybook-addon-a11y-story-config.js.mdx @@ -19,7 +19,7 @@ const Template = () => ; export const ExampleStory = Template.bind({}); ExampleStory.parameters = { a11y: { - element: '#root', + element: '#storybook-root', config: { rules: [ { diff --git a/docs/snippets/react/storybook-addon-a11y-story-config.mdx.mdx b/docs/snippets/react/storybook-addon-a11y-story-config.mdx.mdx index 8b1ed8796ccd..55804612c46a 100644 --- a/docs/snippets/react/storybook-addon-a11y-story-config.mdx.mdx +++ b/docs/snippets/react/storybook-addon-a11y-story-config.mdx.mdx @@ -15,7 +15,7 @@ export const Template = () => ; name="ExampleStory" parameters={{ a11y: { - element: '#root', + element: '#storybook-root', config: { rules: [ { diff --git a/docs/snippets/react/storybook-addon-a11y-story-config.ts.mdx b/docs/snippets/react/storybook-addon-a11y-story-config.ts.mdx index 9ae7ea00ea79..5cacab5efb3f 100644 --- a/docs/snippets/react/storybook-addon-a11y-story-config.ts.mdx +++ b/docs/snippets/react/storybook-addon-a11y-story-config.ts.mdx @@ -21,7 +21,7 @@ const Template: ComponentStory = () => ; export const ExampleStory = Template.bind({}); ExampleStory.parameters = { a11y: { - element: '#root', + element: '#storybook-root', config: { rules: [ { diff --git a/docs/snippets/svelte/storybook-addon-a11y-story-config.js.mdx b/docs/snippets/svelte/storybook-addon-a11y-story-config.js.mdx index 92b58d82a4f2..6f4b04661940 100644 --- a/docs/snippets/svelte/storybook-addon-a11y-story-config.js.mdx +++ b/docs/snippets/svelte/storybook-addon-a11y-story-config.js.mdx @@ -17,7 +17,7 @@ const Template = () => ({ Component: MyComponent }); export const ExampleStory = Template.bind({}); ExampleStory.parameters = { a11y: { - element: '#root', + element: '#storybook-root', config: { rules: [ { diff --git a/docs/snippets/svelte/storybook-addon-a11y-story-config.mdx.mdx b/docs/snippets/svelte/storybook-addon-a11y-story-config.mdx.mdx index 8fb7b459a044..eb25eccdf535 100644 --- a/docs/snippets/svelte/storybook-addon-a11y-story-config.mdx.mdx +++ b/docs/snippets/svelte/storybook-addon-a11y-story-config.mdx.mdx @@ -15,7 +15,7 @@ export const Template = () => ({ Component: MyComponent }); name="ExampleStory" parameters={{ a11y: { - element: '#root', + element: '#storybook-root', config: { rules: [ { diff --git a/docs/snippets/vue/storybook-addon-a11y-story-config.js.mdx b/docs/snippets/vue/storybook-addon-a11y-story-config.js.mdx index 9e9addbb4ac7..0a10137b2a24 100644 --- a/docs/snippets/vue/storybook-addon-a11y-story-config.js.mdx +++ b/docs/snippets/vue/storybook-addon-a11y-story-config.js.mdx @@ -20,7 +20,7 @@ const Template = () => ({ export const ExampleStory = Template.bind({}); ExampleStory.parameters = { a11y: { - element: '#root', + element: '#storybook-root', config: { rules: [ { diff --git a/docs/snippets/vue/storybook-addon-a11y-story-config.mdx.mdx b/docs/snippets/vue/storybook-addon-a11y-story-config.mdx.mdx index e76f552f1d4e..e6e03ee47e6b 100644 --- a/docs/snippets/vue/storybook-addon-a11y-story-config.mdx.mdx +++ b/docs/snippets/vue/storybook-addon-a11y-story-config.mdx.mdx @@ -18,7 +18,7 @@ export const Template = () => ({ name="ExampleStory" parameters={{ a11y: { - element: '#root', + element: '#storybook-root', config: { rules: [ { diff --git a/examples/standalone-preview/storybook.html b/examples/standalone-preview/storybook.html index ac1f9f1fe2cb..a5cfb04c401f 100644 --- a/examples/standalone-preview/storybook.html +++ b/examples/standalone-preview/storybook.html @@ -7,8 +7,8 @@ -
-
+
+
diff --git a/frameworks/angular/src/client/preview/angular/helpers.ts b/frameworks/angular/src/client/preview/angular/helpers.ts index 20a55edcbf92..76e1bf8d8f58 100644 --- a/frameworks/angular/src/client/preview/angular/helpers.ts +++ b/frameworks/angular/src/client/preview/angular/helpers.ts @@ -169,7 +169,7 @@ const initModule = (storyFn: PartialStoryFn) => { ); }; -const staticRoot = document.getElementById('root'); +const staticRoot = document.getElementById('storybook-root'); const insertDynamicRoot = () => { const app = document.createElement('storybook-dynamic-app-root'); staticRoot.innerHTML = ''; diff --git a/frameworks/ember/src/client/preview/render.ts b/frameworks/ember/src/client/preview/render.ts index 77dda1b3d5f4..f32292312a75 100644 --- a/frameworks/ember/src/client/preview/render.ts +++ b/frameworks/ember/src/client/preview/render.ts @@ -7,7 +7,7 @@ const { window: globalWindow, document } = global; declare let Ember: any; -const rootEl = document.getElementById('root'); +const rootEl = document.getElementById('storybook-root'); const config = globalWindow.require(`${globalWindow.STORYBOOK_NAME}/config/environment`); const app = globalWindow.require(`${globalWindow.STORYBOOK_NAME}/app`).default.create({ diff --git a/lib/core-common/templates/base-preview-head.html b/lib/core-common/templates/base-preview-head.html index 39baba09b3fb..fb5933314670 100644 --- a/lib/core-common/templates/base-preview-head.html +++ b/lib/core-common/templates/base-preview-head.html @@ -2,7 +2,7 @@ @@ -25,8 +25,8 @@ <% if (typeof bodyHtmlSnippet !== 'undefined') { %> <%= bodyHtmlSnippet %> <% } %> -
-
+
+
<% if (typeof globals !== 'undefined' && Object.keys(globals).length) { %>