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
2026-02-22 03:15:21 +05:30
parent b6f899afd2
commit 5fef584d7d
15 changed files with 123 additions and 55 deletions
+6
View File
@@ -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)}