Addon A11y: Change default element selector

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.<ts|js>` 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.
 

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) {

docs/_snippets/storybook-addon-a11y-component-config.md

@@ -8,7 +8,7 @@ const meta: Meta<MyComponent> = {
   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<typeof MyComponent> = {
   parameters: {
     a11y: {
       // Optional selector to inspect
-      element: '#storybook-root',
+      element: 'body',
       config: {
         rules: [
           {
@@ -389,7 +389,7 @@ const meta: Meta<typeof MyComponent> = {
   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: [
           {

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: [
           {

docs/_snippets/storybook-addon-a11y-story-config.md

@@ -13,7 +13,7 @@ type Story = StoryObj<MyComponent>;
 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<typeof meta>;
 export const ExampleStory: Story = {
   parameters: {
     a11y: {
-      element: '#storybook-root',
+      element: 'body',
       config: {
         rules: [
           {
@@ -149,7 +149,7 @@ type Story = StoryObj<typeof MyComponent>;
 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<typeof meta>;
 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<typeof meta>;
 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<typeof meta>;
 export const ExampleStory = {
   parameters: {
     a11y: {
-      element: '#storybook-root',
+      element: 'body',
       config: {
         rules: [
           {
@@ -562,7 +562,7 @@ type Story = StoryObj<typeof MyComponent>;
 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: [
           {

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,

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: {

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,