🎨 Palette: Enable 'Enter to submit' in CommentsPanel

.Jules/palette.md

@@ -0,0 +1,3 @@
+## 2024-05-24 - Faux Forms to Native Forms
+**Learning:** Users naturally expect to submit chat/comment inputs by hitting the "Enter" key. When using a `<div>` wrapper with an `<input>` and an `onClick` `<button>`, this core behavior breaks, leading to poor keyboard UX and accessibility.
+**Action:** Always wrap text inputs and submit buttons in a native `<form onSubmit={...}>` rather than using standalone inputs with button click handlers. This natively restores 'Enter to submit' behavior without brittle `onKeyDown` listeners, and correctly connects the inputs semantics.

src/components/CommentsPanel.tsx

@@ -52,21 +52,28 @@ export default function CommentsPanel({ entityType, entityId }: Props) {
           <div className="text-xs text-slate-500 text-center py-4">No comments yet.</div>
         )}
       </div>
-      <div className="mt-3 flex gap-2">
+      <form
+        className="mt-3 flex gap-2"
+        onSubmit={(e) => {
+          e.preventDefault()
+          post()
+        }}
+      >
         <input
           value={text}
           onChange={(e) => setText(e.target.value)}
           placeholder="Write a comment..."
+          aria-label="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}
+          type="submit"
           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"
         >
           Post
         </button>
-      </div>
+      </form>
     </div>
   )
 }