egullickson/motovaultpro
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
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
Download Patch File Download Diff File Expand all files Collapse all files

3
frontend/src/features/fuel-logs/components/ReceiptCameraButton.tsx
View File

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

6
frontend/src/features/fuel-logs/components/ReceiptOcrReviewModal.tsx
View File

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

6
frontend/src/shared-minimal/components/UpgradeRequiredDialog.tsx
View File

@@ -79,6 +79,8 @@ export const UpgradeRequiredDialog: React.FC<UpgradeRequiredDialogProps> = ({
position: 'absolute', position: 'absolute',
right: 8, right: 8,
top: 8, top: 8,
minWidth: 44,
minHeight: 44,
color: (theme) => theme.palette.grey[500], color: (theme) => theme.palette.grey[500],
}} }}
> >
@@ -157,7 +159,7 @@ export const UpgradeRequiredDialog: React.FC<UpgradeRequiredDialogProps> = ({
onClick={onClose} onClick={onClose}
variant="outlined" variant="outlined"
fullWidth={isSmall} fullWidth={isSmall}
sx={{ order: isSmall ? 2 : 1 }} sx={{ order: isSmall ? 2 : 1, minHeight: 44 }}
> >
Maybe Later Maybe Later
</Button> </Button>
@@ -166,7 +168,7 @@ export const UpgradeRequiredDialog: React.FC<UpgradeRequiredDialogProps> = ({
variant="contained" variant="contained"
color="primary" color="primary"
fullWidth={isSmall} fullWidth={isSmall}
sx={{ order: isSmall ? 1 : 2 }} sx={{ order: isSmall ? 1 : 2, minHeight: 44 }}
> >
Upgrade (Coming Soon) Upgrade (Coming Soon)
</Button> </Button>