fix: fix a11y label and remove back button from terms screen (#1873)

Signed-off-by: Bryce McMath <[email protected]>

app/src/screens/Terms.tsx

@@ -13,9 +13,9 @@ import {
 } from '@hyperledger/aries-bifold-core'
 import { useNavigation } from '@react-navigation/native'
 import { StackNavigationProp } from '@react-navigation/stack'
-import React, { useCallback, useState } from 'react'
+import React, { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
-import { ScrollView, StyleSheet, Text, View, Linking, LayoutChangeEvent } from 'react-native'
+import { ScrollView, StyleSheet, Text, View, Linking } from 'react-native'
 import { SafeAreaView } from 'react-native-safe-area-context'
 
 const appleTermsUrl = 'https://www.apple.com/legal/internet-services/itunes/us/terms.html'
@@ -32,18 +32,18 @@ const Terms = () => {
   const { enablePushNotifications } = useConfiguration()
   const navigation = useNavigation<StackNavigationProp<AuthenticateStackParams>>()
   const { ColorPallet, TextTheme } = useTheme()
-  // this padding is so that the content of the scrollview is not hidden under the footer
-  const [scrollPadding, setScrollPadding] = useState(0)
   const agreedToPreviousTerms = store.onboarding.didAgreeToTerms && store.onboarding.didAgreeToTerms !== TermsVersion
   const style = StyleSheet.create({
-    footer: {
-      position: 'absolute',
-      backgroundColor: ColorPallet.brand.primaryBackground,
+    safeAreaView: {
+      flex: 1,
+    },
+    scrollViewContentContainer: {
       padding: 20,
-      paddingTop: 10,
-      bottom: 0,
-      left: 0,
-      right: 0,
+      flexGrow: 1,
+    },
+    footer: {
+      paddingHorizontal: 20,
+      paddingVertical: 10,
     },
     bodyText: {
       ...TextTheme.normal,
@@ -82,18 +82,6 @@ const Terms = () => {
     }
   }, [])
 
-  const onBackPressed = useCallback(() => {
-    //TODO:(jl) goBack() does not unwind the navigation stack but rather goes
-    //back to the splash screen. Needs fixing before the following code will
-    //work as expected.
-
-    // if (nav.canGoBack()) {
-    //   nav.goBack()
-    // }
-
-    navigation.navigate(Screens.Onboarding)
-  }, [])
-
   const openLink = async (url: string) => {
     // Only `https://` is allowed. Update manifest as needed.
     const supported = await Linking.canOpenURL(url)
@@ -105,8 +93,8 @@ const Terms = () => {
   }
 
   return (
-    <SafeAreaView edges={['left', 'right', 'bottom']} style={{ flexGrow: 1 }}>
-      <ScrollView contentContainerStyle={{ padding: 20, paddingBottom: scrollPadding }}>
+    <SafeAreaView edges={['left', 'right', 'bottom']} style={style.safeAreaView}>
+      <ScrollView contentContainerStyle={style.scrollViewContentContainer}>
         {agreedToPreviousTerms && (
           <InfoBox
             notificationType={InfoBoxType.Info}
@@ -461,30 +449,14 @@ const Terms = () => {
         </View>
       </ScrollView>
       {!(store.onboarding.didAgreeToTerms === TermsVersion && store.authentication.didAuthenticate) && (
-        <View
-          style={style.footer}
-          onLayout={(e: LayoutChangeEvent) => {
-            setScrollPadding(e.nativeEvent.layout.height)
-          }}
-        >
+        <View style={style.footer}>
           <Button
             title={t('Global.Accept')}
             accessibilityLabel={t('Global.Accept')}
             testID={testIdWithKey('Accept')}
             onPress={onSubmitPressed}
             buttonType={ButtonType.Primary}
           />
-          {!agreedToPreviousTerms && (
-            <View style={{ marginVertical: 10 }}>
-              <Button
-                title={t('Global.Back')}
-                accessibilityLabel={t('Global.Back')}
-                testID={testIdWithKey('Back')}
-                onPress={onBackPressed}
-                buttonType={ButtonType.Secondary}
-              />
-            </View>
-          )}
         </View>
       )}
     </SafeAreaView>