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/components/vendor/VendorFinancialSummaryModal.jsx
Vendored
+8 -5
View File
@@ -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>