From 2fc3431f4679fc38bcc10342f00204857d5115ed Mon Sep 17 00:00:00 2001
From: Henry Heino <46334387+personalizedrefrigerator@users.noreply.github.com>
Date: Mon, 20 Oct 2025 12:12:06 -0700
Subject: [PATCH] Web: Accessibility: Fix focus indicator is invisible for sync
 wizard options (#13492)

---
 .../app-mobile/components/buttons/CardButton.tsx  | 15 ++++++++++++---
 1 file changed, 12 insertions(+), 3 deletions(-)

diff --git a/packages/app-mobile/components/buttons/CardButton.tsx b/packages/app-mobile/components/buttons/CardButton.tsx
index c000e09927..a186fd593f 100644
--- a/packages/app-mobile/components/buttons/CardButton.tsx
+++ b/packages/app-mobile/components/buttons/CardButton.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { Card, TouchableRipple } from 'react-native-paper';
 import { useMemo } from 'react';
-import { StyleSheet, View, ViewStyle } from 'react-native';
+import { Platform, StyleSheet, View, ViewStyle } from 'react-native';
 
 export enum InstallState {
 	NotInstalled,
@@ -20,16 +20,25 @@ interface Props {
 const useStyles = (disabled: boolean) => {
 	return useMemo(() => {
 		// For the TouchableRipple to work on Android, the card needs a transparent background.
-		const baseCard = { backgroundColor: 'transparent' };
+		const borderRadius = 12;
+		const baseCard = { backgroundColor: 'transparent', borderRadius };
 		return StyleSheet.create({
 			cardOuterWrapper: {
 				margin: 0,
 				padding: 0,
-				borderRadius: 12,
+				borderRadius,
 				overflow: 'hidden',
+				// Accessibility: Prevent the 'overflow: hidden' from hiding the focus indicator
+				// on web. Only apply to web, as this causes the touchable ripple
+				// from being completely contained within the card on non-web platforms.
+				...(Platform.OS === 'web' ? {
+					margin: -2,
+					padding: 2,
+				} : {}),
 			},
 			cardInnerWrapper: {
 				width: '100%',
+				borderRadius,
 			},
 			card: disabled ? {
 				...baseCard,