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.
This commit is contained in:
@@ -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 ? (
|
||||
<>
|
||||
|
||||
Reference in New Issue
Block a user