Docs: Add ariaLabel support to ActionItem interface#34749
Merged
Sidnioulz merged 2 commits intoMay 21, 2026
Merged
Conversation
Contributor
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (3)
📝 WalkthroughWalkthroughAdds optional ChangesAction Item aria-label Support
Sequence Diagram(s)sequenceDiagram
participant User
participant Preview
participant ActionBar
participant Button
User->>Preview: interacts with preview UI
Preview->>ActionBar: provides additionalActions (includes ariaLabel)
ActionBar->>Button: render button with aria-label and handlers
Button-->>User: accessible button rendered
Estimated code review effort🎯 2 (Simple) | ⏱️ ~8 minutes Possibly related PRs
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
code/core/src/components/components/ActionBar/ActionBar.tsx (1)
90-100:⚠️ Potential issue | 🟠 Major | ⚡ Quick win
ariaLabelis declared inActionItembut never forwarded toActionButton.Line 93 destructures
title,className,onClick, anddisabled—ariaLabelis omitted.ActionButtontherefore never receives anaria-labelattribute, making the interface addition a silent no-op for any direct consumer ofActionBar.🛠️ Proposed fix
- {actionItems.map(({ title, className, onClick, disabled }, index: number) => ( - <ActionButton key={index} className={className} onClick={onClick} disabled={!!disabled}> + {actionItems.map(({ title, ariaLabel, className, onClick, disabled }, index: number) => ( + <ActionButton key={index} aria-label={ariaLabel} className={className} onClick={onClick} disabled={!!disabled}>🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@code/core/src/components/components/ActionBar/ActionBar.tsx` around lines 90 - 100, The ActionBar currently destructures title, className, onClick, and disabled from each ActionItem but omits ariaLabel so ActionButton never receives an aria-label; update the mapping in ActionBar to also destructure ariaLabel (from actionItems) and pass it through to ActionButton (e.g., <ActionButton ... aria-label={ariaLabel} />) so the ActionButton receives the accessibility attribute for each ActionItem.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Outside diff comments:
In `@code/core/src/components/components/ActionBar/ActionBar.tsx`:
- Around line 90-100: The ActionBar currently destructures title, className,
onClick, and disabled from each ActionItem but omits ariaLabel so ActionButton
never receives an aria-label; update the mapping in ActionBar to also
destructure ariaLabel (from actionItems) and pass it through to ActionButton
(e.g., <ActionButton ... aria-label={ariaLabel} />) so the ActionButton receives
the accessibility attribute for each ActionItem.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: b958c7c3-109e-4864-b46d-f6f3dfd5ce5a
📒 Files selected for processing (3)
code/addons/docs/src/blocks/components/Preview.tsxcode/addons/docs/src/types.tscode/core/src/components/components/ActionBar/ActionBar.tsx
- Add ariaLabel?: string to ActionItem in ActionBar.tsx - Sync the duplicate inline type in addons/docs/src/types.ts - Pass ariaLabel through to Button in Preview.tsx (defaults to false to suppress the mandatory-prop warning when title is visible) Closes storybookjs#34746
Addresses CodeRabbit review feedback. ActionBar.tsx now destructures ariaLabel and passes it as aria-label HTML attribute, so ActionItem.ariaLabel is honored when ActionBar is used directly (not only via Preview.tsx).
Sidnioulz
force-pushed
the
fix/issue-34746-action-item-aria-label
branch
from
1f0e895 to
a856c2c
Compare
Sidnioulz
approved these changes
May 21, 2026
github-project-automation
Bot
moved this from Empathy Queue (prioritized)
to Done
in Core Team Projects
This was referenced May 21, 2026
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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
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.
Closes #34746
What I did
Added
ariaLabel?: stringto theActionIteminterface so users can supply a custom accessible label for buttons rendered viacanvas.additionalActionsin the docs addon.ariaLabel?: stringtoActionItemincode/core/src/components/components/ActionBar/ActionBar.tsxcode/addons/docs/src/types.tsariaLabelto<Button>inPreview.tsxwithariaLabel ?? falseas default —falsesuppresses the Storybook 11 mandatory-prop warning whentitleis visible text, while a customariaLabelis used when providedChecklist for Contributors
Testing
The changes in this PR are covered in the following automated tests:
I did not add automated tests because the change is a TypeScript type addition plus a prop pass-through. Happy to add a story with a
playfunction assertingaria-labelif preferred.Manual testing
cd code && yarn storybook:uiaddons/docs/blocks/components/Preview→With Additional Actions'ariaLabel' prop on 'Button' will become mandatory in Storybook 11warning is no longer emitted from the additional action buttonsariaLabelinadditionalActionsvia the docscanvasparameter to confirm a custom label is forwarded to the rendered buttonDocumentation
Checklist for Maintainers
ci:normal,ci:mergedorci:dailylabel to run sandboxesbug,maintenance,dependencies,build,cleanup,documentation,feature request,BREAKING CHANGE,otherCanary release
This PR does not have a canary release associated. Request by mentioning @storybookjs/core team.
AI tool: I used Claude Code for analysis. The implementation and testing was done by me.
Summary by CodeRabbit