From 51f1dfb4736062230eed1cab17ddfda7e39335ad Mon Sep 17 00:00:00 2001
From: Andrea Del Rio <delrio.andre@gmail.com>
Date: Tue, 7 Apr 2020 16:42:36 -0700
Subject: [PATCH] small a11y change

---
 .../__snapshots__/comment.test.tsx.snap       | 40 +++++++++----------
 .../__snapshots__/comment_event.test.tsx.snap | 24 +++++------
 src/components/comment/comment_event.tsx      | 16 ++++++--
 3 files changed, 44 insertions(+), 36 deletions(-)

diff --git a/src/components/comment/__snapshots__/comment.test.tsx.snap b/src/components/comment/__snapshots__/comment.test.tsx.snap
index 52ab2e550b47..a2293959a2cf 100644
--- a/src/components/comment/__snapshots__/comment.test.tsx.snap
+++ b/src/components/comment/__snapshots__/comment.test.tsx.snap
@@ -21,10 +21,10 @@ exports[`EuiComment is rendered 1`] = `
       </div>
     </div>
   </div>
-  <div
+  <figure
     class="euiCommentEvent euiCommentEvent--regular"
   >
-    <div
+    <figcaption
       class="euiCommentEvent__header"
     >
       <div
@@ -39,8 +39,8 @@ exports[`EuiComment is rendered 1`] = `
           class="euiCommentEvent__headerEvent"
         />
       </div>
-    </div>
-  </div>
+    </figcaption>
+  </figure>
 </div>
 `;
 
@@ -63,10 +63,10 @@ exports[`EuiComment props event is rendered 1`] = `
       </div>
     </div>
   </div>
-  <div
+  <figure
     class="euiCommentEvent euiCommentEvent--regular"
   >
-    <div
+    <figcaption
       class="euiCommentEvent__header"
     >
       <div
@@ -83,8 +83,8 @@ exports[`EuiComment props event is rendered 1`] = `
           commented
         </div>
       </div>
-    </div>
-  </div>
+    </figcaption>
+  </figure>
 </div>
 `;
 
@@ -116,10 +116,10 @@ exports[`EuiComment props timelineIcon is rendered 1`] = `
       </div>
     </div>
   </div>
-  <div
+  <figure
     class="euiCommentEvent euiCommentEvent--regular"
   >
-    <div
+    <figcaption
       class="euiCommentEvent__header"
     >
       <div
@@ -134,8 +134,8 @@ exports[`EuiComment props timelineIcon is rendered 1`] = `
           class="euiCommentEvent__headerEvent"
         />
       </div>
-    </div>
-  </div>
+    </figcaption>
+  </figure>
 </div>
 `;
 
@@ -158,10 +158,10 @@ exports[`EuiComment props timestamp is rendered 1`] = `
       </div>
     </div>
   </div>
-  <div
+  <figure
     class="euiCommentEvent euiCommentEvent--regular"
   >
-    <div
+    <figcaption
       class="euiCommentEvent__header"
     >
       <div
@@ -183,8 +183,8 @@ exports[`EuiComment props timestamp is rendered 1`] = `
           </time>
         </div>
       </div>
-    </div>
-  </div>
+    </figcaption>
+  </figure>
 </div>
 `;
 
@@ -249,10 +249,10 @@ exports[`EuiComment renders a body 1`] = `
       </div>
     </div>
   </div>
-  <div
+  <figure
     class="euiCommentEvent euiCommentEvent--regular"
   >
-    <div
+    <figcaption
       class="euiCommentEvent__header"
     >
       <div
@@ -267,7 +267,7 @@ exports[`EuiComment renders a body 1`] = `
           class="euiCommentEvent__headerEvent"
         />
       </div>
-    </div>
+    </figcaption>
     <div
       class="euiCommentEvent__body"
     >
@@ -275,6 +275,6 @@ exports[`EuiComment renders a body 1`] = `
         This is the body.
       </p>
     </div>
-  </div>
+  </figure>
 </div>
 `;
diff --git a/src/components/comment/__snapshots__/comment_event.test.tsx.snap b/src/components/comment/__snapshots__/comment_event.test.tsx.snap
index d614313b717f..2a8600d30776 100644
--- a/src/components/comment/__snapshots__/comment_event.test.tsx.snap
+++ b/src/components/comment/__snapshots__/comment_event.test.tsx.snap
@@ -1,12 +1,12 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`EuiCommentEvent is rendered 1`] = `
-<div
+<figure
   aria-label="aria-label"
   class="euiCommentEvent euiCommentEvent--regular testClass1 testClass2"
   data-test-subj="test subject string"
 >
-  <div
+  <figcaption
     class="euiCommentEvent__header"
   >
     <div
@@ -21,15 +21,15 @@ exports[`EuiCommentEvent is rendered 1`] = `
         class="euiCommentEvent__headerEvent"
       />
     </div>
-  </div>
-</div>
+  </figcaption>
+</figure>
 `;
 
 exports[`EuiCommentEvent props event is rendered 1`] = `
-<div
+<figure
   class="euiCommentEvent euiCommentEvent--regular"
 >
-  <div
+  <figcaption
     class="euiCommentEvent__header"
   >
     <div
@@ -46,15 +46,15 @@ exports[`EuiCommentEvent props event is rendered 1`] = `
         commented
       </div>
     </div>
-  </div>
-</div>
+  </figcaption>
+</figure>
 `;
 
 exports[`EuiCommentEvent props timestamp is rendered 1`] = `
-<div
+<figure
   class="euiCommentEvent euiCommentEvent--regular"
 >
-  <div
+  <figcaption
     class="euiCommentEvent__header"
   >
     <div
@@ -76,8 +76,8 @@ exports[`EuiCommentEvent props timestamp is rendered 1`] = `
         </time>
       </div>
     </div>
-  </div>
-</div>
+  </figcaption>
+</figure>
 `;
 
 exports[`EuiCommentEvent props type is rendered 1`] = `
diff --git a/src/components/comment/comment_event.tsx b/src/components/comment/comment_event.tsx
index 4005b66f980f..1cff87e2bc0f 100644
--- a/src/components/comment/comment_event.tsx
+++ b/src/components/comment/comment_event.tsx
@@ -50,9 +50,17 @@ export const EuiCommentEvent: FunctionComponent<EuiCommentEventProps> = ({
     className
   );
 
+  const Element =
+    type === 'regular' || (type === 'update' && children) ? 'figure' : 'div';
+
+  const HeaderElement =
+    type === 'regular' || (type === 'update' && children)
+      ? 'figcaption'
+      : 'div';
+
   return (
-    <div className={classes} {...rest}>
-      <div className="euiCommentEvent__header">
+    <Element className={classes} {...rest}>
+      <HeaderElement className="euiCommentEvent__header">
         <div className="euiCommentEvent__headerData">
           <div className="euiCommentEvent__headerUsername">{username}</div>
           <div className="euiCommentEvent__headerEvent">{event}</div>
@@ -69,12 +77,12 @@ export const EuiCommentEvent: FunctionComponent<EuiCommentEventProps> = ({
         ) : (
           undefined
         )}
-      </div>
+      </HeaderElement>
       {children ? (
         <div className="euiCommentEvent__body">{children}</div>
       ) : (
         undefined
       )}
-    </div>
+    </Element>
   );
 };