From 98c2b123401d2e7a0f8cab4fb6fea83359024953 Mon Sep 17 00:00:00 2001
From: Sean <sean@goforward.group>
Date: Mon, 30 Mar 2026 19:27:21 -0400
Subject: [PATCH] fix: add aria-labelledby to modal, htmlFor/id to form labels,
 autoFocus on open

---
 components/FeedbackForm.tsx  | 10 +++++++---
 components/FeedbackModal.tsx |  3 ++-
 2 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/components/FeedbackForm.tsx b/components/FeedbackForm.tsx
index 0e21862..07b4e14 100644
--- a/components/FeedbackForm.tsx
+++ b/components/FeedbackForm.tsx
@@ -56,13 +56,15 @@ export function FeedbackForm({ onSuccess }: { onSuccess?: () => void }) {
     <form onSubmit={handleSubmit} className="space-y-5">
       <div className="grid grid-cols-1 gap-5 sm:grid-cols-2">
         <div>
-          <label className="mb-2 block text-[11px] font-semibold uppercase tracking-wider text-zinc-500">
+          <label htmlFor="feedback-category" className="mb-2 block text-[11px] font-semibold uppercase tracking-wider text-zinc-500">
             Category
           </label>
           <select
+            id="feedback-category"
             value={category}
             onChange={(e) => setCategory(e.target.value)}
             disabled={status === 'loading'}
+            autoFocus
             className="w-full appearance-none rounded-lg border border-zinc-800 bg-zinc-950 px-3 py-2.5 text-sm text-zinc-200 focus:border-amber-500/40 focus:outline-none disabled:opacity-50"
           >
             {CATEGORIES.map((c) => (
@@ -73,13 +75,14 @@ export function FeedbackForm({ onSuccess }: { onSuccess?: () => void }) {
           </select>
         </div>
         <div>
-          <label className="mb-2 block text-[11px] font-semibold uppercase tracking-wider text-zinc-500">
+          <label htmlFor="feedback-email" className="mb-2 block text-[11px] font-semibold uppercase tracking-wider text-zinc-500">
             Email{' '}
             <span className="font-normal normal-case tracking-normal text-zinc-600">
               (optional — if you want a reply)
             </span>
           </label>
           <input
+            id="feedback-email"
             type="email"
             value={email}
             onChange={(e) => setEmail(e.target.value)}
@@ -91,10 +94,11 @@ export function FeedbackForm({ onSuccess }: { onSuccess?: () => void }) {
       </div>
 
       <div>
-        <label className="mb-2 block text-[11px] font-semibold uppercase tracking-wider text-zinc-500">
+        <label htmlFor="feedback-message" className="mb-2 block text-[11px] font-semibold uppercase tracking-wider text-zinc-500">
           Message
         </label>
         <textarea
+          id="feedback-message"
           value={message}
           onChange={(e) => setMessage(e.target.value.slice(0, 1000))}
           placeholder="What's on your mind?"
diff --git a/components/FeedbackModal.tsx b/components/FeedbackModal.tsx
index f55d5eb..ac0daaf 100644
--- a/components/FeedbackModal.tsx
+++ b/components/FeedbackModal.tsx
@@ -27,6 +27,7 @@ export function FeedbackModal({
       className="fixed inset-0 z-50 flex items-center justify-center p-4"
       role="dialog"
       aria-modal="true"
+      aria-labelledby="feedback-modal-title"
     >
       <div
         className="absolute inset-0 bg-black/70 backdrop-blur-sm"
@@ -35,7 +36,7 @@ export function FeedbackModal({
       />
       <div className="relative z-10 w-full max-w-lg rounded-2xl border border-zinc-800 bg-zinc-950 p-7 shadow-2xl">
         <div className="mb-5 flex items-center justify-between">
-          <h2 className="text-base font-bold text-white">Send Feedback</h2>
+          <h2 id="feedback-modal-title" className="text-base font-bold text-white">Send Feedback</h2>
           <button
             onClick={onClose}
             className="text-zinc-500 hover:text-zinc-300"