fix: solution for backdrop without accessibility

RocketChat · Jan 8, 2025 · a99ed5f · a99ed5f
1 parent 0fa69e3
commit a99ed5f
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 1 deletion.
diff --git a/app/containers/TwoFactor/index.tsx b/app/containers/TwoFactor/index.tsx
@@ -126,7 +126,12 @@ const TwoFactor = React.memo(() => {
 	const color = colors.fontTitlesLabels;
 	return (
 		<Modal
-			accessibilityLabel={I18n.t('Close_Modal')}
+			customBackdrop={
+				<View
+					accessible
+					accessibilityLabel={I18n.t('Close_Modal')}
+					style={[styles.overlay, { backgroundColor: colors.overlayBackground }]}></View>
+			}
 			avoidKeyboard
 			useNativeDriver
 			isVisible={visible}

diff --git a/app/containers/TwoFactor/styles.ts b/app/containers/TwoFactor/styles.ts
@@ -42,5 +42,10 @@ export default StyleSheet.create({
 	},
 	tablet: {
 		height: undefined
+	},
+	overlay: {
+		flex: 1,
+		alignItems: 'center',
+		justifyContent: 'center'
 	}
 });
diff --git a/app/lib/constants/colors.ts b/app/lib/constants/colors.ts
@@ -1,4 +1,5 @@
 const backdropColor = '#000000';
+const overlayBackground = 'rgba(31, 35, 41, 0.65)';
 
 const light = {
 	surfaceLight: '#FFFFFF',
@@ -280,18 +281,21 @@ export const colors = {
 	light: {
 		...light,
 		backdropColor,
+		overlayBackground,
 		backdropOpacity: 0.3,
 		attachmentLoadingOpacity: 0.7
 	},
 	dark: {
 		...dark,
 		backdropColor,
+		overlayBackground,
 		backdropOpacity: 0.9,
 		attachmentLoadingOpacity: 0.3
 	},
 	black: {
 		...black,
 		backdropColor,
+		overlayBackground,
 		backdropOpacity: 0.9,
 		attachmentLoadingOpacity: 0.3
 	}