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

95
frontend/components/AIOnboarding.tsx
View File

@@ -240,7 +240,11 @@ export default function AIOnboarding({ onCancel, onComplete, categories, invento
<p className="text-xs text-slate-500 font-bold">Powered by Gemini 2.0 Flash</p>
</div>
</div>
<button onClick={() => { stopLiveCamera(); onCancel(); }} className="p-2 hover:bg-slate-900 rounded-full transition-colors">
<button
onClick={() => { stopLiveCamera(); onCancel(); }}
aria-label="Close AI Discovery"
className="p-2 hover:bg-slate-900 rounded-full cursor-pointer transition-colors focus:ring-2 focus:ring-blue-500 focus:outline-none"
>
<X size={24} />
</button>
</div>
@@ -248,16 +252,18 @@ export default function AIOnboarding({ onCancel, onComplete, categories, invento
{!image && !isLive ? (
<div className="flex-1 flex flex-col gap-6 min-h-0">
<div className="flex bg-slate-900/50 p-1.5 rounded-2xl border border-slate-800/50 shrink-0">
<button
<button
onClick={() => setMode('item')}
className={`flex-1 flex items-center justify-center gap-2 py-3 rounded-xl font-bold transition-all ${mode === 'item' ? 'bg-primary text-white shadow-lg' : 'text-slate-500 hover:text-slate-300'}`}
aria-label="Select Discovery Mode"
className={`flex-1 flex items-center justify-center gap-2 py-3 rounded-xl font-bold cursor-pointer transition-all focus:ring-2 focus:ring-primary focus:outline-none ${mode === 'item' ? 'bg-primary text-white shadow-lg' : 'text-slate-500 hover:text-slate-300'}`}
>
<Package size={18} />
<span className="text-xs">Discovery Mode</span>
</button>
<button
<button
onClick={() => setMode('box')}
className={`flex-1 flex items-center justify-center gap-2 py-3 rounded-xl font-bold transition-all ${mode === 'box' ? 'bg-primary text-white shadow-lg' : 'text-slate-500 hover:text-slate-300'}`}
aria-label="Select Box Lookup mode"
className={`flex-1 flex items-center justify-center gap-2 py-3 rounded-xl font-bold cursor-pointer transition-all focus:ring-2 focus:ring-primary focus:outline-none ${mode === 'box' ? 'bg-primary text-white shadow-lg' : 'text-slate-500 hover:text-slate-300'}`}
>
<Layers size={18} />
<span className="text-xs">Box Lookup</span>
@@ -279,16 +285,18 @@ export default function AIOnboarding({ onCancel, onComplete, categories, invento
</div>
<div className="grid grid-cols-2 gap-4 h-28 shrink-0">
<button
<button
onClick={startLiveCamera}
className="flex flex-col items-center justify-center gap-2 bg-primary text-white rounded-3xl font-bold shadow-2xl shadow-primary/20 active:scale-95 transition-all"
aria-label="Start camera scan"
className="flex flex-col items-center justify-center gap-2 bg-primary text-white rounded-3xl font-bold shadow-2xl shadow-primary/20 cursor-pointer active:scale-95 transition-all focus:ring-2 focus:ring-blue-400 focus:outline-none"
>
<Camera size={24} />
<span className="text-sm">Scan Camera</span>
</button>
<button
<button
onClick={() => fileInputRef.current?.click()}
className="flex flex-col items-center justify-center gap-2 bg-slate-900 text-slate-200 border border-slate-800 rounded-3xl font-bold active:scale-95 transition-all"
aria-label="Upload photo from device"
className="flex flex-col items-center justify-center gap-2 bg-slate-900 text-slate-200 border border-slate-800 rounded-3xl font-bold cursor-pointer active:scale-95 transition-all focus:ring-2 focus:ring-blue-500 focus:outline-none"
>
<ImageIcon size={24} />
<span className="text-sm">Upload Photo</span>
@@ -329,15 +337,17 @@ export default function AIOnboarding({ onCancel, onComplete, categories, invento
</div>
<div className="flex gap-4 shrink-0 pb-2">
<button
<button
onClick={stopLiveCamera}
className="px-6 py-4 bg-slate-900 border border-slate-800 text-slate-400 rounded-2xl font-bold transition-all active:scale-95"
aria-label="Cancel camera scan"
className="px-6 py-4 bg-slate-900 border border-slate-800 text-slate-400 rounded-2xl font-bold cursor-pointer transition-all active:scale-95 focus:ring-2 focus:ring-blue-500 focus:outline-none"
>
Cancel
</button>
<button
<button
onClick={captureSnapshot}
className="flex-1 py-4 bg-white text-slate-950 rounded-2xl font-black text-lg shadow-xl shadow-white/10 flex items-center justify-center gap-3 active:scale-95 hover:bg-slate-200"
aria-label="Capture image from camera"
className="flex-1 py-4 bg-white text-slate-950 rounded-2xl font-black text-lg shadow-xl shadow-white/10 cursor-pointer flex items-center justify-center gap-3 active:scale-95 hover:bg-slate-200 transition-all focus:ring-2 focus:ring-offset-2 focus:ring-offset-slate-950 focus:ring-white focus:outline-none"
>
<div className="w-5 h-5 rounded-full border-2 border-slate-950 flex items-center justify-center">
<div className="w-2.5 h-2.5 rounded-full bg-slate-950" />
@@ -364,17 +374,19 @@ export default function AIOnboarding({ onCancel, onComplete, categories, invento
</div>
<div className="flex gap-4 shrink-0 pb-2">
<button
onClick={() => setImage(null)}
<button
onClick={() => setImage(null)}
disabled={uploading}
className="px-6 py-4 bg-slate-900 border border-slate-800 text-slate-400 rounded-2xl font-bold transition-all active:scale-95 disabled:opacity-50"
aria-label="Retake photo"
className="px-6 py-4 bg-slate-900 border border-slate-800 text-slate-400 rounded-2xl font-bold cursor-pointer transition-all active:scale-95 disabled:opacity-50 disabled:cursor-not-allowed focus:ring-2 focus:ring-blue-500 focus:outline-none"
>
Retake
</button>
<button
onClick={processImage}
<button
onClick={processImage}
disabled={uploading}
className="flex-1 py-4 bg-primary text-white rounded-2xl font-black text-lg shadow-xl shadow-primary/30 flex items-center justify-center gap-3 active:scale-95 disabled:opacity-50 hover:bg-blue-500"
aria-label="Extract data from image"
className="flex-1 py-4 bg-primary text-white rounded-2xl font-black text-lg shadow-xl shadow-primary/30 cursor-pointer flex items-center justify-center gap-3 active:scale-95 disabled:opacity-50 disabled:cursor-not-allowed hover:bg-blue-500 transition-all focus:ring-2 focus:ring-blue-400 focus:outline-none"
>
{uploading ? "Analyzing..." : "Extract Data"}
{!uploading && <Check size={20} />}
@@ -385,9 +397,10 @@ export default function AIOnboarding({ onCancel, onComplete, categories, invento
<div className="flex-1 flex flex-col gap-6 overflow-hidden">
<div className="flex items-center justify-between">
<span className="text-xs text-slate-500 font-bold">Item Details ({editingIndex + 1}/{extractedItems.length})</span>
<button
<button
onClick={() => setEditingIndex(null)}
className="text-xs text-primary font-bold px-3 py-1 bg-primary/10 rounded-full"
aria-label="Back to item list"
className="text-xs text-primary font-bold px-3 py-1 bg-primary/10 rounded-full cursor-pointer transition-colors focus:ring-2 focus:ring-primary focus:outline-none"
>
Back to List
</button>
@@ -525,9 +538,10 @@ export default function AIOnboarding({ onCancel, onComplete, categories, invento
</div>
<div className="flex flex-col gap-3 shrink-0">
<button
<button
onClick={() => confirmSingleItem(editingIndex)}
className="py-5 bg-primary text-white rounded-[1.8rem] font-black text-lg shadow-2xl shadow-primary/20 active:scale-95 transition-all hover:bg-blue-500"
aria-label="Add item to catalog"
className="py-5 bg-primary text-white rounded-[1.8rem] font-black text-lg shadow-2xl shadow-primary/20 cursor-pointer active:scale-95 transition-all hover:bg-blue-500 focus:ring-2 focus:ring-blue-400 focus:outline-none"
>
Add to Catalog
</button>
@@ -544,13 +558,22 @@ export default function AIOnboarding({ onCancel, onComplete, categories, invento
<div className="flex-1 overflow-y-auto space-y-3 pr-1 scrollbar-hide">
{extractedItems.map((item, idx) => (
<div
<div
key={idx}
className="bg-slate-900/50 border border-slate-800 rounded-3xl p-5 flex items-center justify-between group hover:border-primary/40 transition-all active:scale-[0.98]"
className="bg-slate-900/50 border border-slate-800 rounded-3xl p-5 flex items-center justify-between group hover:border-primary/40 transition-all active:scale-[0.98] focus-within:border-primary/60 focus-within:ring-2 focus-within:ring-primary/20"
>
<div
<div
className="flex-1 min-w-0 cursor-pointer"
onClick={() => setEditingIndex(idx)}
role="button"
tabIndex={0}
onKeyDown={(e) => {
if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
setEditingIndex(idx);
}
}}
aria-label={`Edit item: ${item.Item || item.name}`}
>
<div className="flex items-center gap-3 mb-2">
<div className="w-8 h-8 rounded-xl bg-primary/10 flex items-center justify-center text-primary">
@@ -569,19 +592,21 @@ export default function AIOnboarding({ onCancel, onComplete, categories, invento
</div>
<div className="flex items-center gap-2">
<button
<button
onClick={() => {
const newItems = [...extractedItems];
newItems.splice(idx, 1);
setExtractedItems(newItems);
}}
className="p-3 text-slate-600 hover:text-red-500 transition-colors"
aria-label={`Delete item: ${item.Item || item.name}`}
className="p-3 text-slate-600 hover:text-red-500 cursor-pointer transition-colors focus:ring-2 focus:ring-red-500 focus:outline-none rounded-lg"
>
<X size={20} />
</button>
<button
<button
onClick={() => setEditingIndex(idx)}
className="p-3 bg-primary/10 text-primary rounded-2xl hover:bg-primary/20 transition-all"
aria-label={`Edit item: ${item.Item || item.name}`}
className="p-3 bg-primary/10 text-primary rounded-2xl cursor-pointer hover:bg-primary/20 transition-all focus:ring-2 focus:ring-primary focus:outline-none"
>
<ChevronDown size={20} className="-rotate-90" />
</button>
@@ -591,18 +616,20 @@ export default function AIOnboarding({ onCancel, onComplete, categories, invento
</div>
<div className="flex flex-col gap-3 shrink-0">
<button
<button
onClick={confirmAllItems}
className="py-5 bg-white text-slate-950 rounded-[1.8rem] font-black text-lg shadow-2xl shadow-white/10 active:scale-95 transition-all hover:bg-slate-200"
aria-label={`Add ${extractedItems.length} items to catalog`}
className="py-5 bg-white text-slate-950 rounded-[1.8rem] font-black text-lg shadow-2xl shadow-white/10 cursor-pointer active:scale-95 transition-all hover:bg-slate-200 focus:ring-2 focus:ring-offset-2 focus:ring-offset-slate-950 focus:ring-white focus:outline-none"
>
Add {extractedItems.length} items to catalog
</button>
<button
<button
onClick={() => {
setExtractedItems([]);
setImage(null);
}}
className="py-3 text-xs text-slate-600 font-bold hover:text-slate-400"
aria-label="Discard discovery session"
className="py-3 text-xs text-slate-600 font-bold cursor-pointer hover:text-slate-400 transition-colors focus:ring-2 focus:ring-slate-500 focus:outline-none rounded px-2"
>
Discard Discovery
</button>

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>

10
frontend/components/ConfirmationModal.tsx
View File

@@ -67,8 +67,8 @@ export default function ConfirmationModal({
<button
onClick={onCancel}
disabled={loading}
className="p-1 text-slate-500 hover:text-slate-300 rounded focus-visible:ring-2 focus-visible:ring-primary focus-visible:outline-none disabled:opacity-50"
aria-label="Close"
className="p-1 text-slate-500 hover:text-slate-300 rounded cursor-pointer focus:ring-2 focus:ring-primary focus:outline-none disabled:opacity-50 disabled:cursor-not-allowed"
aria-label="Close modal"
>
<X size={20} />
</button>
@@ -118,7 +118,7 @@ export default function ConfirmationModal({
setError(null);
}}
placeholder="Type DELETE"
className="w-full px-3 py-2.5 bg-slate-800 border border-slate-700 rounded text-white placeholder-slate-500 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary"
className="w-full px-3 py-2.5 bg-slate-800 border border-slate-700 rounded text-white placeholder-slate-500 focus:outline-none focus:ring-2 focus:ring-primary disabled:opacity-50"
disabled={loading}
onKeyDown={(e) => {
if (e.key === 'Enter' && canConfirm && !loading) {
@@ -138,14 +138,14 @@ export default function ConfirmationModal({
<button
onClick={onCancel}
disabled={loading}
className="flex-1 px-4 py-2.5 text-slate-300 bg-slate-800 border border-slate-700 rounded font-semibold hover:bg-slate-700 transition-colors disabled:opacity-50 focus-visible:ring-2 focus-visible:ring-primary focus-visible:outline-none"
className="flex-1 px-4 py-2.5 text-slate-300 bg-slate-800 border border-slate-700 rounded font-semibold hover:bg-slate-700 cursor-pointer transition-colors disabled:opacity-50 disabled:cursor-not-allowed focus:ring-2 focus:ring-primary focus:outline-none"
>
Cancel
</button>
<button
onClick={handleConfirm}
disabled={loading || !canConfirm}
className="flex-1 px-4 py-2.5 bg-rose-600 text-white rounded font-semibold hover:bg-rose-700 transition-colors disabled:opacity-50 flex items-center justify-center gap-2 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-slate-900 focus-visible:ring-rose-600 focus-visible:outline-none"
className="flex-1 px-4 py-2.5 bg-rose-600 text-white rounded font-semibold hover:bg-rose-700 cursor-pointer transition-colors disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2 focus:ring-2 focus:ring-offset-2 focus:ring-offset-slate-900 focus:ring-rose-600 focus:outline-none"
>
{loading ? (
<>

6
frontend/components/ItemComparisonModal.tsx
View File

@@ -95,7 +95,8 @@ export default function ItemComparisonModal({
<button
onClick={onSkip}
disabled={loading}
className="flex-1 flex items-center justify-center gap-2 py-4 bg-slate-800 hover:bg-slate-700 text-slate-200 rounded-2xl text-sm font-black transition-all active:scale-95 disabled:opacity-50 border border-slate-700"
aria-label="Skip this item comparison"
className="flex-1 flex items-center justify-center gap-2 py-4 bg-slate-800 hover:bg-slate-700 text-slate-200 rounded-2xl text-sm font-black cursor-pointer transition-all active:scale-95 disabled:opacity-50 disabled:cursor-not-allowed border border-slate-700 focus:ring-2 focus:ring-blue-500 focus:outline-none"
>
<SkipForward size={16} /> Skip
</button>
@@ -103,7 +104,8 @@ export default function ItemComparisonModal({
<button
onClick={onUpdate}
disabled={loading}
className="flex-1 flex items-center justify-center gap-2 py-4 bg-primary hover:bg-blue-600 text-white rounded-2xl text-sm font-black transition-all active:scale-95 disabled:opacity-50 shadow-xl shadow-primary/20"
aria-label="Update item with new data"
className="flex-1 flex items-center justify-center gap-2 py-4 bg-primary hover:bg-blue-600 text-white rounded-2xl text-sm font-black cursor-pointer transition-all active:scale-95 disabled:opacity-50 disabled:cursor-not-allowed shadow-xl shadow-primary/20 focus:ring-2 focus:ring-blue-400 focus:outline-none"
>
{loading ? (
<>

16
frontend/components/Scanner.tsx
View File

@@ -243,7 +243,8 @@ export default function Scanner({ onScanSuccess, onOCRMatch, paused }: ScannerPr
<button
key={i}
onClick={() => handleWordSelect(w.text)}
className="absolute border border-primary bg-primary/20 rounded-sm active:bg-primary/50 transition-colors pointer-events-auto"
aria-label={`Select text: ${w.text}`}
className="absolute border border-primary bg-primary/20 rounded-sm active:bg-primary/50 cursor-pointer transition-colors pointer-events-auto focus:ring-2 focus:ring-primary focus:outline-none"
style={{
left: `${(w.bbox.x0 / 1600) * 100}%`,
top: `${(w.bbox.y0 / (1600 * (9/16))) * 100}%`,
@@ -262,7 +263,8 @@ export default function Scanner({ onScanSuccess, onOCRMatch, paused }: ScannerPr
</div>
<button
onClick={() => { setIsSelecting(false); setCapturedImage(null); setCountdown(4); }}
className="w-full py-4 bg-slate-800 hover:bg-slate-700 text-white rounded-2xl font-black text-xs transition-all active:scale-95 border border-slate-700"
aria-label="Cancel text selection"
className="w-full py-4 bg-slate-800 hover:bg-slate-700 text-white rounded-2xl font-black text-xs cursor-pointer transition-all active:scale-95 border border-slate-700 focus:ring-2 focus:ring-blue-500 focus:outline-none"
>
Cancel
</button>
@@ -284,9 +286,10 @@ export default function Scanner({ onScanSuccess, onOCRMatch, paused }: ScannerPr
<p className="font-bold text-white">Camera Error</p>
<p className="text-xs text-slate-400 mt-1">{error}</p>
</div>
<button
<button
onClick={() => window.location.reload()}
className="mt-4 px-6 py-2 bg-slate-800 rounded-full text-sm font-bold hover:bg-slate-700 transition-colors"
aria-label="Reload page and try again"
className="mt-4 px-6 py-2 bg-slate-800 rounded-full text-sm font-bold cursor-pointer hover:bg-slate-700 transition-colors focus:ring-2 focus:ring-blue-500 focus:outline-none"
>
Try Again
</button>
@@ -298,7 +301,7 @@ export default function Scanner({ onScanSuccess, onOCRMatch, paused }: ScannerPr
<div className="flex flex-col gap-4 bg-slate-900/40 p-5 rounded-[2.5rem] border border-slate-800/50 shadow-2xl">
<div className="flex items-center gap-3 w-full">
{hasZoom && (
<button
<button
onClick={async () => {
let nextZoom = 1;
if (zoom === 1) nextZoom = Math.min(2, maxZoom);
@@ -313,7 +316,8 @@ export default function Scanner({ onScanSuccess, onOCRMatch, paused }: ScannerPr
setZoom(nextZoom);
}
}}
className="h-14 px-5 bg-slate-800/80 hover:bg-slate-700 border border-slate-700 text-white rounded-2xl flex flex-col items-center justify-center shadow-lg transition-all active:scale-95 shrink-0"
aria-label={`Zoom ${zoom.toFixed(1)}x`}
className="h-14 px-5 bg-slate-800/80 hover:bg-slate-700 border border-slate-700 text-white rounded-2xl flex flex-col items-center justify-center shadow-lg cursor-pointer transition-all active:scale-95 shrink-0 focus:ring-2 focus:ring-blue-500 focus:outline-none"
>
<span className="text-xs font-black tabular-nums">{zoom.toFixed(1)}x</span>
<span className="text-xs text-primary font-black tracking-tighter">Zoom</span>