Skip to content

[Bug]: Storybook 9 - A11y addon highlight does not work as expected #30968

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.

Sign up for GitHub

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

Jump to bottom
Open
yannbf opened this issue Mar 28, 2025 · 1 comment · May be fixed by #30894
Open

[Bug]: Storybook 9 - A11y addon highlight does not work as expected #30968

yannbf opened this issue Mar 28, 2025 · 1 comment · May be fixed by #30894
Labels
addon: a11y bug internal-qa This issue was reported by the Storybook team, potentially on unreleased or prerelease software.
Milestone
9.0 component tes...

Comments

@yannbf
Copy link
Member

yannbf commented Mar 28, 2025

Describe the bug

Repo: MealDrop
Branch: sbtest-qa, commit db25fba146e

Steps:

Image

The expected behavior would be to see it highlighted as such:

Image

Reproduction link

Reproduction steps

No response

System

-

Additional context

No response
@yannbf yannbf added addon: a11y bug internal-qa This issue was reported by the Storybook team, potentially on unreleased or prerelease software. labels Mar 28, 2025
@greptile-apps Greptile Apps
Copy link
Contributor

greptile-apps bot commented Mar 28, 2025

** Disclaimer** This information might be inaccurate, due to it being generated automatically
In packages/addons/a11y/src/components/Highlight/Highlighter.tsx, update the element selection and styling logic. Replace the existing selector with one that uses the a11y id (e.g., document.querySelector([data-a11y-id="${highlight.id}"])) and apply the inline highlight style directly on that element, for example:

const element = document.querySelector([data-a11y-id="${highlight.id}"]);
if (element) {
element.style.outline = '3px dashed rgb(255, 99, 71)';
element.scrollIntoView({ behavior: 'smooth', block: 'center' });
}

Also check that the selected highlight id is correctly passed from packages/addons/a11y/src/panel/AccessibilityPanel.tsx. This change is specific to the highlight not working in Storybook 9.

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

This was referenced Mar 28, 2025
Closed
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
addon: a11y bug internal-qa This issue was reported by the Storybook team, potentially on unreleased or prerelease software.
Projects
9.0 Roadmap
Status: No status
Milestone
9.0 component test improvements
1 participant
@yannbf