You signed in with another tab or window.Reload to refresh your session.You signed out in another tab or window.Reload to refresh your session.You switched accounts on another tab or window.Reload to refresh your session.Dismiss alert
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.Learn more about bidirectional Unicode characters
Add missingariaLabel props to fix console warnings.
Prevent ugly default outline from showing up on tooltips and popovers when using keyboard trigger.
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
This section is mandatory for all contributions. If you believe no manual test is necessary, please state so explicitly. Thanks!
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 addci:normal,ci:merged orci:daily GH label to it to run a specific set of sandboxes. The particular set of sandboxes can be found incode/lib/cli-storybook/src/sandbox-templates.ts
Make sure this PR containsone of the labels below:
Available labels
bug: Internal changes that fixes incorrect behavior.
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: Documentationonly 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 releasehere or locally withgh workflow run --repo storybookjs/storybook publish.yml --field pr=<PR_NUMBER>
Summary by CodeRabbit
Style
Enhanced outline styling in popover and tooltip UI components to use optimized CSS properties, resulting in improved visual consistency and better browser compatibility across different focus states and interactions.
Accessibility
Strengthened accessibility support in the tag filter panel by updating ARIA label attributes on interactive UI elements, providing better screen reader compatibility and enhanced support for assistive technology users.
✏️ Tip: You can customize this high-level summary in your review settings.
Three component files receive styling and accessibility attribute updates. Two files (Popover and Tooltip providers) replace CSS outline handling from transparent color to explicit none property. One file adds aria labels to action list components. No control flow or behavioral changes.
**/*.{ts,tsx,js,jsx,json,html,mjs}: Use ESLint and Prettier for code style enforcement Run 'yarn prettier --write ' to format code after making changes Run 'yarn lint:js:cmd ' to check for ESLint issues after making changes
code/**/!(*.test).{ts,tsx,js,mjs}: Use 'logger' from 'storybook/internal/node-logger' for server-side (Node.js) logging, not console.log/console.warn/console.error Use 'logger' from 'storybook/internal/client-logger' for client-side (browser) logging, not console.log/console.warn/console.error Do not use console.log, console.warn, or console.error directly unless in isolated files where importing loggers would significantly increase bundle size
Learnt from: SidnioulzRepo: storybookjs/storybook PR: 32458File: code/core/src/components/components/Tabs/Tabs.stories.tsx:222-227Timestamp: 2025-11-05T09:36:55.944ZLearning: Repo: storybookjs/storybook PR: 32458 — In code/core/src/components/components/Button/Button.tsx (React/TypeScript), ButtonProps includes ariaLabel?: string | false and the component maps it to the DOM aria-label. Convention: ariaLabel is mandatory on all Button usages — provide a descriptive string for icon-only buttons; set ariaLabel=false when the button’s children already serve as the accessible name. Do not suggest using a raw aria-label prop on Button call sites.
Learnt from: SidnioulzRepo: storybookjs/storybook PR: 32458File: code/core/src/manager/components/preview/Toolbar.tsx:102-105Timestamp: 2025-10-03T07:55:42.639ZLearning: In code/core/src/manager/components/preview/Toolbar.tsx, we intentionally do not add aria-label/aria-labelledby to StyledToolbar (AbstractToolbar) because the enclosing section is already labeled via an sr-only heading and the toolbar is the only content. Revisit only if real user testing indicates a need.
Learnt from: SidnioulzRepo: storybookjs/storybook PR: 32458File: code/core/src/components/components/Select/Select.tsx:200-204Timestamp: 2025-11-05T09:38:47.712ZLearning: Repo: storybookjs/storybook — Guidance: Until Storybook 11 is released, do not suggest using React.useId anywhere (e.g., in code/core/src/components/components/Select/Select.tsx) to maintain compatibility with React 17 runtimes. Prefer advising: accept a caller-provided props.id and, if needed, generate a client-only fallback id to minimize SSR hydration issues — but avoid useId. Resume prompting for useId after Storybook 11.
Learnt from: SidnioulzRepo: storybookjs/storybook PR: 32458File: code/core/src/components/components/tooltip/WithTooltip.tsx:54-96Timestamp: 2025-11-05T09:37:25.920ZLearning: Repo: storybookjs/storybook — In code/core/src/components/components/tooltip/WithTooltip.tsx, the legacy WithTooltip implementation is intentionally reintroduced for backward compatibility and is deprecated; maintainers (per Sidnioulz) do not want maintenance or improvements on it. Prefer WithTooltipNew/Popover; avoid suggesting changes to WithTooltip.* going forward.
Learnt from: SidnioulzRepo: storybookjs/storybook PR: 33140File: code/core/src/manager/components/sidebar/TagsFilter.tsx:247-259Timestamp: 2025-11-25T11:09:33.798ZLearning: In the storybookjs/storybook repository, PopoverProvider creates popovers with a dialog role, so using aria-haspopup="dialog" on buttons that trigger PopoverProvider is semantically correct.
Learnt from: SidnioulzRepo: storybookjs/storybook PR: 32594File: code/core/src/components/components/Popover/WithPopover.tsx:7-9Timestamp: 2025-10-01T15:24:01.060ZLearning: In the Storybook repository, "react-aria-components/patched-dist/*" (e.g., "react-aria-components/patched-dist/Dialog", "react-aria-components/patched-dist/Popover", "react-aria-components/patched-dist/Tooltip") are valid import paths created by a patch applied to the react-aria-components package. These imports should not be flagged as broken or invalid until a maintainer explicitly states they are no longer acceptable.
📚 Learning: 2025-11-05T09:36:55.944Z
Learnt from: SidnioulzRepo: storybookjs/storybook PR: 32458File: code/core/src/components/components/Tabs/Tabs.stories.tsx:222-227Timestamp: 2025-11-05T09:36:55.944ZLearning: Repo: storybookjs/storybook PR: 32458 — In code/core/src/components/components/Button/Button.tsx (React/TypeScript), ButtonProps includes ariaLabel?: string | false and the component maps it to the DOM aria-label. Convention: ariaLabel is mandatory on all Button usages — provide a descriptive string for icon-only buttons; set ariaLabel=false when the button’s children already serve as the accessible name. Do not suggest using a raw aria-label prop on Button call sites.
Learnt from: SidnioulzRepo: storybookjs/storybook PR: 32458File: code/core/src/manager/components/preview/Toolbar.tsx:102-105Timestamp: 2025-10-03T07:55:42.639ZLearning: In code/core/src/manager/components/preview/Toolbar.tsx, we intentionally do not add aria-label/aria-labelledby to StyledToolbar (AbstractToolbar) because the enclosing section is already labeled via an sr-only heading and the toolbar is the only content. Revisit only if real user testing indicates a need.
Learnt from: SidnioulzRepo: storybookjs/storybook PR: 33140File: code/core/src/manager/components/sidebar/TagsFilter.tsx:247-259Timestamp: 2025-11-25T11:09:33.798ZLearning: In the storybookjs/storybook repository, PopoverProvider creates popovers with a dialog role, so using aria-haspopup="dialog" on buttons that trigger PopoverProvider is semantically correct.
Learnt from: SidnioulzRepo: storybookjs/storybook PR: 32458File: code/core/src/components/components/tooltip/WithTooltip.tsx:54-96Timestamp: 2025-11-05T09:37:25.920ZLearning: Repo: storybookjs/storybook — In code/core/src/components/components/tooltip/WithTooltip.tsx, the legacy WithTooltip implementation is intentionally reintroduced for backward compatibility and is deprecated; maintainers (per Sidnioulz) do not want maintenance or improvements on it. Prefer WithTooltipNew/Popover; avoid suggesting changes to WithTooltip.* going forward.
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)
99-99:LGTM - Correct approach to prevent focus outlines on tooltips.
Usingoutline: 'none' is more robust thanoutlineColor: 'transparent' as it completely removes the outline rather than just making it invisible. This correctly prevents the default keyboard-focus outline from appearing on the tooltip overlay.
108-108:Correct use ofariaLabel={false} for accessible labeling.
TheActionList.Action wraps a checkbox that already has an explicitaria-label={toggleLabel} (line 115), and the visible text content provides additional context. SettingariaLabel={false} correctly signals that the children serve as the accessible name. Based on learnings, this follows the repo convention.
203-217:Correct use ofariaLabel={false} for the documentation link.
The link contains visible text "Learn how to add tags" which serves as the accessible name. SettingariaLabel={false} correctly indicates this per the repo convention. Based on learnings, this is the appropriate pattern when button/link children already provide the accessible name.
90-90:LGTM - Consistent outline fix with TooltipProvider.
Usingoutline: 'none' correctly prevents the default keyboard-focus outline on the popover container. This is consistent with the identical change inTooltipProvider.tsx and properly addresses the PR objective.
Tip
📝 Customizable high-level summaries are now available in beta!
You can now customize how CodeRabbit generates thehigh-level summary in your pull requests — including its content, structure, tone, and formatting.
Provide your own instructions using thehigh_level_summary_instructions setting.
Format the summary however you like (bullet lists, tables, multi-section layouts, contributor stats, etc.).
Usehigh_level_summary_in_walkthrough to move the summary from the description to the walkthrough section.
Example instruction:
"Divide the high-level summary into five sections:
📝 Description — Summarize the main change in 50–60 words, explaining what was done.
📓 References — List relevant issues, discussions, documentation, or related PRs.
📦 Dependencies & Requirements — Mention any new/updated dependencies, environment variable changes, or configuration updates.
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Uh oh!
There was an error while loading.Please reload this page.
Closes #
What I did
ariaLabelprops to fix console warnings.Checklist for Contributors
Testing
The changes in this PR are covered in the following automated tests:
Manual testing
This section is mandatory for all contributions. If you believe no manual test is necessary, please state so explicitly. Thanks!
Documentation
MIGRATION.MD
Checklist for Maintainers
When this PR is ready for testing, make sure to add
ci:normal,ci:mergedorci:dailyGH label to it to run a specific set of sandboxes. The particular set of sandboxes can be found incode/lib/cli-storybook/src/sandbox-templates.tsMake sure this PR containsone 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: Documentationonly 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/coreteam here.core team members can create a canary releasehere or locally with
gh workflow run --repo storybookjs/storybook publish.yml --field pr=<PR_NUMBER>Summary by CodeRabbit
Style
Accessibility
✏️ Tip: You can customize this high-level summary in your review settings.