[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
zio/stable
Paul Frazee 2023-06-28 13:38:21 -05:00 committed by GitHub
parent df3589f207
commit eb05c4cd6f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 36 additions and 27 deletions

View File

@ -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}>

View File

@ -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,
},
})

View File

@ -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]}>
{showTextInput ? (
<InputIssueDetails
details={details}
setDetails={setDetails}
goBack={goBack}
submitReport={submitReport}
isProcessing={isProcessing}
/>
) : (
<SelectIssue
setShowTextInput={setShowTextInput}
error={error}
issue={issue}
setIssue={setIssue}
submitReport={submitReport}
isProcessing={isProcessing}
/>
)}
</View>
<ScrollView testID="reportPostModal" style={[s.flex1, pal.view]}>
<View style={styles.container}>
{showTextInput ? (
<InputIssueDetails
details={details}
setDetails={setDetails}
goBack={goBack}
submitReport={submitReport}
isProcessing={isProcessing}
/>
) : (
<SelectIssue
setShowTextInput={setShowTextInput}
error={error}
issue={issue}
setIssue={setIssue}
submitReport={submitReport}
isProcessing={isProcessing}
/>
)}
</View>
</ScrollView>
)
}
@ -232,6 +235,10 @@ const SelectIssue = ({
}
const styles = StyleSheet.create({
container: {
paddingHorizontal: 10,
paddingBottom: 40,
},
title: {
textAlign: 'center',
fontWeight: 'bold',

View File

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

View File

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