Merge pull request #16777 from itk-dev/feature/make-chat-messages-an-unordered-list

FEAT: Make chat message an unordered list

src/lib/components/chat/Messages.svelte

@@ -421,35 +421,36 @@
 							</div>
 						</Loader>
 					{/if}
-
-					{#each messages as message, messageIdx (message.id)}
-						<Message
-							{chatId}
-							bind:history
-							{selectedModels}
-							messageId={message.id}
-							idx={messageIdx}
-							{user}
-							{setInputText}
-							{gotoMessage}
-							{showPreviousMessage}
-							{showNextMessage}
-							{updateChat}
-							{editMessage}
-							{deleteMessage}
-							{rateMessage}
-							{actionMessage}
-							{saveMessage}
-							{submitMessage}
-							{regenerateResponse}
-							{continueResponse}
-							{mergeResponses}
-							{addMessages}
-							{triggerScroll}
-							{readOnly}
-							{topPadding}
-						/>
-					{/each}
+					<ul role="log" aria-live="polite" aria-relevant="additions" aria-atomic="false">
+						{#each messages as message, messageIdx (message.id)}
+							<Message
+								{chatId}
+								bind:history
+								{selectedModels}
+								messageId={message.id}
+								idx={messageIdx}
+								{user}
+								{setInputText}
+								{gotoMessage}
+								{showPreviousMessage}
+								{showNextMessage}
+								{updateChat}
+								{editMessage}
+								{deleteMessage}
+								{rateMessage}
+								{actionMessage}
+								{saveMessage}
+								{submitMessage}
+								{regenerateResponse}
+								{continueResponse}
+								{mergeResponses}
+								{addMessages}
+								{triggerScroll}
+								{readOnly}
+								{topPadding}
+							/>
+						{/each}
+					</ul>
 				</section>
 				<div class="pb-12" />
 				{#if bottomPadding}

src/lib/components/chat/Messages/Message.svelte

@@ -44,7 +44,7 @@
 	export let topPadding = false;
 </script>
 
-<div
+<li
 	class="flex flex-col justify-between px-5 mb-3 w-full {($settings?.widescreenMode ?? null)
 		? 'max-w-full'
 		: 'max-w-5xl'} mx-auto rounded-lg group"
@@ -120,4 +120,4 @@
 			/>
 		{/if}
 	{/if}
-</div>
+</li>