Skip to content

Addon A11y: Only run checks in story mode #30976

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 4 commits into from
Apr 22, 2025
Merged

Conversation

kroeder
Copy link
Member

@kroeder kroeder commented Mar 28, 2025

Closes #30975

What I did

Checklist for Contributors

Testing

The changes in this PR are covered in the following automated tests:

  • stories
  • unit tests
  • integration tests
  • end-to-end tests

Manual testing

  • Checkout branch and compile repo
  • Make sure addon-a11y is enabled
  • Make sure to enable debug output from axe and add this to the meta part of a story
    parameters: {
        a11y: {
            options: {
                performanceTimer: true,
            },
        },
    },
  • Start any Storybook with an MDX file that references a stories.ts file
  • In docs mode: Axe should not print anything to console
  • In story mode: Axe should print check timings to the console

Documentation

  • Add or update documentation reflecting your changes
  • If you are deprecating/removing a feature, make sure to update
    MIGRATION.MD

Checklist for Maintainers

  • When this PR is ready for testing, make sure to add ci:normal, ci:merged or ci:daily GH label to it to run a specific set of sandboxes. The particular set of sandboxes can be found in code/lib/cli-storybook/src/sandbox-templates.ts

  • Make sure this PR contains one of the labels below:

    Available labels
    • bug: Internal changes that fixes incorrect behavior.
    • maintenance: User-facing maintenance tasks.
    • dependencies: Upgrading (sometimes downgrading) dependencies.
    • build: Internal-facing build tooling & test updates. Will not show up in release changelog.
    • cleanup: Minor cleanup style change. Will not show up in release changelog.
    • documentation: Documentation only changes. Will not show up in release changelog.
    • feature request: Introducing a new feature.
    • BREAKING CHANGE: Changes that break compatibility in some way with current major version.
    • other: Changes that don't fit in the above categories.

🦋 Canary release

This PR does not have a canary release associated. You can request a canary release of this pull request by mentioning the @storybookjs/core team here.

core team members can create a canary release here or locally with gh workflow run --repo storybookjs/storybook canary-release-pr.yml --field pr=<PR_NUMBER>

Greptile Summary

This PR introduces a viewMode guard in /code/addons/a11y/src/preview.tsx to limit axe-core runs to story mode, improving performance in docs mode.

  • Added a condition to check if viewMode equals 'story' before running accessibility checks.
  • Prevents unnecessary axe-core execution and slowdown in docs mode.
  • Retains complete reporting, error handling, and Vitest integration in story mode.

💡 (1/5) You can manually trigger the bot by mentioning @greptileai in a comment!

Copy link
Contributor

@greptile-apps greptile-apps bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

1 file(s) reviewed, no comment(s)
Edit PR Review Bot Settings | Greptile

Copy link
Contributor

@greptile-apps greptile-apps bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

1 file(s) reviewed, no comment(s)
Edit PR Review Bot Settings | Greptile

Copy link

nx-cloud bot commented Mar 28, 2025

View your CI Pipeline Execution ↗ for commit 935af64.

Command Status Duration Result
nx run-many -t build --parallel=3 ✅ Succeeded 1m 39s View ↗

☁️ Nx Cloud last updated this comment at 2025-04-22 13:46:58 UTC

@valentinpalkovic valentinpalkovic changed the title perf(addon-a11y): only run checks in story mode Addon-a11y: Only run checks in story mode Mar 30, 2025
Copy link
Contributor

@greptile-apps greptile-apps bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

1 file(s) reviewed, no comment(s)
Edit PR Review Bot Settings | Greptile

@kroeder
Copy link
Member Author

kroeder commented Mar 31, 2025

Can someone give me a hint if the test assertions are just wrong or if I broke something with my change? 👀

@valentinpalkovic valentinpalkovic self-assigned this Mar 31, 2025
@valentinpalkovic valentinpalkovic changed the title Addon-a11y: Only run checks in story mode Addon A11y: Only run checks in story mode Mar 31, 2025
Copy link
Contributor

@greptile-apps greptile-apps bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

1 file(s) reviewed, no comment(s)
Edit PR Review Bot Settings | Greptile

@kroeder kroeder force-pushed the a11y-only-run-in-story-mode branch from b0cefd1 to c9c578f Compare April 22, 2025 12:47
@kroeder kroeder force-pushed the a11y-only-run-in-story-mode branch from c9c578f to 5fc0c67 Compare April 22, 2025 12:48
@kroeder kroeder force-pushed the a11y-only-run-in-story-mode branch from f0ae84d to b105033 Compare April 22, 2025 13:31
@yannbf
Copy link
Member

yannbf commented Apr 22, 2025

Thanks a lot @kroeder!

@yannbf yannbf merged commit 41beaff into next Apr 22, 2025
57 checks passed
@yannbf yannbf deleted the a11y-only-run-in-story-mode branch April 22, 2025 14:33
@github-actions github-actions bot mentioned this pull request Apr 22, 2025
5 tasks
@kroeder
Copy link
Member Author

kroeder commented Apr 22, 2025

@yannbf will you backport this as patch release as well?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[Bug]: addon-a11y runs in docs mode and slows down large docs pages
3 participants