[EuiIconTip] Fix non-i18n'd aria-label

cee-chen · cee-chen · commit a2816f7032cc · 2024-03-20T12:01:16.000-07:00
diff --git a/changelogs/upcoming/7606.md b/changelogs/upcoming/7606.md
@@ -1,3 +1,7 @@
+**Bug fixes**
+
+- Fixed `EuiIconTip`'s default `aria-label` text to be i18n tokenizable
+
 **Accessibility**
 
 - `EuiIcons` no longer apply `aria-hidden` to empty icons, as long as a valid title or label is provided to the icon. In particular, this is intended to improve the accessibility of loading `EuiIconTip`s.
diff --git a/src/components/tool_tip/icon_tip.tsx b/src/components/tool_tip/icon_tip.tsx
@@ -9,6 +9,7 @@
 import React, { FunctionComponent } from 'react';
 
 import { PropsOf } from '../common';
+import { useEuiI18n } from '../i18n';
 import { EuiIcon, IconSize, IconType } from '../icon';
 import { EuiToolTip, EuiToolTipProps } from './tool_tip';
 
@@ -53,22 +54,26 @@ type Props = Omit<EuiToolTipProps, 'children' | 'delay' | 'position'> &
 
 export const EuiIconTip: FunctionComponent<Props> = ({
   type = 'questionInCircle',
-  'aria-label': ariaLabel = 'Info',
+  'aria-label': ariaLabel,
   color,
   size,
   iconProps,
   position = 'top',
   delay = 'regular',
   ...rest
-}) => (
-  <EuiToolTip position={position} delay={delay} {...rest}>
-    <EuiIcon
-      tabIndex={0}
-      type={type}
-      color={color}
-      size={size}
-      aria-label={ariaLabel}
-      {...iconProps}
-    />
-  </EuiToolTip>
-);
+}) => {
+  const defaultAriaLabel = useEuiI18n('euiIconTip.defaultAriaLabel', 'Info');
+
+  return (
+    <EuiToolTip position={position} delay={delay} {...rest}>
+      <EuiIcon
+        tabIndex={0}
+        type={type}
+        color={color}
+        size={size}
+        aria-label={ariaLabel || defaultAriaLabel}
+        {...iconProps}
+      />
+    </EuiToolTip>
+  );
+};
