molecule-ai/molecule-core
35
0
Fork 2
Code Issues 16 Pull Requests 2 Actions 49 Packages Projects Releases Wiki Activity

fix(a11y): raise ChannelsTab help text from 9px to 11px minimum (#382)

Browse Source 
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>
This commit is contained in:
Hongming Wang 2026-04-15 23:47:36 -07:00 committed by GitHub
parent e778d477ba
commit b7f7eff000
1 changed files with 2 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
canvas/src/components/tabs/ChannelsTab.tsx
View File

@ -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>