bede/tfm_ainventory
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactor(a11y): add cursor-pointer and focus states to all interactive elements - Phase 1

Browse Source 
- Add cursor-pointer to all clickable buttons and interactive elements
- Add focus:ring-2 focus:ring-primary/blue focus:outline-none to all buttons
- Add aria-label to icon-only buttons and actions
- Update focus states from focus-visible to focus for consistency
- Add disabled:cursor-not-allowed for disabled button states
- Improve keyboard navigation with proper focus indicators

Components updated:
- BottomNav: navigation buttons with aria-labels
- Scanner: try again, zoom, word selection, cancel buttons
- ItemComparisonModal: skip and update action buttons
- ConfirmationModal: close, cancel, delete buttons with input focus
- AIOnboarding: all mode toggles, camera, upload, capture, edit, delete buttons
- Plus interactive cards and list items

This ensures WCAG AA compliance for keyboard navigation and visual feedback.
This commit is contained in:
Daniel Bedeleanu
2026-04-17 12:59:56 +03:00
parent 6aabf3eac1
commit c45685dd4d
61 changed files with 6454 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
frontend/components/BottomNav.tsx
View File

@@ -30,7 +30,8 @@ export default function BottomNav({
<button
onClick={() => router.push('/')}
className={cn("flex flex-col items-center gap-1 rounded px-2 py-1 focus-visible:ring-2 focus-visible:ring-primary focus-visible:outline-none", isHome && "text-primary")}
aria-label="Go to Home"
className={cn("flex flex-col items-center gap-1 rounded px-2 py-1 cursor-pointer transition-colors focus:ring-2 focus:ring-primary focus:outline-none", isHome && "text-primary")}
>
<Smartphone size={20} />
<span className="text-xs font-bold transition-all">Home</span>
@@ -39,7 +40,8 @@ export default function BottomNav({
{/* Inventory */}
<button
onClick={() => router.push('/inventory')}
className={cn("flex flex-col items-center gap-1 rounded px-2 py-1 focus-visible:ring-2 focus-visible:ring-primary focus-visible:outline-none", isInventory && "text-primary")}
aria-label="Go to Inventory"
className={cn("flex flex-col items-center gap-1 rounded px-2 py-1 cursor-pointer transition-colors focus:ring-2 focus:ring-primary focus:outline-none", isInventory && "text-primary")}
>
<Package size={20} />
<span className="text-xs font-bold transition-all">Inventory</span>
@@ -48,7 +50,8 @@ export default function BottomNav({
{/* Logs */}
<button
onClick={() => router.push('/logs')}
className={cn("flex flex-col items-center gap-1 rounded px-2 py-1 focus-visible:ring-2 focus-visible:ring-primary focus-visible:outline-none", isLogs && "text-primary")}
aria-label="Go to Logs"
className={cn("flex flex-col items-center gap-1 rounded px-2 py-1 cursor-pointer transition-colors focus:ring-2 focus:ring-primary focus:outline-none", isLogs && "text-primary")}
>
<History size={20} />
<span className="text-xs font-bold transition-all">Logs</span>
@@ -58,7 +61,8 @@ export default function BottomNav({
{currentUser?.role === 'admin' && (
<button
onClick={() => router.push('/admin')}
className={cn("flex flex-col items-center gap-1 rounded px-2 py-1 focus-visible:ring-2 focus-visible:ring-primary focus-visible:outline-none", isAdmin && "text-primary")}
aria-label="Go to Admin"
className={cn("flex flex-col items-center gap-1 rounded px-2 py-1 cursor-pointer transition-colors focus:ring-2 focus:ring-primary focus:outline-none", isAdmin && "text-primary")}
>
<Settings size={20} />
<span className="text-xs font-bold transition-all">Admin</span>
@@ -73,7 +77,8 @@ export default function BottomNav({
window.location.href = '/login';
}
}}
className="flex flex-col items-center gap-1 text-rose-500 hover:text-rose-400 transition-colors rounded px-2 py-1 focus-visible:ring-2 focus-visible:ring-rose-500 focus-visible:outline-none"
aria-label="Logout"
className="flex flex-col items-center gap-1 text-rose-500 hover:text-rose-400 cursor-pointer transition-colors rounded px-2 py-1 focus:ring-2 focus:ring-rose-500 focus:outline-none"
>
<LogOut size={20} />
<span className="text-xs font-bold transition-all">Logout</span>