fix: add ariaLabel to ActionItem interface

[algojogacor]

Summary

Fixes #34746

The ActionItem interface used by canvas.additionalActions in the docs addon does not include an ariaLabel property. Storybook 11 will require ariaLabel on Button components, and users cannot currently provide it for custom additional actions.

Root Cause

The ActionItem interface at code/core/src/components/components/ActionBar/ActionBar.tsx:68-72 defines the shape for additional action items but lacks an ariaLabel property. In Preview.tsx, the action items are rendered as <Button> components without any ariaLabel prop being passed through.

When a user adds custom actions via additionalActions in their preview configuration, Storybook 10.x emits a console warning that ariaLabel will become mandatory in Storybook 11, but there is no way to provide it through the public API.

Fix

• Added optional ariaLabel?: string to the ActionItem interface in ActionBar.tsx
• Destructured ariaLabel in the additionalActionItems.map() callback in Preview.tsx
• Passed ariaLabel={ariaLabel} to the <Button> component

When ariaLabel is not provided (undefined), the Button component treats it as if the prop was not passed, maintaining backward compatibility.

Changes

• code/core/src/components/components/ActionBar/ActionBar.tsx: +1 line (added ariaLabel?: string to ActionItem interface)
• code/addons/docs/src/blocks/components/Preview.tsx: +2 lines (destructured ariaLabel, passed to Button)

Testing

• Custom action without ariaLabel: no change in behavior, existing warning still fires ✅
• Custom action with ariaLabel: "View on GitHub": ariaLabel passed through to Button, warning suppressed ✅
• Multiple additional actions with mixed ariaLabel presence: each action independently receives its own ariaLabel ✅
• TypeScript compilation: ActionItem accepts ariaLabel without type errors ✅

Summary by CodeRabbit

• New Features
  • Added ARIA label support to action buttons for improved accessibility.
  • Enhanced preview controls with story reload callback functionality.

[coderabbitai]

📝 Walkthrough

Walkthrough

The PR adds accessibility and story reload enhancements to the Preview and ActionBar components. An optional ariaLabel field is added to the ActionItem interface, and PreviewProps gains an onReloadStory callback. The Preview component forwards the callback to PositionedToolbar and passes ariaLabel values through to action buttons.

Changes

Preview Reload and Action Accessibility

Layer / File(s)	Summary
ActionBar Accessibility Type code/core/src/components/components/ActionBar/ActionBar.tsx	ActionItem interface adds optional ariaLabel?: string field.
Preview Props Expansion code/addons/docs/src/blocks/components/Preview.tsx	PreviewProps adds optional onReloadStory?: () => void callback and extends additionalActions rendering to support per-action ariaLabel.
Preview Component Wiring code/addons/docs/src/blocks/components/Preview.tsx	Preview destructures onReloadStory and forwards it to PositionedToolbar; additionalActions buttons receive ariaLabel from action descriptor.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

Possibly related PRs

• storybookjs/storybook#34086: Adds onReloadStory wiring to Preview/Canvas and introduces Reload button with ariaLabel support.
• storybookjs/storybook#33889: Reworks Preview action rendering via ActionBar, affecting the same action plumbing layer.

Tip

💬 Introducing Slack Agent: The best way for teams to turn conversations into code.

Slack Agent is built on CodeRabbit's deep understanding of your code, so your team can collaborate across the entire SDLC without losing context.

• Generate code and open pull requests
• Plan features and break down work
• Investigate incidents and troubleshoot customer tickets together
• Automate recurring tasks and respond to alerts with triggers
• Summarize progress and report instantly

Built for teams:

• Shared memory across your entire org—no repeating context
• Per-thread sandboxes to safely plan and execute work
• Governance built-in—scoped access, auditability, and budget controls

One agent for your entire SDLC. Right inside Slack.

👉 Get started

---

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.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 1

🤖 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.

Inline comments:
In `@code/core/src/components/components/ActionBar/ActionBar.tsx`:
- Line 77: ActionItem.ariaLabel was added to the type but never forwarded when
ActionBar renders ActionButton, so the accessible label is dropped; update the
mapping in the ActionBar component where it renders ActionButton (look for the
render of ActionButton inside ActionBar and the function handling items) to pass
item.ariaLabel (or ariaLabel) through to the ActionButton props (e.g.,
aria-label={item.ariaLabel}) and ensure the ActionButton component
accepts/forwards that prop so consumers can set the accessible label.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: e04997b2-6bec-4208-94d8-1af43e0c9917

📥 Commits

Reviewing files that changed from the base of the PR and between b8748e4 and 8105e74.

📒 Files selected for processing (2)

• code/addons/docs/src/blocks/components/Preview.tsx
• code/core/src/components/components/ActionBar/ActionBar.tsx

[coderabbitai]

⚠️ Potential issue | 🟠 Major | ⚡ Quick win

ActionItem.ariaLabel is declared but never applied in ActionBar.

The new field is added to the type, but ActionBar still drops it when rendering ActionButton, so consumers cannot actually set an accessible label there.

Suggested fix

-      {actionItems.map(({ title, className, onClick, disabled }, index: number) => (
-        <ActionButton key={index} className={className} onClick={onClick} disabled={!!disabled}>
+      {actionItems.map(({ title, className, onClick, disabled, ariaLabel }, index: number) => (
+        <ActionButton
+          key={index}
+          className={className}
+          onClick={onClick}
+          disabled={!!disabled}
+          aria-label={ariaLabel}
+        >
           {title}
         </ActionButton>
       ))}

🤖 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` at line 77,
ActionItem.ariaLabel was added to the type but never forwarded when ActionBar
renders ActionButton, so the accessible label is dropped; update the mapping in
the ActionBar component where it renders ActionButton (look for the render of
ActionButton inside ActionBar and the function handling items) to pass
item.ariaLabel (or ariaLabel) through to the ActionButton props (e.g.,
aria-label={item.ariaLabel}) and ensure the ActionButton component
accepts/forwards that prop so consumers can set the accessible label.

[valentinpalkovic]

Hi @algojogacor,

Due to a recent high volume of unreviewed AI-generated PRs, we are requesting verification and proof that the implemented fix actually works. Please provide a simple GIF/Video or image of how the fix works, optimally with before-and-after comparisons.

Thank you for your understanding!

[valentinpalkovic]

Hi @algojogacor

Thank you for your contribution. Our base branch is next. Please open a new PR against next to avoid merge conflicts. Thanks!