From da68c3838e12a93450faa7aec6be37790aa2a5fe Mon Sep 17 00:00:00 2001
From: Rebecca Alpert <ralpert@redhat.com>
Date: Mon, 14 Oct 2024 17:07:42 -0400
Subject: [PATCH] fix(Message): Make each Message a section

This makes it a little easier to navigate with screenreaders.
---
 packages/module/src/Message/Message.tsx | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/packages/module/src/Message/Message.tsx b/packages/module/src/Message/Message.tsx
index 21718dfd..6079a8d3 100644
--- a/packages/module/src/Message/Message.tsx
+++ b/packages/module/src/Message/Message.tsx
@@ -81,8 +81,16 @@ export const Message: React.FunctionComponent<MessageProps> = ({
     onAttachmentClose && attachmentId && onAttachmentClose(attachmentId);
   };
 
+  // Keep timestamps consistent between Timestamp component and aria-label
+  const date = new Date();
+  const dateString = timestamp ?? `${date.toLocaleDateString()} ${date.toLocaleTimeString()}`;
+
   return (
-    <div className={`pf-chatbot__message pf-chatbot__message--${role}`} {...props}>
+    <section
+      aria-label={`Message from ${role} - ${dateString}`}
+      className={`pf-chatbot__message pf-chatbot__message--${role}`}
+      {...props}
+    >
       {/* We are using an empty alt tag intentionally in order to reduce noise on screen readers */}
       <Avatar src={avatar ?? DEFAULTS[role].avatar} alt="" />
       <div className="pf-chatbot__message-contents">
@@ -93,7 +101,7 @@ export const Message: React.FunctionComponent<MessageProps> = ({
               AI
             </Label>
           )}
-          <Timestamp>{timestamp}</Timestamp>
+          <Timestamp date={date}>{timestamp}</Timestamp>
         </div>
         <div className="pf-chatbot__message-response">
           <div className="pf-chatbot__message-and-actions">
@@ -114,7 +122,7 @@ export const Message: React.FunctionComponent<MessageProps> = ({
           )}
         </div>
       </div>
-    </div>
+    </section>
   );
 };