[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 sizingzio/stable
parent
df3589f207
commit
eb05c4cd6f
|
@ -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}>
|
||||
|
|
|
@ -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,
|
||||
},
|
||||
})
|
||||
|
|
|
@ -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',
|
||||
|
|
|
@ -150,7 +150,6 @@ const styles = StyleSheet.create({
|
|||
fontSize: 17,
|
||||
},
|
||||
headerCancelBtn: {
|
||||
width: 60,
|
||||
paddingLeft: 10,
|
||||
},
|
||||
|
||||
|
|
|
@ -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)) {
|
||||
|
|
Loading…
Reference in New Issue