Accessibility Update: Tooltip Trigger Dimensions

This commit updates the tooltip trigger to have a minimum width and height of 1.5rem (24px) to meet accessibility requirements. This ensures the tooltip trigger is adequately sized for all users.

Author: Hector Arce De Las Heras

src/components/tooltip/components/tooltipTrigger.tsx

@@ -4,6 +4,7 @@ import { ButtonType } from '../../button';
 import { TooltipTriggerWrapperStyled } from '../tooltip.styled';
 
 interface ITooltipTrigger {
+  disabled?: boolean;
   childrenAsButton: boolean;
 }
 
@@ -12,7 +13,7 @@ export const TooltipTrigger = (
 ): React.ReactNode => {
   if (props.childrenAsButton) {
     return (
-      <TooltipTriggerWrapperStyled type={ButtonType.BUTTON}>
+      <TooltipTriggerWrapperStyled disabled={props.disabled} type={ButtonType.BUTTON}>
         {props.children}
       </TooltipTriggerWrapperStyled>
     );

src/components/tooltip/tooltip.styled.ts

@@ -107,4 +107,7 @@ export const TooltipTriggerWrapperStyled = styled.button`
   padding: 0;
   border: none;
   background: none;
+
+  min-height: 1.5rem; // accessible min-size
+  min-width: 1.5rem; // accessible min-size
 `;

src/components/tooltip/tooltipStandAlone.tsx

@@ -41,7 +41,11 @@ const TooltipStandAlone = ({
 
   if (props.disabled) {
     return (
-      <TooltipStyled data-testid={`${props.dataTestId}Tooltip`}>{props.children}</TooltipStyled>
+      <TooltipStyled data-testid={`${props.dataTestId}Tooltip`}>
+        <TooltipTrigger disabled childrenAsButton={childrenAsButton}>
+          {props.children}
+        </TooltipTrigger>
+      </TooltipStyled>
     );
   }