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

- 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.

frontend/components/Scanner.tsx

@@ -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>