fix: Accessible text contents on 200% text enlargement (#616)

* fix: Make ticket splash content accessible on text enlargenment * fix: Onboarding text accessible on max text enlargement * fix: Remove wrongful change
AtB-AS · Nov 2, 2020 · d1f1f86 · d1f1f86
1 parent f6411b9
commit d1f1f86
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 35 deletions.
diff --git a/src/screens/Onboarding/components/StepContainer.tsx b/src/screens/Onboarding/components/StepContainer.tsx
@@ -1,11 +1,14 @@
 import React from 'react';
 import {SafeAreaView, View} from 'react-native';
 import {StyleSheet} from '../../../theme';
+import {ScrollView} from 'react-native-gesture-handler';
 const StepOuterContainer: React.FC = ({children}) => {
   const styles = useStyles();
   return (
     <SafeAreaView style={styles.container}>
-      <View style={styles.innerContainer}>{children}</View>
+      <ScrollView contentContainerStyle={styles.contentContainer}>
+        <View style={styles.innerContainer}>{children}</View>
+      </ScrollView>
     </SafeAreaView>
   );
 };
@@ -16,13 +19,14 @@ const useStyles = StyleSheet.createThemeHook((theme) => ({
     flex: 1,
     alignItems: 'center',
   },
+  contentContainer: {
+    flexGrow: 1,
+  },
   innerContainer: {
     flex: 1,
     alignItems: 'center',
     maxWidth: 500,
     justifyContent: 'space-between',
-    position: 'absolute',
-    bottom: 0,
   },
 }));
 export default StepOuterContainer;
diff --git a/src/screens/Onboarding/index.tsx b/src/screens/Onboarding/index.tsx
@@ -160,8 +160,6 @@ const StepThree: React.FC<StepProps> = () => {
 const useStyles = StyleSheet.createThemeHook((theme, themeName) => ({
   textContainer: {
     padding: theme.spacings.xLarge,
-    backgroundColor:
-      themeName === 'light' ? 'rgba(235,236,237,0.85)' : 'rgba(22,23,24,0.85)',
   },
   title: {
     fontWeight: 'bold',

diff --git a/src/screens/Ticketing/Splash/index.tsx b/src/screens/Ticketing/Splash/index.tsx
@@ -13,6 +13,7 @@ import {useRemoteConfig} from '../../../RemoteConfigContext';
 import ThemeText from '../../../components/text';
 import ThemeIcon from '../../../components/theme-icon';
 import Button from '../../../components/button';
+import {ScrollView} from 'react-native-gesture-handler';
 function openOtherTicketingApp() {
   const url =
     Platform.OS === 'ios'
@@ -52,41 +53,61 @@ export default function Splash() {
           height={windowWidth / 2}
         ></ShinyTicketBanner>
       </View>
-      <View style={styles.textContainer}>
-        <ThemeText style={[styles.text, styles.bold]}>
-          Billettkjøp i app kommer snart!
-        </ThemeText>
-        <ThemeText style={styles.text}>
-          Her kan du snart kjøpe og administrere billetter til reisen din.
-        </ThemeText>
-        <ThemeText style={styles.text}>
-          Frem til da kan du kjøpe billett fra{'\n'}
-          <Text onPress={openOtherTicketingApp} style={styles.underline}>
-            AtB Mobillett
-          </Text>
-        </ThemeText>
-        <View style={styles.buttonContainer}>
-          <Button
-            onPress={() => modalRef.current?.open()}
-            text="Jeg har kode til beta for billettkjøp"
-            mode="secondary"
-            style={styles.button}
-            textStyle={styles.buttonText}
-          />
+      <ScrollView contentContainerStyle={styles.scrollContainer}>
+        <View style={styles.contentContainer}>
+          <View style={styles.textContent}>
+            <ThemeText style={[styles.text, styles.bold]}>
+              Billettkjøp i app kommer snart!
+            </ThemeText>
+            <ThemeText style={styles.text}>
+              Her kan du snart kjøpe og administrere billetter til reisen din.
+            </ThemeText>
+            <ThemeText style={styles.text}>
+              Frem til da kan du kjøpe billett fra{'\n'}
+              <Text onPress={openOtherTicketingApp} style={styles.underline}>
+                AtB Mobillett
+              </Text>
+            </ThemeText>
+          </View>
+          <View style={styles.buttonContainer}>
+            <Button
+              onPress={() => modalRef.current?.open()}
+              text="Jeg har kode til beta for billettkjøp"
+              mode="secondary"
+              style={styles.button}
+              textStyle={styles.buttonText}
+            />
+          </View>
         </View>
-      </View>
+      </ScrollView>
+
       <InviteModal ref={modalRef} onEnrolled={onEnrolled} />
     </SafeAreaView>
   );
 }
 
 const useStyles = StyleSheet.createThemeHook((theme) => ({
   container: {flex: 1, backgroundColor: theme.background.accent},
-  textContainer: {
-    paddingHorizontal: theme.spacings.large,
+  scrollContainer: {
+    flexGrow: 1,
+  },
+  contentContainer: {
     paddingVertical: theme.spacings.xLarge,
-    alignItems: 'center',
     flex: 1,
+    height: '100%',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+  },
+  textContent: {
+    paddingHorizontal: theme.spacings.large,
+    backgroundColor: theme.background.accent,
+    marginBottom: theme.spacings.xLarge,
+    boxShadow: 'inset 0',
+  },
+  buttonContainer: {
+    paddingHorizontal: theme.spacings.large,
+    width: '100%',
+    marginBottom: theme.spacings.medium,
   },
   text: {
     textAlign: 'center',
@@ -98,11 +119,7 @@ const useStyles = StyleSheet.createThemeHook((theme) => ({
     bottom: theme.spacings.large,
   },
   underline: {textDecorationLine: 'underline'},
-  buttonContainer: {
-    position: 'absolute',
-    bottom: theme.spacings.medium,
-    width: '100%',
-  },
+
   button: {backgroundColor: theme.button.secondary.bg},
   buttonText: {color: theme.button.secondary.color},
 }));