fix: add ariaLabel support to ActionItem interface

[xxiaoxiong]

What I did

Added ariaLabel support to the ActionItem interface to resolve accessibility warnings when using canvas.additionalActions in the docs addon.

How to test

1. Add custom actions via additionalActions in .storybook/preview.tsx:

export default definePreview({
  parameters: {
    docs: {
      canvas: {
        additionalActions: [
          {
            title: 'View source on GitHub',
            onClick: () => { /* ... */ },
            ariaLabel: 'View source code on GitHub',
          },
        ],
      },
    },
  },
});

2. Open a docs page and check the console - no more warnings about missing ariaLabel
3. For buttons with text content, use ariaLabel: false to opt out

Checklist for Contributors

Testing

• Added/updated unit tests
• Added/updated e2e tests
• Verified in a sandbox (see yarn task sandbox in AGENTS.md)

Documentation

• Updated documentation
• Updated migration guide

Versioning

• This PR contains a breaking change (if yes, provide migration guide above)
• This PR introduces a new feature (if yes, add feature flag if applicable)

---

Issue

Fixes #34746

Problem

The ActionItem interface used by canvas.additionalActions in the docs addon doesn't include an ariaLabel property. Storybook 11 will require ariaLabel on Button components, causing console warnings:

The 'ariaLabel' prop on 'Button' will become mandatory in Storybook 11...

Users had no way to provide ariaLabel because the ActionItem type doesn't accept it.

Solution

• Added ariaLabel?: string | false to ActionItem interface
• Updated ActionBar component to pass ariaLabel to button elements
• Added ariaLabel to additionalActions type in docs addon
• ariaLabel={false} allows opt-out for buttons with text content (matching Button component behavior)

Changes

Modified files:

• code/core/src/components/components/ActionBar/ActionBar.tsx
  • Added ariaLabel property to ActionItem interface
  • Updated ActionBar to destructure and pass ariaLabel to buttons
• code/addons/docs/src/types.ts
  • Added ariaLabel property to additionalActions type

Impact

Users can now:

• Provide meaningful aria-label values for accessibility
• Set ariaLabel={false} for buttons with text content to suppress warnings
• Prepare for Storybook 11's mandatory ariaLabel requirement

Summary by CodeRabbit

• New Features
  • Added support for customizable aria labels on action buttons, enabling improved accessibility. Labels can be configured as a custom string or explicitly disabled using false.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 853f6cab-5205-45c9-bca5-266b35341321

📥 Commits

Reviewing files that changed from the base of the PR and between b2167d6 and cc63aa3.

📒 Files selected for processing (2)

• code/addons/docs/src/types.ts
• code/core/src/components/components/ActionBar/ActionBar.tsx

---

📝 Walkthrough

Walkthrough

This PR adds optional ariaLabel support to action items across two core files. The ActionItem interface is extended with an ariaLabel?: string | false field, ActionBar propagates this to rendered ActionButton elements via the HTML aria-label attribute, and CanvasBlockParameters docs configuration is updated to support the new field for canvas action buttons.

Changes

Aria-label Support for Action Items

Layer / File(s)	Summary
Core Interface Definition code/core/src/components/components/ActionBar/ActionBar.tsx	ActionItem interface adds optional ariaLabel?: string | false property.
ActionBar Implementation code/core/src/components/components/ActionBar/ActionBar.tsx	ActionBar destructures ariaLabel from action items and passes it to ActionButton as aria-label, treating false as undefined.
Docs Configuration Extension code/addons/docs/src/types.ts	CanvasBlockParameters.additionalActions items now support ariaLabel?: string | false configuration.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

---

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

[Sidnioulz]

Hi @xxiaoxiong! Thank you so much for your PR to Storybook! ❤️

Unfortunately, someone else wrote a PR for the same issue just before you, and I've just merged that other PR. So I'm gonna have to close yours 😞

Feel free to pick up another issue without any PR if you're still keen to contribute to Storybook! Thanks