From 5fef584d7dcbaa21e9dbeb13adaef1d003ab67b8 Mon Sep 17 00:00:00 2001
From: Satyam <95536056+Satyam-Rastogi@users.noreply.github.com>
Date: Sun, 22 Feb 2026 03:15:21 +0530
Subject: [PATCH] feat(a11y): Implement ARIA accessibility sweep and keyboard
 navigation

- Added visually hidden labels, IDs, and names to form inputs across all key components and pages (modals, directories, chatbots)
- Added tabIndex and onKeyDown handlers to clickable table rows in OwnerProjectDetail for keyboard accessibility
- Validated existing ARIA roles and Escape key bindings on modal components
---
 src/components/Chatbot.jsx                    |  6 +++
 .../contractor/FinancialSummaryModal.jsx      |  9 +++--
 .../dashboard/AgentSelectionModal.jsx         |  3 ++
 src/components/maps/PropertyDetailDrawer.jsx  | 24 +++++++----
 src/components/owner/CreateItemModal.jsx      | 10 ++++-
 .../owner/FinancialDetailsModal.jsx           |  3 ++
 .../vendor/VendorFinancialSummaryModal.jsx    | 13 +++---
 src/pages/AdminSchedule.jsx                   |  9 +++++
 src/pages/CustomerProfile.jsx                 | 40 ++++++++++---------
 src/pages/Login.jsx                           |  8 +++-
 src/pages/owner/OwnerProjectDetail.jsx        |  4 +-
 src/pages/owner/OwnerProjectList.jsx          | 40 +++++++++++--------
 src/pages/owner/PeopleDirectory.jsx           |  3 ++
 src/pages/owner/VendorDirectory.jsx           |  3 ++
 src/pages/vendor/VendorOrders.jsx             |  3 ++
 15 files changed, 123 insertions(+), 55 deletions(-)

diff --git a/src/components/Chatbot.jsx b/src/components/Chatbot.jsx
index f36ba3f..654a5fb 100644
--- a/src/components/Chatbot.jsx
+++ b/src/components/Chatbot.jsx
@@ -716,7 +716,10 @@ const Chatbot = (props) => {
                 {/* Input */}
                 <div className="p-4 bg-white dark:bg-zinc-900 border-t border-gray-100 dark:border-zinc-800">
                     <div className="flex items-center space-x-2 bg-slate-100 dark:bg-zinc-800 rounded-full px-4 py-3">
+                        <label htmlFor="chat-input-inline" className="sr-only">Message</label>
                         <input
+                            id="chat-input-inline"
+                            name="chat-input"
                             type="text"
                             value={input}
                             onChange={(e) => setInput(e.target.value)}
@@ -817,7 +820,10 @@ const Chatbot = (props) => {
                     {/* Input */}
                     <div className="p-3 bg-white dark:bg-zinc-900 border-t border-gray-100 dark:border-zinc-800">
                         <div className="flex items-center space-x-2 bg-slate-100 dark:bg-zinc-800 rounded-full px-4 py-2">
+                            <label htmlFor="chat-input-widget" className="sr-only">Message</label>
                             <input
+                                id="chat-input-widget"
+                                name="chat-input"
                                 type="text"
                                 value={input}
                                 onChange={(e) => setInput(e.target.value)}
diff --git a/src/components/contractor/FinancialSummaryModal.jsx b/src/components/contractor/FinancialSummaryModal.jsx
index 198452a..7c8a22b 100644
--- a/src/components/contractor/FinancialSummaryModal.jsx
+++ b/src/components/contractor/FinancialSummaryModal.jsx
@@ -124,8 +124,11 @@ const FinancialSummaryModal = ({ isOpen, onClose, role, data }) => {
                 {/* Toolbar */}
                 <div className="px-4 sm:px-6 py-3 sm:py-4 border-b border-zinc-200 dark:border-white/5 flex flex-col sm:flex-row gap-3 sm:gap-4 justify-between bg-white dark:bg-[#121214]">
                     <div className="relative w-full sm:w-96">
+                        <label htmlFor="search-contractor-financial" className="sr-only">Search transactions</label>
                         <Search className="absolute left-3 top-1/2 -translate-y-1/2 text-zinc-400" size={16} />
                         <input
+                            id="search-contractor-financial"
+                            name="search"
                             type="text"
                             placeholder="Search transactions..."
                             value={searchTerm}
@@ -156,7 +159,7 @@ const FinancialSummaryModal = ({ isOpen, onClose, role, data }) => {
                                         <span className={`px-2 py-0.5 rounded-full text-[10px] font-bold uppercase tracking-wide ${item.status === 'paid' || item.status === 'completed'
                                             ? 'bg-emerald-100 text-emerald-700 dark:bg-emerald-500/10 dark:text-emerald-400'
                                             : 'bg-amber-100 text-amber-700 dark:bg-amber-500/10 dark:text-amber-400'
-                                        }`}>{item.status}</span>
+                                            }`}>{item.status}</span>
                                     </div>
                                 </div>
                             ))}
@@ -199,8 +202,8 @@ const FinancialSummaryModal = ({ isOpen, onClose, role, data }) => {
                                     </td>
                                     <td className="px-6 py-4">
                                         <span className={`px-2.5 py-0.5 rounded-full text-xs font-bold uppercase tracking-wide whitespace-nowrap ${item.status === 'paid' || item.status === 'completed'
-                                                ? 'bg-emerald-100 text-emerald-700 dark:bg-emerald-500/10 dark:text-emerald-400'
-                                                : 'bg-amber-100 text-amber-700 dark:bg-amber-500/10 dark:text-amber-400'
+                                            ? 'bg-emerald-100 text-emerald-700 dark:bg-emerald-500/10 dark:text-emerald-400'
+                                            : 'bg-amber-100 text-amber-700 dark:bg-amber-500/10 dark:text-amber-400'
                                             }`}>
                                             {item.status}
                                         </span>
diff --git a/src/components/dashboard/AgentSelectionModal.jsx b/src/components/dashboard/AgentSelectionModal.jsx
index fce8ba9..534a87f 100644
--- a/src/components/dashboard/AgentSelectionModal.jsx
+++ b/src/components/dashboard/AgentSelectionModal.jsx
@@ -33,8 +33,11 @@ export const AgentSelectionModal = ({ isOpen, onClose, onSelect }) => {
                 {/* Search */}
                 <div className="p-4 border-b border-zinc-100 dark:border-zinc-800 flex-shrink-0">
                     <div className="relative">
+                        <label htmlFor="search-agents" className="sr-only">Search agents</label>
                         <Search className="absolute left-3 top-1/2 -translate-y-1/2 text-zinc-400" size={16} />
                         <input
+                            id="search-agents"
+                            name="search-agents"
                             type="text"
                             placeholder="Search agents..."
                             className="w-full pl-9 pr-4 py-2 bg-zinc-100 dark:bg-black/20 border border-transparent focus:border-blue-500 rounded-xl text-sm outline-none transition-all dark:text-white"
diff --git a/src/components/maps/PropertyDetailDrawer.jsx b/src/components/maps/PropertyDetailDrawer.jsx
index 53d0349..aa22e95 100644
--- a/src/components/maps/PropertyDetailDrawer.jsx
+++ b/src/components/maps/PropertyDetailDrawer.jsx
@@ -18,9 +18,9 @@ const StatusBadge = ({ status }) => {
     );
 };
 
-const InputGroup = ({ label, children }) => (
+const InputGroup = ({ label, children, htmlFor }) => (
     <div className="space-y-1.5">
-        <label className="text-[10px] uppercase font-bold text-zinc-400 tracking-widest ml-0.5">{label}</label>
+        <label htmlFor={htmlFor} className="text-[10px] uppercase font-bold text-zinc-400 tracking-widest ml-0.5">{label}</label>
         <div>{children}</div>
     </div>
 );
@@ -256,6 +256,8 @@ const PropertyDetailDrawer = ({ isOpen, onClose, data, newLocation, onSave, load
 
     // Helper for Inputs
     const RenderInput = ({ label, field, type = "text", placeholder, options, locked = false }) => {
+        const inputId = `prop-${field}`;
+
         if (!isEditing) {
             return (
                 <InputGroup label={label}>
@@ -277,9 +279,11 @@ const PropertyDetailDrawer = ({ isOpen, onClose, data, newLocation, onSave, load
         }
 
         return (
-            <InputGroup label={label}>
+            <InputGroup label={label} htmlFor={inputId}>
                 {options ? (
                     <select
+                        id={inputId}
+                        name={field}
                         value={formData[field]}
                         onChange={(e) => setFormData({ ...formData, [field]: e.target.value })}
                         className="w-full bg-zinc-50 dark:bg-black/20 border border-zinc-200 dark:border-white/10 rounded-lg py-2 px-2 text-sm text-zinc-900 dark:text-white focus:outline-none focus:ring-1 focus:ring-blue-500 appearance-none"
@@ -292,6 +296,8 @@ const PropertyDetailDrawer = ({ isOpen, onClose, data, newLocation, onSave, load
                     </select>
                 ) : (
                     <input
+                        id={inputId}
+                        name={field}
                         type={type}
                         value={formData[field]}
                         onChange={(e) => setFormData({ ...formData, [field]: e.target.value })}
@@ -374,10 +380,10 @@ const PropertyDetailDrawer = ({ isOpen, onClose, data, newLocation, onSave, load
                                     {/* Status Selector */}
                                     {isEditing && (
                                         <div className="space-y-2">
-                                            <label className="text-[10px] uppercase font-bold text-zinc-500 tracking-widest ml-1">Canvassing Status</label>
-                                            <div className="grid grid-cols-2 md:grid-cols-3 gap-2">
+                                            <span id="status-label" className="block text-[10px] uppercase font-bold text-zinc-500 tracking-widest ml-1">Canvassing Status</span>
+                                            <div role="group" aria-labelledby="status-label" className="grid grid-cols-2 md:grid-cols-3 gap-2">
                                                 {["Neutral", "Hot Lead", "Renovated", "Customer", "Not Interested"].map(s => (
-                                                    <button key={s} onClick={() => setFormData({ ...formData, status: s })} className={`px-1 py-2 rounded text-[10px] font-bold border transition-all ${formData.status === s ? 'bg-zinc-900 dark:bg-white text-white dark:text-black' : 'bg-transparent border-zinc-200 dark:border-white/10 text-zinc-500'}`}>{s}</button>
+                                                    <button key={s} aria-pressed={formData.status === s} onClick={() => setFormData({ ...formData, status: s })} className={`px-1 py-2 rounded text-[10px] font-bold border transition-all ${formData.status === s ? 'bg-zinc-900 dark:bg-white text-white dark:text-black' : 'bg-transparent border-zinc-200 dark:border-white/10 text-zinc-500'}`}>{s}</button>
                                                 ))}
                                             </div>
                                         </div>
@@ -551,10 +557,12 @@ const PropertyDetailDrawer = ({ isOpen, onClose, data, newLocation, onSave, load
                                     {/* SECTION 6: NOTES */}
                                     <div className="space-y-4">
                                         <div className="flex items-center gap-2 pb-2 border-b border-zinc-200 dark:border-white/5 text-zinc-500">
-                                            <Edit2 size={16} /> <h3 className="text-xs font-black uppercase tracking-widest">Field Notes</h3>
+                                            <Edit2 size={16} /> <h3 className="text-xs font-black uppercase tracking-widest"><label htmlFor="prop-notes">Field Notes</label></h3>
                                         </div>
                                         {isEditing ? (
                                             <textarea
+                                                id="prop-notes"
+                                                name="notes"
                                                 className="w-full h-32 bg-zinc-50 dark:bg-black/20 border border-zinc-200 dark:border-white/10 rounded-xl p-3 text-sm text-zinc-900 dark:text-white focus:outline-none focus:ring-1 focus:ring-blue-500 resize-none"
                                                 value={formData.notes}
                                                 placeholder="Add notes..."
@@ -615,6 +623,8 @@ const PropertyDetailDrawer = ({ isOpen, onClose, data, newLocation, onSave, load
                                                 <span className="text-xl">+</span>
                                                 <span className="text-xs uppercase tracking-widest">Upload Photo</span>
                                                 <input
+                                                    id="photo-upload"
+                                                    name="photo-upload"
                                                     type="file"
                                                     accept="image/*"
                                                     className="hidden"
diff --git a/src/components/owner/CreateItemModal.jsx b/src/components/owner/CreateItemModal.jsx
index 02f4a3a..89936d1 100644
--- a/src/components/owner/CreateItemModal.jsx
+++ b/src/components/owner/CreateItemModal.jsx
@@ -43,9 +43,11 @@ const CreateItemModal = ({ isOpen, onClose, title, icon: Icon, iconColor = "text
                 <form onSubmit={handleSubmit} className="p-6 space-y-5">
                     {fields.map((field, i) => (
                         <div key={i} className="space-y-1.5">
-                            <label className="text-xs font-bold uppercase tracking-wider text-zinc-400">{field.label}</label>
+                            <label htmlFor={field.name} className="text-xs font-bold uppercase tracking-wider text-zinc-400">{field.label}</label>
                             {field.type === 'textarea' ? (
                                 <textarea
+                                    id={field.name}
+                                    name={field.name}
                                     className="w-full bg-[#18181b] border border-white/10 rounded-xl px-4 py-3 text-sm text-white placeholder-zinc-600 focus:outline-none focus:border-[#00f0ff] focus:ring-1 focus:ring-[#00f0ff] transition-all"
                                     rows={4}
                                     placeholder={field.placeholder || ''}
@@ -55,6 +57,8 @@ const CreateItemModal = ({ isOpen, onClose, title, icon: Icon, iconColor = "text
                                 />
                             ) : field.type === 'select' ? (
                                 <select
+                                    id={field.name}
+                                    name={field.name}
                                     className="w-full bg-[#18181b] border border-white/10 rounded-xl px-4 py-3 text-sm text-white focus:outline-none focus:border-[#00f0ff] focus:ring-1 focus:ring-[#00f0ff] transition-all"
                                     required={field.required}
                                     value={formData[field.name] || ''}
@@ -65,6 +69,8 @@ const CreateItemModal = ({ isOpen, onClose, title, icon: Icon, iconColor = "text
                                 </select>
                             ) : field.type === 'file' ? (
                                 <input
+                                    id={field.name}
+                                    name={field.name}
                                     type="file"
                                     accept={field.accept}
                                     className="w-full text-sm text-zinc-400 file:mr-4 file:py-2.5 file:px-4 file:rounded-xl file:border file:border-white/10 file:text-sm file:font-bold file:bg-[#18181b] file:text-white hover:file:bg-white/5 transition-all"
@@ -73,6 +79,8 @@ const CreateItemModal = ({ isOpen, onClose, title, icon: Icon, iconColor = "text
                                 />
                             ) : (
                                 <input
+                                    id={field.name}
+                                    name={field.name}
                                     type={field.type || 'text'}
                                     className="w-full bg-[#18181b] border border-white/10 rounded-xl px-4 py-3 text-sm text-white placeholder-zinc-600 focus:outline-none focus:border-[#00f0ff] focus:ring-1 focus:ring-[#00f0ff] transition-all"
                                     placeholder={field.placeholder || ''}
diff --git a/src/components/owner/FinancialDetailsModal.jsx b/src/components/owner/FinancialDetailsModal.jsx
index a1ccc72..6fdbd54 100644
--- a/src/components/owner/FinancialDetailsModal.jsx
+++ b/src/components/owner/FinancialDetailsModal.jsx
@@ -183,8 +183,11 @@ const FinancialDetailsModal = ({ isOpen, onClose, type, ownerId }) => {
                 {/* Toolbar */}
                 <div className="px-4 sm:px-6 py-3 sm:py-4 border-b border-zinc-200 dark:border-white/5 flex flex-col sm:flex-row gap-3 sm:gap-4 justify-between bg-white dark:bg-[#121214]">
                     <div className="relative w-full sm:w-96">
+                        <label htmlFor="search-owner-financial" className="sr-only">Search transactions</label>
                         <Search className="absolute left-3 top-1/2 -translate-y-1/2 text-zinc-400" size={16} />
                         <input
+                            id="search-owner-financial"
+                            name="search"
                             type="text"
                             placeholder="Search by name, ID..."
                             value={searchTerm}
diff --git a/src/components/vendor/VendorFinancialSummaryModal.jsx b/src/components/vendor/VendorFinancialSummaryModal.jsx
index b661fe7..055da99 100644
--- a/src/components/vendor/VendorFinancialSummaryModal.jsx
+++ b/src/components/vendor/VendorFinancialSummaryModal.jsx
@@ -125,8 +125,11 @@ const VendorFinancialSummaryModal = ({ isOpen, onClose, data }) => {
                 {/* Toolbar */}
                 <div className="px-4 sm:px-6 py-3 sm:py-4 border-b border-zinc-200 dark:border-white/5 flex flex-col sm:flex-row gap-3 sm:gap-4 justify-between bg-white dark:bg-[#121214]">
                     <div className="relative w-full sm:w-96">
+                        <label htmlFor="search-vendor-financial" className="sr-only">Search invoices</label>
                         <Search className="absolute left-3 top-1/2 -translate-y-1/2 text-zinc-400" size={16} />
                         <input
+                            id="search-vendor-financial"
+                            name="search"
                             type="text"
                             placeholder="Search invoices..."
                             value={searchTerm}
@@ -158,7 +161,7 @@ const VendorFinancialSummaryModal = ({ isOpen, onClose, data }) => {
                                             : invoice.status === 'pending'
                                                 ? 'bg-amber-100 text-amber-700 dark:bg-amber-500/10 dark:text-amber-400'
                                                 : 'bg-red-100 text-red-700 dark:bg-red-500/10 dark:text-red-400'
-                                        }`}>{invoice.status}</span>
+                                            }`}>{invoice.status}</span>
                                         <span className="text-xs text-zinc-500">Due: {invoice.dueDate}</span>
                                     </div>
                                 </div>
@@ -210,10 +213,10 @@ const VendorFinancialSummaryModal = ({ isOpen, onClose, data }) => {
                                     </td>
                                     <td className="px-6 py-4">
                                         <span className={`px-2.5 py-0.5 rounded-full text-xs font-bold uppercase tracking-wide whitespace-nowrap ${invoice.status === 'paid'
-                                                ? 'bg-emerald-100 text-emerald-700 dark:bg-emerald-500/10 dark:text-emerald-400'
-                                                : invoice.status === 'pending'
-                                                    ? 'bg-amber-100 text-amber-700 dark:bg-amber-500/10 dark:text-amber-400'
-                                                    : 'bg-red-100 text-red-700 dark:bg-red-500/10 dark:text-red-400'
+                                            ? 'bg-emerald-100 text-emerald-700 dark:bg-emerald-500/10 dark:text-emerald-400'
+                                            : invoice.status === 'pending'
+                                                ? 'bg-amber-100 text-amber-700 dark:bg-amber-500/10 dark:text-amber-400'
+                                                : 'bg-red-100 text-red-700 dark:bg-red-500/10 dark:text-red-400'
                                             }`}>
                                             {invoice.status}
                                         </span>
diff --git a/src/pages/AdminSchedule.jsx b/src/pages/AdminSchedule.jsx
index 3577f87..e3f8c68 100644
--- a/src/pages/AdminSchedule.jsx
+++ b/src/pages/AdminSchedule.jsx
@@ -230,14 +230,20 @@ const AdminSchedule = () => {
                                 </button>
                                 <div className="border-t border-zinc-200 dark:border-zinc-700/50 p-3">
                                     <p className="text-xs font-semibold text-zinc-500 dark:text-zinc-400 mb-2">Custom Range</p>
+                                    <label htmlFor="custom-date-start" className="sr-only">Start Date</label>
                                     <input
+                                        id="custom-date-start"
+                                        name="custom-date-start"
                                         type="date"
                                         value={customDateRange.start}
                                         onChange={(e) => setCustomDateRange(prev => ({ ...prev, start: e.target.value }))}
                                         className="w-full px-2 py-1 text-xs bg-white dark:bg-zinc-900 border border-zinc-200 dark:border-zinc-700 rounded mb-2 text-zinc-900 dark:text-white"
                                         placeholder="Start date"
                                     />
+                                    <label htmlFor="custom-date-end" className="sr-only">End Date</label>
                                     <input
+                                        id="custom-date-end"
+                                        name="custom-date-end"
                                         type="date"
                                         value={customDateRange.end}
                                         onChange={(e) => setCustomDateRange(prev => ({ ...prev, end: e.target.value }))}
@@ -272,9 +278,12 @@ const AdminSchedule = () => {
                                 {availableStatuses.map(status => (
                                     <label
                                         key={status}
+                                        htmlFor={`status-filter-${status.replace(/\s+/g, '-')}`}
                                         className="flex items-center gap-2 px-4 py-2 text-sm text-zinc-700 dark:text-zinc-200 hover:bg-zinc-100 dark:hover:bg-zinc-800 cursor-pointer transition-colors"
                                     >
                                         <input
+                                            id={`status-filter-${status.replace(/\s+/g, '-')}`}
+                                            name={`status-filter-${status.replace(/\s+/g, '-')}`}
                                             type="checkbox"
                                             checked={statusFilter.includes(status)}
                                             onChange={() => toggleStatusFilter(status)}
diff --git a/src/pages/CustomerProfile.jsx b/src/pages/CustomerProfile.jsx
index 3d49937..7f22546 100644
--- a/src/pages/CustomerProfile.jsx
+++ b/src/pages/CustomerProfile.jsx
@@ -129,12 +129,14 @@ const CustomerProfile = () => {
                     {activeTab === 'details' ? (
                         <SpotlightCard>
                             <form onSubmit={handleSaveProfile} className="p-8 space-y-6">
-                                <FormInput label="Full Name" icon={User} value={formData.name} onChange={v => setFormData({ ...formData, name: v })} required />
-                                <FormInput label="Email Address" icon={null} prefix="@" type="email" value={formData.email} onChange={v => setFormData({ ...formData, email: v })} required />
-                                <FormInput label="Phone Number" value={formData.phone} onChange={v => setFormData({ ...formData, phone: v })} required />
+                                <FormInput id="customer-name" name="name" label="Full Name" icon={User} value={formData.name} onChange={v => setFormData({ ...formData, name: v })} required />
+                                <FormInput id="customer-email" name="email" label="Email Address" icon={null} prefix="@" type="email" value={formData.email} onChange={v => setFormData({ ...formData, email: v })} required />
+                                <FormInput id="customer-phone" name="phone" label="Phone Number" value={formData.phone} onChange={v => setFormData({ ...formData, phone: v })} required />
                                 <div className="space-y-2 md:col-span-2">
-                                    <label className="text-xs font-bold uppercase text-zinc-500">Address</label>
+                                    <label htmlFor="customer-address" className="text-xs font-bold uppercase text-zinc-500">Address</label>
                                     <textarea
+                                        id="customer-address"
+                                        name="address"
                                         value={formData.address}
                                         onChange={(e) => setFormData({ ...formData, address: e.target.value })}
                                         className="w-full px-4 py-2 bg-zinc-100 dark:bg-zinc-800/50 border border-zinc-200 dark:border-zinc-700 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent outline-none transition-all h-24 resize-none"
@@ -168,16 +170,16 @@ const CustomerProfile = () => {
                                     </div>
                                     <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                                         <div className="md:col-span-2">
-                                            <FormInput label="Address" value="2612 Dunwick Dr, Plano, TX 75023" onChange={() => { }} />
+                                            <FormInput id="prop-address" name="prop-address" label="Address" value="2612 Dunwick Dr, Plano, TX 75023" onChange={() => { }} />
                                         </div>
-                                        <FormInput label="Type" value="Residential" onChange={() => { }} />
-                                        <FormInput label="Year Built" value="1971" onChange={() => { }} />
-                                        <FormInput label="Built-Up Area (sqft)" value="2450" onChange={() => { }} />
-                                        <FormInput label="Lot Size (sqft)" value="8500" onChange={() => { }} />
+                                        <FormInput id="prop-type" name="prop-type" label="Type" value="Residential" onChange={() => { }} />
+                                        <FormInput id="prop-year" name="prop-year" label="Year Built" value="1971" onChange={() => { }} />
+                                        <FormInput id="prop-area-sqft" name="prop-area-sqft" label="Built-Up Area (sqft)" value="2450" onChange={() => { }} />
+                                        <FormInput id="prop-lot-sqft" name="prop-lot-sqft" label="Lot Size (sqft)" value="8500" onChange={() => { }} />
                                         <div className="grid grid-cols-3 gap-4 md:col-span-2">
-                                            <FormInput label="Beds" value="4" onChange={() => { }} />
-                                            <FormInput label="Baths" value="3" onChange={() => { }} />
-                                            <FormInput label="Parking" value="2" onChange={() => { }} />
+                                            <FormInput id="prop-beds" name="prop-beds" label="Beds" value="4" onChange={() => { }} />
+                                            <FormInput id="prop-baths" name="prop-baths" label="Baths" value="3" onChange={() => { }} />
+                                            <FormInput id="prop-parking" name="prop-parking" label="Parking" value="2" onChange={() => { }} />
                                         </div>
                                     </div>
                                 </div>
@@ -188,10 +190,10 @@ const CustomerProfile = () => {
                                         <ShieldCheck size={20} /> <h3 className="text-sm font-black uppercase tracking-widest">Insurance Information</h3>
                                     </div>
                                     <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-                                        <FormInput label="Insurance Company" value="Farmers" onChange={() => { }} />
-                                        <FormInput label="Policy Number" value="POL-987654321" onChange={() => { }} />
-                                        <FormInput label="Claim Filed?" value="No" onChange={() => { }} />
-                                        <FormInput label="Adjuster Name" value="" placeholder="N/A" onChange={() => { }} />
+                                        <FormInput id="ins-company" name="ins-company" label="Insurance Company" value="Farmers" onChange={() => { }} />
+                                        <FormInput id="ins-policy" name="ins-policy" label="Policy Number" value="POL-987654321" onChange={() => { }} />
+                                        <FormInput id="ins-claim-filed" name="ins-claim-filed" label="Claim Filed?" value="No" onChange={() => { }} />
+                                        <FormInput id="ins-adjuster" name="ins-adjuster" label="Adjuster Name" value="" placeholder="N/A" onChange={() => { }} />
                                     </div>
                                 </div>
 
@@ -307,13 +309,15 @@ const ReadOnlyField = ({ label, value }) => (
     </div>
 );
 
-const FormInput = ({ label, icon: Icon, prefix, value, onChange, type = "text", required }) => (
+const FormInput = ({ id, name, label, icon: Icon, prefix, value, onChange, type = "text", required }) => (
     <div className="space-y-2">
-        <label className="text-xs font-bold uppercase text-zinc-500">{label} {required && <span className="text-red-500">*</span>}</label>
+        <label htmlFor={id} className="text-xs font-bold uppercase text-zinc-500">{label} {required && <span className="text-red-500">*</span>}</label>
         <div className="relative">
             {Icon && <Icon className="absolute left-3 top-3 text-zinc-400" size={16} />}
             {prefix && <span className="absolute left-3 top-3 text-zinc-400 text-xs">{prefix}</span>}
             <input
+                id={id}
+                name={name || id}
                 type={type}
                 required={required}
                 value={value}
diff --git a/src/pages/Login.jsx b/src/pages/Login.jsx
index 250e559..a7569d9 100644
--- a/src/pages/Login.jsx
+++ b/src/pages/Login.jsx
@@ -204,7 +204,7 @@ const Login = () => {
 
                         <form onSubmit={handleLogin} className="space-y-6 md:space-y-8">
                             <div className="space-y-2">
-                                <label className="text-xs font-bold text-zinc-500 ml-1 uppercase tracking-widest">
+                                <label htmlFor="identifier" className="text-xs font-bold text-zinc-500 ml-1 uppercase tracking-widest">
                                     {loginType === 'employee' ? 'Employee ID' : 'Username'}
                                 </label>
                                 <div className="relative group">
@@ -212,6 +212,8 @@ const Login = () => {
                                         {loginType === 'customer' ? <User size={20} /> : <Briefcase size={20} />}
                                     </div>
                                     <input
+                                        id="identifier"
+                                        name="identifier"
                                         type="text"
                                         value={identifier}
                                         onChange={(e) => setIdentifier(e.target.value)}
@@ -223,7 +225,7 @@ const Login = () => {
 
                             <div className="space-y-2">
                                 <div className="flex justify-between items-center ml-1">
-                                    <label className="text-xs font-bold text-zinc-500 uppercase tracking-widest">Password</label>
+                                    <label htmlFor="password" className="text-xs font-bold text-zinc-500 uppercase tracking-widest">Password</label>
                                     <button type="button" className="text-xs font-semibold text-zinc-400 hover:text-zinc-600 dark:text-zinc-500 dark:hover:text-zinc-300 transition-colors">
                                         Forgot Password?
                                     </button>
@@ -233,6 +235,8 @@ const Login = () => {
                                         <Lock size={20} />
                                     </div>
                                     <input
+                                        id="password"
+                                        name="password"
                                         type={showPassword ? "text" : "password"}
                                         value={password}
                                         onChange={(e) => setPassword(e.target.value)}
diff --git a/src/pages/owner/OwnerProjectDetail.jsx b/src/pages/owner/OwnerProjectDetail.jsx
index 1bb289e..6138863 100644
--- a/src/pages/owner/OwnerProjectDetail.jsx
+++ b/src/pages/owner/OwnerProjectDetail.jsx
@@ -576,7 +576,7 @@ const OwnerProjectDetail = () => {
                                         </thead>
                                         <tbody className="divide-y divide-white/5">
                                             {project.changeOrders.map((co, i) => (
-                                                <tr key={i} className="hover:bg-white/5 transition-colors cursor-pointer" onClick={() => setSelectedCO(co)}>
+                                                <tr key={i} className="hover:bg-white/5 transition-colors cursor-pointer" tabIndex="0" onClick={() => setSelectedCO(co)} onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); setSelectedCO(co); } }}>
                                                     <td className="px-5 py-4 font-mono text-xs text-zinc-500">{co.id}</td>
                                                     <td className="px-5 py-4">
                                                         <div className="font-bold text-sm text-white">{co.title}</div>
@@ -741,7 +741,7 @@ const OwnerProjectDetail = () => {
                                         </thead>
                                         <tbody className="divide-y divide-white/5">
                                             {project.invoices.map((inv, i) => (
-                                                <tr key={i} className="hover:bg-white/5 transition-colors cursor-pointer" onClick={() => setSelectedInvoice(inv)}>
+                                                <tr key={i} className="hover:bg-white/5 transition-colors cursor-pointer" tabIndex="0" onClick={() => setSelectedInvoice(inv)} onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); setSelectedInvoice(inv); } }}>
                                                     <td className="px-5 py-4 font-mono text-xs text-zinc-500">{inv.id}</td>
                                                     <td className="px-5 py-4 text-right font-mono text-sm font-bold text-[#00f0ff]">
                                                         {formatCurrency(inv.amount)}
diff --git a/src/pages/owner/OwnerProjectList.jsx b/src/pages/owner/OwnerProjectList.jsx
index 74000f1..1e3ac49 100644
--- a/src/pages/owner/OwnerProjectList.jsx
+++ b/src/pages/owner/OwnerProjectList.jsx
@@ -31,7 +31,7 @@ const OwnerProjectList = () => {
     // Filter projects for this owner
     const ownerProjects = useMemo(() =>
         projects.filter(p => p.ownerId === user?.id)
-    , [projects, user]);
+        , [projects, user]);
 
     // Apply filters
     const filteredProjects = useMemo(() => {
@@ -125,8 +125,11 @@ const OwnerProjectList = () => {
                     <div className="flex flex-col sm:flex-row gap-4">
                         {/* Search */}
                         <div className="relative flex-1">
+                            <label htmlFor="search-projects" className="sr-only">Search projects</label>
                             <Search className="absolute left-3 top-1/2 -translate-y-1/2 text-zinc-400" size={16} />
                             <input
+                                id="search-projects"
+                                name="search-projects"
                                 type="text"
                                 placeholder="Search by name, type, or ID..."
                                 value={search}
@@ -139,11 +142,10 @@ const OwnerProjectList = () => {
                         <div className="flex flex-wrap gap-2">
                             <button
                                 onClick={() => setStatusFilter('all')}
-                                className={`px-3 py-1.5 rounded-lg text-[10px] font-bold uppercase tracking-wider transition-colors ${
-                                    statusFilter === 'all'
+                                className={`px-3 py-1.5 rounded-lg text-[10px] font-bold uppercase tracking-wider transition-colors ${statusFilter === 'all'
                                         ? 'bg-zinc-900 text-white dark:bg-white dark:text-black'
                                         : 'bg-zinc-100 text-zinc-500 hover:bg-zinc-200 dark:bg-white/5 dark:text-zinc-400 dark:hover:bg-white/10'
-                                }`}
+                                    }`}
                             >
                                 All
                             </button>
@@ -151,11 +153,10 @@ const OwnerProjectList = () => {
                                 <button
                                     key={s}
                                     onClick={() => setStatusFilter(s)}
-                                    className={`px-3 py-1.5 rounded-lg text-[10px] font-bold uppercase tracking-wider transition-colors ${
-                                        statusFilter === s
+                                    className={`px-3 py-1.5 rounded-lg text-[10px] font-bold uppercase tracking-wider transition-colors ${statusFilter === s
                                             ? 'bg-zinc-900 text-white dark:bg-white dark:text-black'
                                             : 'bg-zinc-100 text-zinc-500 hover:bg-zinc-200 dark:bg-white/5 dark:text-zinc-400 dark:hover:bg-white/10'
-                                    }`}
+                                        }`}
                                 >
                                     {s.replace('_', ' ')}
                                 </button>
@@ -163,16 +164,21 @@ const OwnerProjectList = () => {
                         </div>
 
                         {/* Phase Filter */}
-                        <select
-                            value={phaseFilter}
-                            onChange={(e) => setPhaseFilter(e.target.value)}
-                            className="px-3 py-2 rounded-xl text-sm bg-zinc-100 dark:bg-white/5 border border-zinc-200 dark:border-white/10 focus:outline-none focus:ring-2 focus:ring-blue-500/20"
-                        >
-                            <option value="all">All Phases</option>
-                            {phaseOrder.filter(p => availablePhases.includes(p)).map(p => (
-                                <option key={p} value={p}>{p}</option>
-                            ))}
-                        </select>
+                        <div>
+                            <label htmlFor="filter-phase" className="sr-only">Filter by phase</label>
+                            <select
+                                id="filter-phase"
+                                name="filter-phase"
+                                value={phaseFilter}
+                                onChange={(e) => setPhaseFilter(e.target.value)}
+                                className="px-3 py-2 rounded-xl text-sm bg-zinc-100 dark:bg-white/5 border border-zinc-200 dark:border-white/10 focus:outline-none focus:ring-2 focus:ring-blue-500/20"
+                            >
+                                <option value="all">All Phases</option>
+                                {phaseOrder.filter(p => availablePhases.includes(p)).map(p => (
+                                    <option key={p} value={p}>{p}</option>
+                                ))}
+                            </select>
+                        </div>
                     </div>
                 </SpotlightCard>
 
diff --git a/src/pages/owner/PeopleDirectory.jsx b/src/pages/owner/PeopleDirectory.jsx
index 028f4d1..b1ec390 100644
--- a/src/pages/owner/PeopleDirectory.jsx
+++ b/src/pages/owner/PeopleDirectory.jsx
@@ -53,8 +53,11 @@ const PeopleDirectory = () => {
                     <SpotlightCard className={`w-full lg:w-1/3 flex flex-col overflow-hidden ${selectedPerson ? 'hidden lg:flex' : 'flex'}`}>
                         <div className="p-4 border-b border-zinc-200 dark:border-white/5 bg-zinc-50/50 dark:bg-white/5 space-y-4">
                             <div className="relative">
+                                <label htmlFor="search-people" className="sr-only">Search by name or email</label>
                                 <Search className="absolute left-3 top-1/2 -translate-y-1/2 text-zinc-400" size={16} />
                                 <input
+                                    id="search-people"
+                                    name="search-people"
                                     type="text"
                                     placeholder="Search by name or email..."
                                     value={search}
diff --git a/src/pages/owner/VendorDirectory.jsx b/src/pages/owner/VendorDirectory.jsx
index c7470cf..04f3bce 100644
--- a/src/pages/owner/VendorDirectory.jsx
+++ b/src/pages/owner/VendorDirectory.jsx
@@ -55,8 +55,11 @@ const VendorDirectory = () => {
                     <SpotlightCard className={`w-full lg:w-1/3 flex flex-col overflow-hidden ${selectedVendor ? 'hidden lg:flex' : 'flex'}`}>
                         <div className="p-4 border-b border-zinc-200 dark:border-white/5 space-y-4 bg-zinc-50/50 dark:bg-white/5">
                             <div className="relative">
+                                <label htmlFor="search-vendors" className="sr-only">Search vendors</label>
                                 <Search className="absolute left-3 top-1/2 -translate-y-1/2 text-zinc-400" size={16} />
                                 <input
+                                    id="search-vendors"
+                                    name="search-vendors"
                                     type="text"
                                     placeholder="Search vendors..."
                                     value={search}
diff --git a/src/pages/vendor/VendorOrders.jsx b/src/pages/vendor/VendorOrders.jsx
index b09ad6b..fd7aaa3 100644
--- a/src/pages/vendor/VendorOrders.jsx
+++ b/src/pages/vendor/VendorOrders.jsx
@@ -41,8 +41,11 @@ const VendorOrders = () => {
                 </div>
                 <div className="flex items-center gap-2">
                     <div className="relative">
+                        <label htmlFor="search-vendor-orders" className="sr-only">Search orders</label>
                         <Search className="absolute left-3 top-1/2 -translate-y-1/2 text-zinc-400" size={16} />
                         <input
+                            id="search-vendor-orders"
+                            name="search-vendor-orders"
                             type="text"
                             placeholder="Search orders..."
                             className="pl-9 pr-4 py-2 rounded-lg bg-zinc-100 dark:bg-white/5 border border-zinc-200 dark:border-white/10 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500/50"