[harness eval #34749] Docs: Add ariaLabel support to ActionItem interface

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>
       )}
     </>

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;

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;
@@ -89,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>
       ))}