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
This commit is contained in:
Satyam
@@ -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)}
|
||||
|
||||
@@ -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}
|
||||
|
||||
+6
-2
@@ -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)}
|
||||
|
||||
@@ -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)}
|
||||
|
||||
@@ -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>
|
||||
|
||||
|
||||
@@ -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}
|
||||
|
||||
@@ -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}
|
||||
|
||||
Vendored
+3
@@ -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"
|
||||
|
||||
Reference in New Issue
Block a user