feat: enforce 44px minimum touch targets for receipt OCR components (refs #140)

Adds minHeight/minWidth: 44 to ReceiptCameraButton, ReceiptOcrReviewModal
action buttons, and UpgradeRequiredDialog buttons and close icon to meet
mobile accessibility requirements.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Eric Gullickson
2026-02-11 11:33:57 -06:00
parent 88c2d7fbcd
commit c79b610145
3 changed files with 10 additions and 5 deletions

View File

@@ -48,6 +48,8 @@ export const ReceiptCameraButton: React.FC<ReceiptCameraButtonProps> = ({
size={size}
aria-label={locked ? 'Scan receipt (Pro feature)' : 'Scan receipt with camera'}
sx={{
minWidth: 44,
minHeight: 44,
backgroundColor: locked ? 'action.disabledBackground' : 'primary.light',
color: locked ? 'text.secondary' : 'primary.contrastText',
'&:hover': {
@@ -77,6 +79,7 @@ export const ReceiptCameraButton: React.FC<ReceiptCameraButtonProps> = ({
startIcon={locked ? <LockOutlinedIcon /> : <ReceiptIcon />}
endIcon={locked ? undefined : <CameraAltIcon />}
sx={{
minHeight: 44,
borderStyle: 'dashed',
'&:hover': {
borderStyle: 'solid',

View File

@@ -430,14 +430,14 @@ export const ReceiptOcrReviewModal: React.FC<ReceiptOcrReviewModalProps> = ({
<Button
onClick={onRetake}
startIcon={<CameraAltIcon />}
sx={{ order: isMobile ? 2 : 1 }}
sx={{ order: isMobile ? 2 : 1, minHeight: 44 }}
>
Retake Photo
</Button>
<Box sx={{ flex: 1, display: isMobile ? 'none' : 'block' }} />
<Button
onClick={onCancel}
sx={{ order: isMobile ? 3 : 2 }}
sx={{ order: isMobile ? 3 : 2, minHeight: 44 }}
>
Cancel
</Button>
@@ -445,7 +445,7 @@ export const ReceiptOcrReviewModal: React.FC<ReceiptOcrReviewModalProps> = ({
variant="contained"
onClick={onAccept}
startIcon={<CheckIcon />}
sx={{ order: isMobile ? 1 : 3, width: isMobile ? '100%' : 'auto' }}
sx={{ order: isMobile ? 1 : 3, width: isMobile ? '100%' : 'auto', minHeight: 44 }}
>
Accept
</Button>