[EuiComment] Revert username prop to accept a ReactNode

src-docs/src/views/comment/comment.tsx

@@ -28,6 +28,7 @@ export default () => (
   <EuiCommentList>
     <EuiComment
       username="janed"
+      timelineIconAriaLabel="Jane Doe"
       event="added a comment"
       actions={copyAction}
       timestamp="on Jan 1, 2020"

src-docs/src/views/comment/comment_actions.tsx

@@ -121,6 +121,7 @@ export default () => {
       <EuiCommentList aria-label="Actions">
         <EuiComment
           username="janed"
+          timelineIconAriaLabel="Jane Doe"
           event="added a comment"
           actions={customActions}
           timestamp="on Jan 1, 2020"
@@ -129,6 +130,7 @@ export default () => {
         </EuiComment>
         <EuiComment
           username="system"
+          timelineIconAriaLabel="System"
           timelineIcon="dot"
           event={
             <>

src-docs/src/views/comment/comment_avatar.tsx

@@ -9,7 +9,11 @@ import {
 
 export default () => (
   <EuiCommentList aria-label="An example with different timeline icons">
-    <EuiComment username="andred" event="is using a default avatar">
+    <EuiComment
+      username="andred"
+      timelineIconAriaLabel="Andre Diaz"
+      event="is using a default avatar"
+    >
       <EuiText size="s">
         <p>
           The avatar initials is generated from the <EuiCode>username</EuiCode>{' '}
@@ -20,6 +24,7 @@ export default () => (
 
     <EuiComment
       username="system"
+      timelineIconAriaLabel="System"
       timelineIcon="dot"
       event={
         <>
@@ -31,6 +36,7 @@ export default () => (
 
     <EuiComment
       username="cat"
+      timelineIconAriaLabel="Beatiful cat"
       event="is using a custom avatar"
       timelineIcon={
         <EuiAvatar

src-docs/src/views/comment/comment_example.js

@@ -96,7 +96,10 @@ export const CommentListExample = {
             For accessibility, it is highly recommended to provide a descriptive{' '}
             <EuiCode>aria-label</EuiCode> or the ID of an external label to the{' '}
             <EuiCode>aria-labelledby</EuiCode> prop of the{' '}
-            <strong>EuiCommentList</strong>.
+            <strong>EuiCommentList</strong>. A{' '}
+            <EuiCode>timelineIconAriaLabel</EuiCode> should be provided for
+            every <strong>EuiComment</strong> with or without a{' '}
+            <EuiCode>timelineIcon</EuiCode> as <EuiCode>IconType</EuiCode>.
           </>
         }
       />

src-docs/src/views/comment/comment_flexible.tsx

@@ -49,13 +49,15 @@ const eventWithMultipleTags = (
 const commentsData: EuiCommentListProps['comments'] = [
   {
     username: 'janed',
+    timelineIconAriaLabel: 'Jane Doe',
     event: 'added a comment',
     timestamp: 'on Jan 1, 2020',
     children: body,
     actions: copyAction,
   },
   {
     username: 'luisg',
+    timelineIconAriaLabel: 'Luis G',
     event: eventWithMultipleTags,
     timestamp: '22 hours ago',
     eventIcon: 'tag',
@@ -64,13 +66,15 @@ const commentsData: EuiCommentListProps['comments'] = [
   },
   {
     username: 'system',
+    timelineIconAriaLabel: 'System',
     timelineIcon: 'dot',
     event: 'pushed a new incident',
     timestamp: '20 hours ago',
     eventColor: 'danger',
   },
   {
     username: 'pancho1',
+    timelineIconAriaLabel: 'Pancho Pérez',
     children: (
       <EuiTextArea
         fullWidth

src-docs/src/views/comment/comment_list.tsx

@@ -57,26 +57,30 @@ const longBody = (
 const comments: EuiCommentProps[] = [
   {
     username: 'janed',
+    timelineIconAriaLabel: 'Jane Doe',
     event: 'added a comment',
     timestamp: 'on Jan 1, 2020',
     children: body,
     actions: copyAction,
   },
   {
     username: 'juanab',
+    timelineIconAriaLabel: 'Juana Barros',
     actions: copyAction,
     event: 'pushed incident X0Z235',
     timestamp: 'on Jan 3, 2020',
   },
   {
     username: 'pancho1',
+    timelineIconAriaLabel: 'Pancho Pérez',
     event: 'edited case',
     timestamp: 'on Jan 9, 2020',
     eventIcon: 'pencil',
     eventIconAriaLabel: 'edit',
   },
   {
     username: 'pedror',
+    timelineIconAriaLabel: 'Pedro Rodriguez',
     actions: copyAction,
     event: complexEvent,
     timestamp: 'on Jan 11, 2020',
@@ -85,7 +89,7 @@ const comments: EuiCommentProps[] = [
   },
   {
     username: 'elohar',
-
+    timelineIconAriaLabel: 'Elohar Jackson',
     event: 'added a comment',
     timestamp: 'on Jan 14, 2020',
     children: longBody,

src-docs/src/views/comment/comment_props.tsx

@@ -55,7 +55,7 @@ export default ({ snippet }: { snippet: ReactNode }) => {
       style={{ maxWidth: '540px' }}
     >
       <EuiCommentList>
-        <EuiComment username="Avatar">
+        <EuiComment username="avatar" timelineIconAriaLabel="Avatar">
           <div
             css={css`
               border-radius: ${euiTheme.border.radius.small};

src-docs/src/views/comment/comment_system.tsx

@@ -12,6 +12,8 @@ import {
   EuiFlexGroup,
   EuiFlexItem,
   EuiButton,
+  EuiToolTip,
+  EuiAvatar,
 } from '../../../../src/components';
 
 const actionButton = (
@@ -38,9 +40,24 @@ const complexEvent = (
   </EuiFlexGroup>
 );
 
+const UserActionUsername = ({
+  username,
+  fullname,
+}: {
+  username: string;
+  fullname: string;
+}) => {
+  return (
+    <EuiToolTip position="top" content={<p>{fullname}</p>}>
+      <strong>{username}</strong>
+    </EuiToolTip>
+  );
+};
+
 const initialComments: EuiCommentProps[] = [
   {
-    username: 'emma',
+    username: <UserActionUsername username="emma" fullname="Emma Watson" />,
+    timelineIcon: <EuiAvatar name="emma" />,
     event: 'added a comment',
     timestamp: 'on 3rd March 2022',
     children: (
@@ -51,7 +68,8 @@ const initialComments: EuiCommentProps[] = [
     actions: actionButton,
   },
   {
-    username: 'emma',
+    username: <UserActionUsername username="emma" fullname="Emma Watson" />,
+    timelineIcon: <EuiAvatar name="emma" />,
     event: complexEvent,
     timestamp: 'on 3rd March 2022',
     eventIcon: 'tag',
@@ -60,12 +78,14 @@ const initialComments: EuiCommentProps[] = [
   {
     username: 'system',
     timelineIcon: 'dot',
+    timelineIconAriaLabel: 'System',
     event: 'pushed a new incident',
     timestamp: 'on 4th March 2022',
     eventColor: 'danger',
   },
   {
-    username: 'tiago',
+    username: <UserActionUsername username="tiago" fullname="Tiago Pontes" />,
+    timelineIcon: <EuiAvatar name="tiago" />,
     event: 'added a comment',
     timestamp: 'on 4th March 2022',
     actions: actionButton,
@@ -77,7 +97,8 @@ const initialComments: EuiCommentProps[] = [
     ),
   },
   {
-    username: 'emma',
+    username: <UserActionUsername username="emma" fullname="Emma Watson" />,
+    timelineIcon: <EuiAvatar name="emma" />,
     event: (
       <>
         marked case as <EuiBadge color="warning">In progress</EuiBadge>
@@ -119,7 +140,10 @@ export default () => {
       setComments([
         ...comments,
         {
-          username: 'emma',
+          username: (
+            <UserActionUsername username="emma" fullname="Emma Watson" />
+          ),
+          timelineIcon: <EuiAvatar name="emma" />,
           event: 'added a comment',
           timestamp: `on ${date}`,
           actions: actionButton,
@@ -143,7 +167,7 @@ export default () => {
     <>
       <EuiCommentList aria-label="Comment system example">
         {commentsList}
-        <EuiComment username="juana">
+        <EuiComment username="juana" timelineIcon={<EuiAvatar name="juana" />}>
           <EuiMarkdownEditor
             aria-label="Markdown editor"
             aria-describedby={errorElementId.current}

src-docs/src/views/copy/copy_to_clipboard.js

@@ -34,8 +34,8 @@ export default () => {
   return (
     <EuiCommentList aria-label="Copy to clipboard example">
       <EuiComment
-        component="div"
         username="Gusteau"
+        timelineIconAriaLabel="Gusteau"
         event="added a comment"
         actions={
           <EuiToolTip

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

@@ -106,9 +106,7 @@ exports[`EuiAvatar props iconType and iconColor as null is rendered 1`] = `
   <span
     class="euiAvatar__icon"
     data-euiicon-type="bolt"
-  >
-    name
-  </span>
+  />
 </div>
 `;
 
@@ -124,9 +122,7 @@ exports[`EuiAvatar props iconType and iconColor is rendered 1`] = `
     class="euiAvatar__icon"
     color="primary"
     data-euiicon-type="bolt"
-  >
-    name
-  </span>
+  />
 </div>
 `;
 
@@ -142,9 +138,7 @@ exports[`EuiAvatar props iconType and iconSize is rendered 1`] = `
     class="euiAvatar__icon"
     color="#000000"
     data-euiicon-type="bolt"
-  >
-    name
-  </span>
+  />
 </div>
 `;
 
@@ -160,9 +154,7 @@ exports[`EuiAvatar props iconType is rendered 1`] = `
     class="euiAvatar__icon"
     color="#000000"
     data-euiicon-type="bolt"
-  >
-    name
-  </span>
+  />
 </div>
 `;
 

src/components/avatar/avatar.tsx

@@ -179,7 +179,6 @@ export const EuiAvatar: FunctionComponent<EuiAvatarProps> = ({
         className="euiAvatar__icon"
         size={iconSize || size}
         type={iconType}
-        aria-label={name}
         color={iconCustomColor === null ? undefined : iconCustomColor}
       />
     );