From c8b13b7fe26fdf6c476c3e10b717cc498309d2a1 Mon Sep 17 00:00:00 2001
From: Daniel Han <danielhanchen@gmail.com>
Date: Thu, 7 May 2026 06:01:11 +0000
Subject: [PATCH] CI(ui-extra): use Enter to submit Compare composer + add
 aria-label

Compare-mode composer (shared-composer.tsx) wraps the send button in
TooltipIconButton without setting aria-label="Send message", so the
playwright_extra_ui Compare step's button[aria-label="Send message"]
selector matched 0 elements and timed out at 30s.

Two changes:

  1. Test: switch from clicking the send button to pressing Enter on
     the textarea. The composer's onKeyDown handler maps plain Enter
     to send(), which is also the natural user flow.

  2. Frontend: add aria-label="Send message" to the compare composer's
     send button. Single-thread composer (thread.tsx) already sets
     this; mirror it for accessibility consistency and to keep the
     selector working as a fallback in older builds.
---
 studio/frontend/src/features/chat/shared-composer.tsx |  1 +
 tests/studio/playwright_extra_ui.py                   | 10 ++++++++--
 2 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/studio/frontend/src/features/chat/shared-composer.tsx b/studio/frontend/src/features/chat/shared-composer.tsx
index 1741b7e409..078960b053 100644
--- a/studio/frontend/src/features/chat/shared-composer.tsx
+++ b/studio/frontend/src/features/chat/shared-composer.tsx
@@ -762,6 +762,7 @@ export function SharedComposer({
               className="size-8 rounded-full"
               onClick={send}
               disabled={!canSend}
+              aria-label="Send message"
             >
               <ArrowUpIcon className="size-4" />
             </TooltipIconButton>
diff --git a/tests/studio/playwright_extra_ui.py b/tests/studio/playwright_extra_ui.py
index 2d3449a2d9..094ecc4430 100644
--- a/tests/studio/playwright_extra_ui.py
+++ b/tests/studio/playwright_extra_ui.py
@@ -209,7 +209,13 @@ with sync_playwright() as p:
             else:
                 cmp_composer.click()
                 cmp_composer.fill("Reply with: A")
-                page.locator('button[aria-label="Send message"]').first.click()
+                # Prefer Enter on the textarea: the shared composer's
+                # onKeyDown handler maps plain Enter to send(). The
+                # send button is rendered via TooltipIconButton +
+                # ComposerPrimitive.Send and its aria-label was
+                # added late, so older builds match nothing for
+                # button[aria-label="Send message"] in compare mode.
+                cmp_composer.press("Enter")
                 # Wait for at least 2 NEW assistant bubbles (one per pane).
                 try:
                     page.wait_for_function(
@@ -228,7 +234,7 @@ with sync_playwright() as p:
 
                 # Send a second prompt -> 4 total new bubbles.
                 cmp_composer.fill("Reply with: B")
-                page.locator('button[aria-label="Send message"]').first.click()
+                cmp_composer.press("Enter")
                 try:
                     page.wait_for_function(
                         """(want) => {