[Bug]: a11y addon shows false positives on page load

[jpzwarte]

Describe the bug

When loading the reproduction link, the a11y addon reports 45 problems. If you click the "Tests completed" in the bottom right corner, it will run the tests again and only report 4 problems. This last report is correct (it's about the 4 disabled buttons on the far right).

If you toggle "Highlight results" before you click the "Tests completed", you will also notice that it doesn't clear the highlights of the previous test run.

Reported in #sb-test-early-access channel on Discord.

Reproduction link

https://kind-plant-088739303-1713.westeurope.1.azurestaticapps.net/?path=/story/actions-button--all&globals=mode:dark

Reproduction steps

No response

System

Storybook Environment Info:

  System:
    OS: macOS 15.3
    CPU: (16) arm64 Apple M4 Max
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 22.13.1 - /opt/homebrew/bin/node
    Yarn: 4.5.3 - /opt/homebrew/bin/yarn <----- active
    npm: 10.9.2 - /opt/homebrew/bin/npm
  Browsers:
    Chrome: 133.0.6943.54
    Safari: 18.3
  npmPackages:
    @storybook/addon-a11y: ^8.5.3 => 8.5.3 
    @storybook/addon-essentials: ^8.5.3 => 8.5.3 
    @storybook/addon-storysource: ^8.5.3 => 8.5.3 
    @storybook/core-events: ^8.5.3 => 8.5.3 
    @storybook/manager-api: ^8.5.3 => 8.5.3 
    @storybook/preview-api: ^8.5.3 => 8.5.3 
    @storybook/test: ^8.5.3 => 8.5.3 
    @storybook/theming: ^8.5.3 => 8.5.3 
    @storybook/web-components-vite: ^8.5.3 => 8.5.3 
    chromatic: ^11.25.2 => 11.25.2 
    storybook: ^8.5.3 => 8.5.3

Additional context

No response

[greptile-apps]

** Disclaimer** This information might be inaccurate, due to it being generated automatically
This appears to be an issue with the a11y addon's initialization timing and state management. The key areas to investigate/modify are: 1. In code/addons/a11y/src/components/Report.tsx, modify the useEffect hook that runs the initial accessibility check to wait for the story to fully render before running tests. 2. In code/addons/a11y/src/components/HighlightToggle.tsx, add cleanup logic to clear highlights when re-running tests. 3. Consider adding a check in code/addons/a11y/src/components/A11YPanel.tsx to ensure the DOM is stable before running initial tests, possibly using a small delay or mutation observer. The false positives likely occur because the initial test runs before all story elements are fully mounted and styled.

About Greptile

This response provides a starting point for your research, not a precise solution.

Help us improve! Please leave a 👍 if this is helpful and 👎 if it is irrelevant.

Edit Issue Bot Settings · Greptile