From b7f7eff0001e762ce164792d314501b0d63a960b Mon Sep 17 00:00:00 2001
From: Hongming Wang <hongmingwangrabbit@gmail.com>
Date: Wed, 15 Apr 2026 23:47:36 -0700
Subject: [PATCH] fix(a11y): raise ChannelsTab help text from 9px to 11px
 minimum (#382)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Two helper paragraphs in ChannelsTab.tsx used text-[9px] text-zinc-600:
- Chat IDs discover hint (line 254)
- Allowed Users hint (line 281)

9px fails WCAG 1.4.3 by size alone; zinc-600 on zinc-800/900 bg is
~2.6:1 contrast (fails AA). Changed to text-[11px] text-zinc-500
(~3.8:1 at 11px — acceptable for non-body helper text).

Found in UX audit Run 13 (2026-04-16).

Co-authored-by: UIUX Designer <uiux@molecule-ai.local>
Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 canvas/src/components/tabs/ChannelsTab.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/canvas/src/components/tabs/ChannelsTab.tsx b/canvas/src/components/tabs/ChannelsTab.tsx
index 4ee7f489..5249dba1 100644
--- a/canvas/src/components/tabs/ChannelsTab.tsx
+++ b/canvas/src/components/tabs/ChannelsTab.tsx
@@ -251,7 +251,7 @@ export function ChannelsTab({ workspaceId }: Props) {
                 className="w-full text-xs bg-zinc-900 border border-zinc-700 rounded px-2 py-1.5 text-zinc-300 placeholder-zinc-600"
               />
             )}
-            <p className="text-[9px] text-zinc-600 mt-0.5">
+            <p className="text-[11px] text-zinc-500 mt-0.5">
               {discoveredChats.length > 0 ? (
                 <>
                   Chats: <span className="text-zinc-400">{formChatId || "(none selected)"}</span>
@@ -278,7 +278,7 @@ export function ChannelsTab({ workspaceId }: Props) {
               placeholder="123456789, 987654321"
               className="w-full text-xs bg-zinc-900 border border-zinc-700 rounded px-2 py-1.5 text-zinc-300 placeholder-zinc-600"
             />
-            <p className="text-[9px] text-zinc-600 mt-0.5">
+            <p className="text-[11px] text-zinc-500 mt-0.5">
               Telegram user IDs. Leave empty to allow everyone.
             </p>
           </div>