From 73f8431df35cf1ba7b5e2d69ece182d32490f164 Mon Sep 17 00:00:00 2001
From: Seydi Charyyev <seydi.charyev@gmail.com>
Date: Fri, 8 May 2026 12:36:43 +0500
Subject: [PATCH 1/2] fix(docs): add ariaLabel support to ActionItem interface

- 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 #34746
---
 .../docs/src/blocks/components/Preview.tsx    | 25 +++++++++++--------
 code/addons/docs/src/types.ts                 |  1 +
 .../components/ActionBar/ActionBar.tsx        |  1 +
 3 files changed, 16 insertions(+), 11 deletions(-)

diff --git a/code/addons/docs/src/blocks/components/Preview.tsx b/code/addons/docs/src/blocks/components/Preview.tsx
index cd8b8760b832..db7d102e2d24 100644
--- a/code/addons/docs/src/blocks/components/Preview.tsx
+++ b/code/addons/docs/src/blocks/components/Preview.tsx
@@ -258,17 +258,20 @@ export const Preview: FC<PreviewProps> = ({
               </Button>
             </>
           )}
-          {additionalActionItems.map(({ title, className, onClick, disabled }, index: number) => (
-            <Button
-              key={index}
-              className={className}
-              onClick={onClick}
-              disabled={!!disabled}
-              variant="ghost"
-            >
-              {title}
-            </Button>
-          ))}
+          {additionalActionItems.map(
+            ({ title, ariaLabel, className, onClick, disabled }, index: number) => (
+              <Button
+                key={index}
+                ariaLabel={ariaLabel ?? false}
+                className={className}
+                onClick={onClick}
+                disabled={!!disabled}
+                variant="ghost"
+              >
+                {title}
+              </Button>
+            )
+          )}
         </ActionBar>
       )}
     </>
diff --git a/code/addons/docs/src/types.ts b/code/addons/docs/src/types.ts
index 71768a3e34b4..7811bb75c74a 100644
--- a/code/addons/docs/src/types.ts
+++ b/code/addons/docs/src/types.ts
@@ -69,6 +69,7 @@ type CanvasBlockParameters = {
    * buttons that do anything you specify in the onClick function.
    */
   additionalActions?: {
+    ariaLabel?: string;
     className?: string;
     disabled?: boolean;
     onClick: () => void;
diff --git a/code/core/src/components/components/ActionBar/ActionBar.tsx b/code/core/src/components/components/ActionBar/ActionBar.tsx
index 59f6694501f5..3372c2a35ec5 100644
--- a/code/core/src/components/components/ActionBar/ActionBar.tsx
+++ b/code/core/src/components/components/ActionBar/ActionBar.tsx
@@ -71,6 +71,7 @@ ActionButton.displayName = 'ActionButton';
 
 export interface ActionItem {
   title: string | ReactElement;
+  ariaLabel?: string;
   className?: string;
   onClick: (e: MouseEvent<HTMLButtonElement>) => void;
   disabled?: boolean;

From a856c2c2a0606f1e7468e350c4c517e8912fb650 Mon Sep 17 00:00:00 2001
From: Seydi Charyyev <seydi.charyev@gmail.com>
Date: Fri, 8 May 2026 12:51:25 +0500
Subject: [PATCH 2/2] fix: forward ariaLabel from ActionItem to ActionButton

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).
---
 .../src/components/components/ActionBar/ActionBar.tsx  | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/code/core/src/components/components/ActionBar/ActionBar.tsx b/code/core/src/components/components/ActionBar/ActionBar.tsx
index 3372c2a35ec5..ea853bf5f69b 100644
--- a/code/core/src/components/components/ActionBar/ActionBar.tsx
+++ b/code/core/src/components/components/ActionBar/ActionBar.tsx
@@ -90,8 +90,14 @@ export interface ActionBarProps {
 export const ActionBar = ({ actionItems, flexLayout = false, ...props }: ActionBarProps) => {
   return (
     <Container {...props} $flexLayout={flexLayout}>
-      {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}
+        >
           {title}
         </ActionButton>
       ))}