From 1f0aa5f60299339761d074d17c297bfbf4c7ab40 Mon Sep 17 00:00:00 2001
From: AndersonDesign1 <josanderson25@gmail.com>
Date: Mon, 22 Jun 2026 16:31:32 +0100
Subject: [PATCH] fix(a11y): add accessible labels to unlabeled form controls

React Doctor's accessibility pass flagged form controls whose only
"label" was a placeholder (not an accessible name) or a hidden file input
with no name. Add aria-label to the five genuine cases:

- project collaboration composer textarea
- portal project message composer textarea
- clients search input
- project files + portal files hidden upload inputs

Skipped two false positives: the client-access dialog button already gets
its name from projected text, and the onboarding slug input already has an
associated <FieldLabel htmlFor>.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 src/components/projects/project-collaboration-panel.tsx | 1 +
 src/components/projects/project-files-panel.tsx         | 1 +
 src/routes/clients/index.tsx                            | 1 +
 src/routes/portal/files.tsx                             | 1 +
 src/routes/portal/projects/$id.tsx                      | 1 +
 5 files changed, 5 insertions(+)

diff --git a/src/components/projects/project-collaboration-panel.tsx b/src/components/projects/project-collaboration-panel.tsx
index 0b5fa38..1be086c 100644
--- a/src/components/projects/project-collaboration-panel.tsx
+++ b/src/components/projects/project-collaboration-panel.tsx
@@ -160,6 +160,7 @@ export function ProjectCommentForm({
   return (
     <form className="flex flex-col gap-4" onSubmit={onSubmit}>
       <textarea
+        aria-label="Post an update, ask a question, or leave feedback"
         className="min-h-[110px] w-full rounded-lg border border-border/80 bg-background px-3 py-2 text-sm outline-none transition-all placeholder:text-muted-foreground/50 focus:border-primary/60 focus:ring-2 focus:ring-primary/10"
         onChange={(event) => onContentChange(event.target.value)}
         placeholder="Post an update, ask a question, or leave feedback..."
diff --git a/src/components/projects/project-files-panel.tsx b/src/components/projects/project-files-panel.tsx
index 61fbdff..b48b73e 100644
--- a/src/components/projects/project-files-panel.tsx
+++ b/src/components/projects/project-files-panel.tsx
@@ -217,6 +217,7 @@ export function ProjectFilesPanel({
     >
       <input
         accept={fileInputAccept}
+        aria-label="Upload project files"
         className="hidden"
         multiple
         onChange={(event) => {
diff --git a/src/routes/clients/index.tsx b/src/routes/clients/index.tsx
index 930c260..437e2ba 100644
--- a/src/routes/clients/index.tsx
+++ b/src/routes/clients/index.tsx
@@ -90,6 +90,7 @@ function ClientsPage() {
         actions={
           <div className="flex items-center gap-3">
             <input
+              aria-label="Search clients or projects"
               className="h-9 min-w-64 rounded-md border border-border bg-card px-3 text-sm outline-none transition-all focus-visible:border-primary focus-visible:ring-2 focus-visible:ring-primary/20"
               onChange={(event) => setQuery(event.target.value)}
               placeholder="Search clients or projects..."
diff --git a/src/routes/portal/files.tsx b/src/routes/portal/files.tsx
index b8ff210..73767f7 100644
--- a/src/routes/portal/files.tsx
+++ b/src/routes/portal/files.tsx
@@ -219,6 +219,7 @@ function PortalFilesPage() {
             </select>
             <input
               accept="image/*,.pdf,.txt,.csv"
+              aria-label="Upload files"
               className="hidden"
               multiple
               onChange={(e) =>
diff --git a/src/routes/portal/projects/$id.tsx b/src/routes/portal/projects/$id.tsx
index e09e71d..0ef1f80 100644
--- a/src/routes/portal/projects/$id.tsx
+++ b/src/routes/portal/projects/$id.tsx
@@ -410,6 +410,7 @@ function UnifiedActivityPanel({ projectId }: { projectId: string }) {
       {/* Message Composer */}
       <form className="space-y-3" onSubmit={handleSubmit}>
         <textarea
+          aria-label="Send a message or ask a question"
           className="min-h-[96px] w-full rounded-lg border border-border/80 bg-background px-3 py-2 text-xs outline-none transition-all placeholder:text-muted-foreground/50 focus:border-primary/60 focus:ring-2 focus:ring-primary/10"
           onChange={(event) => setContent(event.target.value)}
           placeholder="Send a message or ask a question..."