[APP-692] Accessibility font-scaling fixes (#922)

* Fix: enable font scaling in the composer text input

* Fix: cancel button in search no longer wraps

* Fix: report modals no longer clip off the bottom with scaled fonts

* Fix scrolling on android

* Allow wrapping in dropdown items until we can handle proper sizing

src/view/com/composer/text-input/TextInput.tsx

@@ -200,6 +200,7 @@ export const TextInput = forwardRef(
           placeholderTextColor={pal.colors.textLight}
           keyboardAppearance={theme.colorScheme}
           autoFocus={true}
+          allowFontScaling
           multiline
           style={[pal.text, styles.textInput, styles.textInputFormatting]}
           {...props}>

src/view/com/modals/report/ReportAccount.tsx

@@ -1,5 +1,6 @@
 import React, {useState, useMemo} from 'react'
 import {TouchableOpacity, StyleSheet, View} from 'react-native'
+import {ScrollView} from 'react-native-gesture-handler'
 import {ComAtprotoModerationDefs} from '@atproto/api'
 import {useStores} from 'state/index'
 import {s} from 'lib/styles'
@@ -13,7 +14,7 @@ import {isDesktopWeb} from 'platform/detection'
 import {SendReportButton} from './SendReportButton'
 import {InputIssueDetails} from './InputIssueDetails'
 
-export const snapPoints = [400]
+export const snapPoints = [500]
 
 export function Component({did}: {did: string}) {
   const store = useStores()
@@ -56,7 +57,9 @@ export function Component({did}: {did: string}) {
   }
 
   return (
-    <View testID="reportAccountModal" style={[styles.container, pal.view]}>
+    <ScrollView
+      testID="reportAccountModal"
+      style={[styles.container, pal.view]}>
       {showDetailsInput ? (
         <InputIssueDetails
           submitReport={onPress}
@@ -74,7 +77,7 @@ export function Component({did}: {did: string}) {
           goToDetails={goToDetails}
         />
       )}
-    </View>
+    </ScrollView>
   )
 }
 
@@ -176,5 +179,6 @@ const styles = StyleSheet.create({
   addDetailsBtn: {
     padding: 14,
     alignSelf: 'center',
+    marginBottom: 40,
   },
 })

src/view/com/modals/report/ReportPost.tsx

@@ -1,5 +1,6 @@
 import React, {useState, useMemo} from 'react'
 import {Linking, StyleSheet, TouchableOpacity, View} from 'react-native'
+import {ScrollView} from 'react-native-gesture-handler'
 import {ComAtprotoModerationDefs} from '@atproto/api'
 import {useStores} from 'state/index'
 import {s} from 'lib/styles'
@@ -66,26 +67,28 @@ export function Component({
   }
 
   return (
-    <View testID="reportPostModal" style={[s.flex1, s.pl10, s.pr10, pal.view]}>
+    <ScrollView testID="reportPostModal" style={[s.flex1, pal.view]}>
-      {showTextInput ? (
+      <View style={styles.container}>
-        <InputIssueDetails
+        {showTextInput ? (
-          details={details}
+          <InputIssueDetails
-          setDetails={setDetails}
+            details={details}
-          goBack={goBack}
+            setDetails={setDetails}
-          submitReport={submitReport}
+            goBack={goBack}
-          isProcessing={isProcessing}
+            submitReport={submitReport}
-        />
+            isProcessing={isProcessing}
-      ) : (
+          />
-        <SelectIssue
+        ) : (
-          setShowTextInput={setShowTextInput}
+          <SelectIssue
-          error={error}
+            setShowTextInput={setShowTextInput}
-          issue={issue}
+            error={error}
-          setIssue={setIssue}
+            issue={issue}
-          submitReport={submitReport}
+            setIssue={setIssue}
-          isProcessing={isProcessing}
+            submitReport={submitReport}
-        />
+            isProcessing={isProcessing}
-      )}
+          />
-    </View>
+        )}
+      </View>
+    </ScrollView>
   )
 }
 
@@ -232,6 +235,10 @@ const SelectIssue = ({
 }
 
 const styles = StyleSheet.create({
+  container: {
+    paddingHorizontal: 10,
+    paddingBottom: 40,
+  },
   title: {
     textAlign: 'center',
     fontWeight: 'bold',

src/view/com/search/HeaderWithInput.tsx

@@ -150,7 +150,6 @@ const styles = StyleSheet.create({
     fontSize: 17,
   },
   headerCancelBtn: {
-    width: 60,
     paddingLeft: 10,
   },
 

src/view/com/util/forms/DropdownButton.tsx

@@ -344,9 +344,7 @@ const DropdownItems = ({
                     color={pal.text.color as string}
                   />
                 )}
-                <Text style={[styles.label, pal.text]} numberOfLines={1}>
+                <Text style={[styles.label, pal.text]}>{item.label}</Text>
-                  {item.label}
-                </Text>
               </TouchableOpacity>
             )
           } else if (isSep(item)) {