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:
@@ -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',
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user