From 3aec3f17fe71bfab5da9e874e115b560d5e42446 Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Mon, 22 Jun 2026 22:26:10 +0000
Subject: [PATCH 1/2] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20Add=20keyboard=20?=
 =?UTF-8?q?support=20and=20loading=20state=20to=20CommentsPanel?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: aarjava <218419324+aarjava@users.noreply.github.com>
---
 .Jules/palette.md                |  3 +++
 src/components/CommentsPanel.tsx | 13 ++++++++++---
 2 files changed, 13 insertions(+), 3 deletions(-)
 create mode 100644 .Jules/palette.md

diff --git a/.Jules/palette.md b/.Jules/palette.md
new file mode 100644
index 00000000..52b4851e
--- /dev/null
+++ b/.Jules/palette.md
@@ -0,0 +1,3 @@
+## 2024-06-22 - [CommentsPanel Keyboard A11y]
+**Learning:** Simple chat/comment inputs that lack a surrounding `<form>` tag require an explicit `onKeyDown` handler to capture the "Enter" key for submission, otherwise users are forced to use the mouse.
+**Action:** When auditing or implementing simple inline inputs (like search, comment, or quick-reply bars), proactively check for form wrappers or `onKeyDown` handlers to ensure keyboard accessibility.
diff --git a/src/components/CommentsPanel.tsx b/src/components/CommentsPanel.tsx
index 2a595884..81993e34 100644
--- a/src/components/CommentsPanel.tsx
+++ b/src/components/CommentsPanel.tsx
@@ -1,6 +1,7 @@
 'use client'
 
-import { useEffect, useState } from 'react'
+import { useEffect, useState, KeyboardEvent } from 'react'
+import { Loader2 } from 'lucide-react'
 import type { CommentRecord } from '@/lib/db/types'
 
 type Props = { entityType: 'event' | 'insight'; entityId: string }
@@ -56,15 +57,21 @@ export default function CommentsPanel({ entityType, entityId }: Props) {
         <input
           value={text}
           onChange={(e) => setText(e.target.value)}
+          onKeyDown={(e: KeyboardEvent<HTMLInputElement>) => {
+            if (e.key === 'Enter' && !loading && text.trim()) {
+              post()
+            }
+          }}
           placeholder="Write a comment..."
           className="flex-1 rounded-md border border-white/10 bg-white/5 px-3 py-2 text-xs text-slate-100 placeholder:text-slate-500 focus:outline-none focus:ring-2 focus:ring-sky-400/40"
         />
         <button
           onClick={post}
           disabled={loading || !text.trim()}
-          className="rounded-md bg-[#6C63FF] px-3 py-2 text-xs font-semibold text-white disabled:opacity-50 hover:bg-[#5A52E6] transition-colors duration-150"
+          aria-busy={loading}
+          className="rounded-md bg-[#6C63FF] px-3 py-2 text-xs font-semibold text-white disabled:opacity-50 hover:bg-[#5A52E6] transition-colors duration-150 min-w-[56px] flex items-center justify-center"
         >
-          Post
+          {loading ? <Loader2 className="size-4 animate-spin" aria-hidden="true" /> : 'Post'}
         </button>
       </div>
     </div>

From db82822511bbc4ed91f14f5f91352089f252f5b2 Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Mon, 22 Jun 2026 22:35:40 +0000
Subject: [PATCH 2/2] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20Add=20keyboard=20?=
 =?UTF-8?q?support=20and=20loading=20state=20to=20CommentsPanel?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: aarjava <218419324+aarjava@users.noreply.github.com>