Avoid double translation in buttons

Author: djhi

packages/ra-ui-materialui/src/button/Button.tsx

@@ -45,7 +45,12 @@ export const Button = <RootComponent extends React.ElementType = 'button'>(
     } = props;
 
     const translate = useTranslate();
-    const translatedLabel = label ? translate(label, { _: label }) : undefined;
+    let translatedLabel = label;
+    if (typeof label === 'string') {
+        translatedLabel = translate(label, {
+            _: label,
+        });
+    }
     const linkParams = getLinkParams(locationDescriptor);
 
     const isXSmall = useMediaQuery((theme: Theme) =>
@@ -56,7 +61,12 @@ export const Button = <RootComponent extends React.ElementType = 'button'>(
         label && !disabled ? (
             <Tooltip title={translatedLabel}>
                 <IconButton
-                    aria-label={translatedLabel}
+                    // If users provide a ReactNode as label, its their responsibility to also provide an aria-label should they need it
+                    aria-label={
+                        typeof translatedLabel === 'string'
+                            ? translatedLabel
+                            : undefined
+                    }
                     className={className}
                     color={color}
                     size="large"
@@ -83,7 +93,12 @@ export const Button = <RootComponent extends React.ElementType = 'button'>(
             className={className}
             color={color}
             size={size}
-            aria-label={translatedLabel}
+            // If users provide a ReactNode as label, its their responsibility to also provide an aria-label should they need it
+            aria-label={
+                typeof translatedLabel === 'string'
+                    ? translatedLabel
+                    : undefined
+            }
             disabled={disabled}
             startIcon={alignIcon === 'left' && children ? children : undefined}
             endIcon={alignIcon === 'right' && children ? children : undefined}
@@ -102,7 +117,7 @@ interface Props<RootComponent extends React.ElementType> {
     component?: RootComponent;
     to?: LocationDescriptor | To;
     disabled?: boolean;
-    label?: string;
+    label?: React.ReactNode;
     size?: 'small' | 'medium' | 'large';
     variant?: string;
 }

packages/ra-ui-materialui/src/button/CreateButton.tsx

@@ -94,7 +94,8 @@ const CreateButton = (inProps: CreateButtonProps) => {
             // @ts-ignore FabProps ships its own runtime palette `FabPropsColorOverrides` provoking an overlap error with `ButtonProps`
             color="primary"
             className={clsx(CreateButtonClasses.floating, className)}
-            aria-label={label}
+            // If users provide a ReactNode as label, its their responsibility to also provide an aria-label should they need it
+            aria-label={typeof label === 'string' ? label : undefined}
             {...rest}
             {...linkParams}
         >
@@ -106,7 +107,10 @@ const CreateButton = (inProps: CreateButtonProps) => {
             to={createPath({ resource, type: 'create' })}
             state={state}
             className={clsx(CreateButtonClasses.root, className)}
-            label={label}
+            // avoid double translation
+            label={<>{label}</>}
+            // If users provide a ReactNode as label, its their responsibility to also provide an aria-label should they need it
+            aria-label={typeof label === 'string' ? label : undefined}
             variant={variant}
             {...(rest as any)}
             {...linkParams}

packages/ra-ui-materialui/src/button/DeleteWithConfirmButton.tsx

@@ -98,7 +98,10 @@ export const DeleteWithConfirmButton = <RecordType extends RaRecord = any>(
         <Fragment>
             <Button
                 onClick={handleDialogOpen}
-                label={label}
+                // avoid double translation
+                label={<>{label}</>}
+                // If users provide a ReactNode as label, its their responsibility to also provide an aria-label should they need it
+                aria-label={typeof label === 'string' ? label : undefined}
                 className={clsx('ra-delete-button', className)}
                 key="button"
                 color={color}

packages/ra-ui-materialui/src/button/DeleteWithUndoButton.tsx

@@ -69,7 +69,10 @@ export const DeleteWithUndoButton = <RecordType extends RaRecord = any>(
         <Button
             onClick={handleDelete}
             disabled={isPending}
-            label={label}
+            // avoid double translation
+            label={<>{label}</>}
+            // If users provide a ReactNode as label, its their responsibility to also provide an aria-label should they need it
+            aria-label={typeof label === 'string' ? label : undefined}
             className={clsx('ra-delete-button', className)}
             key="button"
             color={color}

packages/ra-ui-materialui/src/button/EditButton.tsx

@@ -86,7 +86,10 @@ export const EditButton = <RecordType extends RaRecord = any>(
             component={Link}
             to={createPath({ type: 'edit', resource, id: record.id })}
             state={scrollStates[String(scrollToTop)]}
-            label={label}
+            // avoid double translation
+            label={<>{label}</>}
+            // If users provide a ReactNode as label, its their responsibility to also provide an aria-label should they need it
+            aria-label={typeof label === 'string' ? label : undefined}
             onClick={stopPropagation}
             className={clsx(EditButtonClasses.root, className)}
             {...(rest as any)}

packages/ra-ui-materialui/src/button/ListButton.tsx

@@ -75,7 +75,10 @@ export const ListButton = (props: ListButtonProps) => {
             component={Link}
             to={createPath({ type: 'list', resource })}
             state={scrollStates[String(scrollToTop)]}
-            label={label}
+            // avoid double translation
+            label={<>{label}</>}
+            // If users provide a ReactNode as label, its their responsibility to also provide an aria-label should they need it
+            aria-label={typeof label === 'string' ? label : undefined}
             {...(rest as any)}
         >
             {icon}

packages/ra-ui-materialui/src/button/ShowButton.tsx

@@ -78,7 +78,10 @@ const ShowButton = <RecordType extends RaRecord = any>(
             component={Link}
             to={createPath({ type: 'show', resource, id: record.id })}
             state={scrollStates[String(scrollToTop)]}
-            label={label}
+            // avoid double translation
+            label={<>{label}</>}
+            // If users provide a ReactNode as label, its their responsibility to also provide an aria-label should they need it
+            aria-label={typeof label === 'string' ? label : undefined}
             onClick={stopPropagation}
             {...(rest as any)}
         >