feat: replace title with tooltip

Author: weronikaolejniczak

packages/eui/src/components/avatar/__snapshots__/avatar.test.tsx.snap

@@ -7,6 +7,7 @@
  */
 
 import React from 'react';
+import { fireEvent } from '@testing-library/react';
 import { shouldRenderCustomStyles } from '../../test/internal';
 import { requiredProps } from '../../test/required_props';
 import { render } from '../../test/rtl';
@@ -168,6 +169,20 @@ describe('EuiAvatar', () => {
     });
   });
 
+  describe('tooltip', () => {
+    it('shows a tooltip with the avatar name on hover', () => {
+      const { getByRole, queryByRole } = render(<EuiAvatar name="Jane Doe" />);
+      expect(queryByRole('tooltip')).not.toBeInTheDocument();
+      fireEvent.mouseOver(getByRole('img'));
+      expect(getByRole('tooltip')).toHaveTextContent('Jane Doe');
+    });
+
+    it('is keyboard focusable', () => {
+      const { getByRole } = render(<EuiAvatar name="Jane Doe" />);
+      expect(getByRole('img')).toHaveAttribute('tabindex', '0');
+    });
+  });
+
   test('should throw error if color is not a hex', () => {
     const component = () =>
       render(<EuiAvatar name="name" color="rgba(0,0,0,0)" />);

packages/eui/src/components/avatar/avatar.test.tsx

@@ -22,6 +22,7 @@ import {
 } from '../../services/color';
 import { toInitials, useEuiMemoizedStyles, useEuiTheme } from '../../services';
 import { IconType, EuiIcon, IconSize, IconColor } from '../icon';
+import { EuiToolTip } from '../tool_tip';
 
 import { euiAvatarStyles } from './avatar.styles';
 
@@ -201,29 +202,32 @@ export const EuiAvatar: FunctionComponent<EuiAvatarProps> = ({
   }, [iconColor, avatarStyle?.color, isForcedColors, euiTheme]);
 
   return (
-    <div
-      css={cssStyles}
-      className={classes}
-      style={{ ...style, ...avatarStyle, ...highContrastBorder }}
-      aria-label={isDisabled ? undefined : name}
-      role={isDisabled ? 'presentation' : 'img'}
-      title={name}
-      {...rest}
-    >
-      {!imageUrl &&
-        (iconType ? (
-          <EuiIcon
-            className="euiAvatar__icon"
-            size={iconSize || size}
-            type={iconType}
-            color={iconCustomColor}
-          />
-        ) : (
-          <span aria-hidden="true">
-            {toInitials(name, initialsLength, initials)}
-          </span>
-        ))}
-    </div>
+    <EuiToolTip content={name} disableScreenReaderOutput>
+      <div
+        css={cssStyles}
+        className={classes}
+        style={{ ...style, ...avatarStyle, ...highContrastBorder }}
+        aria-label={isDisabled ? undefined : name}
+        role={isDisabled ? 'presentation' : 'img'}
+        tabIndex={0}
+        {...rest}
+      >
+        {!imageUrl &&
+          (iconType ? (
+            <EuiIcon
+              className="euiAvatar__icon"
+              size={iconSize || size}
+              type={iconType}
+              color={iconCustomColor}
+              aria-hidden={true}
+            />
+          ) : (
+            <span aria-hidden="true">
+              {toInitials(name, initialsLength, initials)}
+            </span>
+          ))}
+      </div>
+    </EuiToolTip>
   );
 };