Merge pull request #17989 from storybookjs/jsomsanith/fix/a11y_elemen…

…t_id

fix(#16232): use a11y params > element properly

addons/a11y/src/a11yRunner.ts

@@ -15,11 +15,6 @@ let active = false;
 // Holds latest story we requested a run
 let activeStoryId: string | undefined;
 
-const getElement = () => {
-  const storyRoot = document.getElementById('story-root');
-  return storyRoot ? storyRoot.childNodes : document.getElementById('root');
-};
-
 /**
  * Handle A11yContext events.
  * Because the event are sent without manual check, we split calls
@@ -41,13 +36,14 @@ const run = async (storyId: string) => {
       channel.emit(EVENTS.RUNNING);
       const axe = (await import('axe-core')).default;
 
-      const { element = getElement(), config, options = {} } = input;
+      const { element = '#root', config, options = {} } = input;
+      const htmlElement = document.querySelector(element);
       axe.reset();
       if (config) {
         axe.configure(config);
       }
 
-      const result = await axe.run(element, options);
+      const result = await axe.run(htmlElement, options);
       // It's possible that we requested a new run on a different story.
       // Unfortunately, axe doesn't support a cancel method to abort current run.
       // We check if the story we run against is still the current one,

examples/official-storybook/stories/addon-a11y/parameters.stories.js

@@ -0,0 +1,38 @@
+import React from 'react';
+import BaseButton from '../../components/BaseButton';
+
+export default {
+  title: 'Addons/A11y/Parameters',
+  component: BaseButton,
+  parameters: {
+    options: { selectedPanel: 'storybook/a11y/panel' },
+  },
+};
+
+export const ElementId = () => (
+  <>
+    <p>
+      The <code>a11y.element</code> parameter is set to the <strong>Insufficient contrast</strong>{' '}
+      section.{' '}
+    </p>
+
+    <div id="no-text" style={{ border: '1px solid gray', padding: '1rem', marginBottom: '1rem' }}>
+      <strong>No discernable button text</strong>
+      <p>This a11y violation should not be reported, as this section is not scanned.</p>
+      <BaseButton label="" />
+    </div>
+    <div id="insufficient-contrast" style={{ border: '1px solid gray', padding: '1rem' }}>
+      <strong>Insufficient contrast</strong>
+      <p>This a11y issue (incomplete) should be reported.</p>
+      <BaseButton
+        style={{ color: 'black', backgroundColor: 'black' }}
+        label="Insufficient contrast"
+      />
+    </div>
+  </>
+);
+ElementId.parameters = {
+  a11y: {
+    element: '#insufficient-contrast',
+  },
+};