From 8c3d8f415bdcc60abd17a8beea56119071b7b7ca Mon Sep 17 00:00:00 2001
From: tiennm99 <tiennm99@outlook.com>
Date: Mon, 21 Sep 2026 15:36:15 +0700
Subject: [PATCH] fix(web): give the board's chat pill its own accessible name
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The panel's fold toggle and the header pill both read "Trò chuyện", so
a role query, or a screen reader, found two controls with one name.
---
 web/src/lib/components/GameBoard.svelte | 6 ++++++
 web/src/lib/i18n/vi.js                  | 3 +++
 2 files changed, 9 insertions(+)

diff --git a/web/src/lib/components/GameBoard.svelte b/web/src/lib/components/GameBoard.svelte
index 14dae21..60c5b5e 100644
--- a/web/src/lib/components/GameBoard.svelte
+++ b/web/src/lib/components/GameBoard.svelte
@@ -138,10 +138,16 @@
 				     about. Scrolling the panel into view rather than opening it in
 				     place, since a folded panel scrolled here still shows its own
 				     badge and its own way to unfold. -->
+				<!-- Its own accessible name: the panel below has a toggle that
+				     reads "Trò chuyện" too, and two controls announced alike are
+				     one control a screen reader cannot tell apart. -->
 				<button
 					type="button"
 					class="chat-pill"
 					onclick={onchatopen}
+					aria-label={chatUnread > 0
+						? `${t.chatOpen}, ${fill(t.chatUnread, { n: chatUnread })}`
+						: t.chatOpen}
 					data-testid="chat-pill"
 				>
 					{t.chatTitle}
diff --git a/web/src/lib/i18n/vi.js b/web/src/lib/i18n/vi.js
index 6b773aa..470c150 100644
--- a/web/src/lib/i18n/vi.js
+++ b/web/src/lib/i18n/vi.js
@@ -122,6 +122,9 @@ export const t = {
 	shareInvite: 'Vào chơi nối từ với tôi',
 
 	chatTitle: 'Trò chuyện',
+	// The board header's shortcut to the panel; distinct from the panel's own
+	// toggle so the two are never announced as the same control.
+	chatOpen: 'Mở trò chuyện',
 	chatPlaceholder: 'Nhắn tin…',
 	chatEmpty: 'Chưa có tin nhắn nào.',
 	chatUnread: '{n} tin mới',