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/owner/CreateItemModal.jsx
+9 -1
View File
@@ -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 || ''}