TextInput: Refactor TextInputInnerAction to use the default icon bu…

…tton tooltip (#4733) * Remove the external Tooltip from textinputinneraction * Create modern-carrots-check.md
primer · Jul 23, 2024 · 1c131f8 · 1c131f8
1 parent d4f23fb
commit 1c131f8
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 6 deletions.
diff --git a/.changeset/modern-carrots-check.md b/.changeset/modern-carrots-check.md
@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+TextInput: Refactor TextInputInnerAction to use the default icon button tooltip (No changes in the behaviour or DOM is expected)
diff --git a/packages/react/src/internal/components/TextInputInnerAction.tsx b/packages/react/src/internal/components/TextInputInnerAction.tsx
@@ -79,7 +79,16 @@ const ConditionalTooltip: React.FC<
 
 const TextInputAction = forwardRef<HTMLButtonElement, TextInputActionProps>(
   (
-    {'aria-label': ariaLabel, tooltipDirection, children, icon, sx: sxProp, variant = 'invisible', ...rest},
+    {
+      'aria-label': ariaLabel,
+      'aria-labelledby': ariaLabelledBy,
+      tooltipDirection,
+      children,
+      icon,
+      sx: sxProp,
+      variant = 'invisible',
+      ...rest
+    },
     forwardedRef,
   ) => {
     const sx =
@@ -92,13 +101,28 @@ const TextInputAction = forwardRef<HTMLButtonElement, TextInputActionProps>(
       console.warn('Use the `aria-label` prop to provide an accessible label for assistive technology')
     }
 
+    const accessibleLabel = ariaLabel
+      ? {'aria-label': ariaLabel}
+      : ariaLabelledBy
+      ? {'aria-labelledby': ariaLabelledBy}
+      : {
+          'aria-label': '',
+        }
+
     return (
       <Box as="span" className="TextInput-action" marginLeft={1} marginRight={1} lineHeight="0">
-        {icon && !children ? (
-          <Tooltip direction={tooltipDirection ?? 's'} text={ariaLabel ?? ''} type="label">
-            {/* @ts-ignore we intentionally do add aria-label to IconButton because Tooltip v2 adds an aria-labelledby instead. */}
-            <IconButton variant={variant} type="button" icon={icon} size="small" sx={sx} {...rest} ref={forwardedRef} />
-          </Tooltip>
+        {icon && !children && ariaLabel ? (
+          <IconButton
+            {...accessibleLabel}
+            tooltipDirection={tooltipDirection ?? 's'}
+            variant={variant}
+            type="button"
+            icon={icon}
+            size="small"
+            sx={sx}
+            {...rest}
+            ref={forwardedRef}
+          />
         ) : (
           <ConditionalTooltip aria-label={ariaLabel}>
             <Button variant={variant} type="button" sx={sx} {...rest} ref={forwardedRef}>