small a11y change

elastic · Apr 7, 2020 · 51f1dfb · 51f1dfb
1 parent c96b3cc
commit 51f1dfb
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 36 deletions.
diff --git 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,14 +267,14 @@ exports[`EuiComment renders a body 1`] = `
           class="euiCommentEvent__headerEvent"
         />
       </div>
-    </div>
+    </figcaption>
     <div
       class="euiCommentEvent__body"
     >
       <p>
         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
@@ -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
@@ -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>
   );
 };