[ui][button] add aria-label prop

packages/ui/src/Button/Button.tsx

@@ -22,6 +22,7 @@ export type ButtonVariant =
 type Props = Readonly<{
   addonPosition?: ButtonAddOnPosition;
   'aria-controls'?: string;
+  'aria-label'?: string;
   className?: string;
   disabled?: boolean;
   display?: ButtonDisplay;
@@ -57,14 +58,14 @@ const baseClasses: Record<ButtonSize, string> = {
 };
 
 const sizeIconSpacingEndClasses: Record<ButtonSize, string> = {
-  lg: 'ml-3 -mr-1 ',
+  lg: 'ml-3 -mr-1',
-  md: 'ml-2 -mr-1 ',
+  md: 'ml-2 -mr-1',
   sm: 'ml-2 -mr-0.5',
 };
 
 const sizeIconSpacingStartClasses: Record<ButtonSize, string> = {
-  lg: 'mr-3 -ml-1 ',
+  lg: 'mr-3 -ml-1',
-  md: 'mr-2 -ml-1 ',
+  md: 'mr-2 -ml-1',
   sm: 'mr-2 -ml-0.5',
 };
 
@@ -106,6 +107,7 @@ const variantDisabledClasses: Record<ButtonVariant, string> = {
 export default function Button({
   addonPosition = 'end',
   'aria-controls': ariaControls,
+  'aria-label': ariaLabel,
   className,
   display = 'inline',
   href,
@@ -148,7 +150,7 @@ export default function Button({
 
   const commonProps = {
     'aria-controls': ariaControls ?? undefined,
-    'aria-label': isLabelHidden ? label : undefined,
+    'aria-label': isLabelHidden ? ariaLabel ?? label : undefined,
     children,
     className: clsx(
       display === 'block' ? 'flex w-full justify-center' : 'inline-flex',