Skip to content

Commit 1c131f8

Browse files
TextInput: Refactor TextInputInnerAction to use the default icon button tooltip (#4733)
* Remove the external Tooltip from textinputinneraction * Create modern-carrots-check.md
1 parent d4f23fb commit 1c131f8

File tree

2 files changed

+35
-6
lines changed

2 files changed

+35
-6
lines changed

.changeset/modern-carrots-check.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@primer/react": patch
3+
---
4+
5+
TextInput: Refactor TextInputInnerAction to use the default icon button tooltip (No changes in the behaviour or DOM is expected)

packages/react/src/internal/components/TextInputInnerAction.tsx

Lines changed: 30 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -79,7 +79,16 @@ const ConditionalTooltip: React.FC<
7979

8080
const TextInputAction = forwardRef<HTMLButtonElement, TextInputActionProps>(
8181
(
82-
{'aria-label': ariaLabel, tooltipDirection, children, icon, sx: sxProp, variant = 'invisible', ...rest},
82+
{
83+
'aria-label': ariaLabel,
84+
'aria-labelledby': ariaLabelledBy,
85+
tooltipDirection,
86+
children,
87+
icon,
88+
sx: sxProp,
89+
variant = 'invisible',
90+
...rest
91+
},
8392
forwardedRef,
8493
) => {
8594
const sx =
@@ -92,13 +101,28 @@ const TextInputAction = forwardRef<HTMLButtonElement, TextInputActionProps>(
92101
console.warn('Use the `aria-label` prop to provide an accessible label for assistive technology')
93102
}
94103

104+
const accessibleLabel = ariaLabel
105+
? {'aria-label': ariaLabel}
106+
: ariaLabelledBy
107+
? {'aria-labelledby': ariaLabelledBy}
108+
: {
109+
'aria-label': '',
110+
}
111+
95112
return (
96113
<Box as="span" className="TextInput-action" marginLeft={1} marginRight={1} lineHeight="0">
97-
{icon && !children ? (
98-
<Tooltip direction={tooltipDirection ?? 's'} text={ariaLabel ?? ''} type="label">
99-
{/* @ts-ignore we intentionally do add aria-label to IconButton because Tooltip v2 adds an aria-labelledby instead. */}
100-
<IconButton variant={variant} type="button" icon={icon} size="small" sx={sx} {...rest} ref={forwardedRef} />
101-
</Tooltip>
114+
{icon && !children && ariaLabel ? (
115+
<IconButton
116+
{...accessibleLabel}
117+
tooltipDirection={tooltipDirection ?? 's'}
118+
variant={variant}
119+
type="button"
120+
icon={icon}
121+
size="small"
122+
sx={sx}
123+
{...rest}
124+
ref={forwardedRef}
125+
/>
102126
) : (
103127
<ConditionalTooltip aria-label={ariaLabel}>
104128
<Button variant={variant} type="button" sx={sx} {...rest} ref={forwardedRef}>

0 commit comments

Comments
 (0)