Goutam/LynkedUpPro_CRM
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(a11y): Implement ARIA accessibility sweep and keyboard navigation

Browse Source 
- 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
2026-02-22 03:15:21 +05:30
parent b6f899afd2
commit 5fef584d7d
15 changed files with 123 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/owner/OwnerProjectDetail.jsx
+2 -2
View File
@@ -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)}