Skip to content

Commit a2ab6c4

Browse files
fix(mobile-e2e): show visible Scan QR Code label on home FAB
Maestro matches rendered text, not accessibility labels, so the icon-only scanner FAB was never found by `tapOn: text: "Scan QR Code"`. Convert the FAB to an extended FAB with a visible "Scan QR Code" label and add a scan-qr-fab testID. 🤖 Generated with Codebuff Co-Authored-By: Codebuff <noreply@codebuff.com>
1 parent 6ef5d75 commit a2ab6c4

1 file changed

Lines changed: 18 additions & 7 deletions

File tree

app/mobile/src/screens/HomeScreen.tsx

Lines changed: 18 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -305,8 +305,12 @@ export const HomeScreen: React.FC<Props> = ({ navigation }) => {
305305
accessibilityRole="button"
306306
accessibilityLabel="Scan QR Code"
307307
accessibilityHint="Opens the camera to scan a Soter QR code"
308+
testID="scan-qr-fab"
308309
>
309310
<Text style={styles.scannerFabIcon} accessibilityElementsHidden>📷</Text>
311+
{/* Visible label — E2E (Maestro) matches rendered text, not just
312+
accessibility labels, so the scanner entry point must show it */}
313+
<Text style={styles.scannerFabLabel}>Scan QR Code</Text>
310314
</TouchableOpacity>
311315
</SafeAreaView>
312316
);
@@ -554,20 +558,27 @@ const makeStyles = (colors: AppColors) =>
554558
position: 'absolute',
555559
right: 24,
556560
bottom: 24,
557-
// 64×64 — well above the 44 pt minimum
558-
width: 64,
559-
height: 64,
560-
borderRadius: 32,
561-
backgroundColor: colors.brand.primary,
562-
justifyContent: 'center',
561+
// Extended FAB: icon + visible "Scan QR Code" label. Well above the
562+
// 44 pt minimum tap-target height (WCAG 2.5.5).
563+
flexDirection: 'row',
563564
alignItems: 'center',
565+
gap: 8,
566+
paddingHorizontal: 18,
567+
height: 56,
568+
borderRadius: 28,
569+
backgroundColor: colors.brand.primary,
564570
shadowColor: colors.brand.primary,
565571
shadowOffset: { width: 0, height: 4 },
566572
shadowOpacity: 0.3,
567573
shadowRadius: 10,
568574
elevation: 8,
569575
},
570576
scannerFabIcon: {
571-
fontSize: 28,
577+
fontSize: 22,
578+
},
579+
scannerFabLabel: {
580+
fontSize: 15,
581+
fontWeight: '700',
582+
color: '#FFFFFF',
572583
},
573584
});

0 commit comments

Comments
 (0)