chore: refactor markup

concord-consortium · Nov 18, 2024 · c0c50c4 · c0c50c4
1 parent 5116530
commit c0c50c4
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 27 deletions.
diff --git a/src/components/chat-transcript.scss b/src/components/chat-transcript.scss
@@ -1,5 +1,9 @@
 @use "vars" as *;
 
+.App .chat-transcript {
+  margin: 0;
+}
+
 .chat-transcript {
   background: white;
   color: $dark-gray;

diff --git a/src/components/chat-transcript.tsx b/src/components/chat-transcript.tsx
@@ -19,32 +19,41 @@ export const ChatTranscriptComponent = ({chatTranscript}: IProps) => {
   });
 
   return (
-    <ul
-      aria-label="DAVAI Chat Transcript"
-      className="chat-transcript"
-      data-testid="chat-transcript"
-      role="main"
-    >
-      {chatTranscript.messages.map((message: ChatMessage) => {
-        return (
-          <li
-            aria-label={`${message.speaker} at ${message.timestamp}`}
-            // For now we are using "assertive" and only applying aria-live to AI messages. This
-            // may change as we refine the experience.
-            aria-live={message.speaker === "DAVAI" ? "assertive" : undefined}
-            className="chat-transcript__message"
-            data-testid="chat-message"
-            key={message.timestamp}
-          >
-            <h2 aria-label="speaker" data-testid="chat-message-speaker">
-              {message.speaker}
-            </h2>
-            <p aria-label="message" data-testid="chat-message-content">
-              {message.content}
-            </p>
-          </li>
-        );
-      })}
-    </ul>
+    <div className="chat-transcript-container" role="main">
+      <p id="chat-transcript-description" className="visually-hidden">
+        This is a transcript of a chat with DAVAI.
+      </p>
+      <div
+        aria-label="DAVAI Chat Transcript"
+        aria-describedby="chat-transcript-description"
+        className="chat-transcript"
+        contentEditable="true"
+        data-testid="chat-transcript"
+        // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
+        tabIndex={0}
+        onBeforeInput={(e) => e.preventDefault()}
+      >
+        {chatTranscript.messages.map((message: ChatMessage) => {
+          return (
+            <div
+              aria-label={`${message.speaker} at ${message.timestamp}`}
+              // For now we are using "assertive" and only applying aria-live to AI messages. This
+              // may change as we refine the experience.
+              aria-live={message.speaker === "DAVAI" ? "assertive" : undefined}
+              className="chat-transcript__message"
+              data-testid="chat-message"
+              key={message.timestamp}
+            >
+              <h2 aria-label="speaker" data-testid="chat-message-speaker">
+                {message.speaker}
+              </h2>
+              <p aria-label="message" data-testid="chat-message-content">
+                {message.content}
+              </p>
+            </div>
+          );
+        })}
+      </div>
+    </div>
   );
 };