Fix keyboard navigation on settings page. (#923)

zio/stable
Markus Amalthea Magnuson 2023-07-02 22:18:42 +02:00 committed by GitHub
parent 6768e3ff71
commit 1ea2a94b9b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 42 additions and 17 deletions

View File

@ -172,6 +172,22 @@ export const SettingsScreen = withAuthRequired(
}) })
}, [store]) }, [store])
const onPressAppPasswords = React.useCallback(() => {
navigation.navigate('AppPasswords')
}, [navigation])
const onPressSystemLog = React.useCallback(() => {
navigation.navigate('Log')
}, [navigation])
const onPressStorybook = React.useCallback(() => {
navigation.navigate('Debug')
}, [navigation])
const onPressSavedFeeds = React.useCallback(() => {
navigation.navigate('SavedFeeds')
}, [navigation])
return ( return (
<View style={[s.hContentRegion]} testID="settingsScreen"> <View style={[s.hContentRegion]} testID="settingsScreen">
<ViewHeader title="Settings" /> <ViewHeader title="Settings" />
@ -369,10 +385,13 @@ export const SettingsScreen = withAuthRequired(
Home Feed Preferences Home Feed Preferences
</Text> </Text>
</TouchableOpacity> </TouchableOpacity>
<Link <TouchableOpacity
testID="appPasswordBtn" testID="appPasswordBtn"
style={[styles.linkCard, pal.view, isSwitching && styles.dimmed]} style={[styles.linkCard, pal.view, isSwitching && styles.dimmed]}
href="/settings/app-passwords"> onPress={onPressAppPasswords}
accessibilityRole="button"
accessibilityHint="Open app password settings"
accessibilityLabel="Opens the app password settings page">
<View style={[styles.iconContainer, pal.btn]}> <View style={[styles.iconContainer, pal.btn]}>
<FontAwesomeIcon <FontAwesomeIcon
icon="lock" icon="lock"
@ -382,13 +401,13 @@ export const SettingsScreen = withAuthRequired(
<Text type="lg" style={pal.text}> <Text type="lg" style={pal.text}>
App passwords App passwords
</Text> </Text>
</Link> </TouchableOpacity>
<Link <TouchableOpacity
testID="savedFeedsBtn" testID="savedFeedsBtn"
style={[styles.linkCard, pal.view, isSwitching && styles.dimmed]} style={[styles.linkCard, pal.view, isSwitching && styles.dimmed]}
accessibilityHint="Saved Feeds" accessibilityHint="Saved Feeds"
accessibilityLabel="Opens screen with all saved feeds" accessibilityLabel="Opens screen with all saved feeds"
href="/settings/saved-feeds"> onPress={onPressSavedFeeds}>
<View style={[styles.iconContainer, pal.btn]}> <View style={[styles.iconContainer, pal.btn]}>
<FontAwesomeIcon <FontAwesomeIcon
icon="satellite-dish" icon="satellite-dish"
@ -398,7 +417,7 @@ export const SettingsScreen = withAuthRequired(
<Text type="lg" style={pal.text}> <Text type="lg" style={pal.text}>
Saved Feeds Saved Feeds
</Text> </Text>
</Link> </TouchableOpacity>
<TouchableOpacity <TouchableOpacity
testID="contentLanguagesBtn" testID="contentLanguagesBtn"
style={[styles.linkCard, pal.view, isSwitching && styles.dimmed]} style={[styles.linkCard, pal.view, isSwitching && styles.dimmed]}
@ -459,14 +478,16 @@ export const SettingsScreen = withAuthRequired(
<Text type="xl-bold" style={[pal.text, styles.heading]}> <Text type="xl-bold" style={[pal.text, styles.heading]}>
Developer Tools Developer Tools
</Text> </Text>
<Link <TouchableOpacity
style={[pal.view, styles.linkCardNoIcon]} style={[pal.view, styles.linkCardNoIcon]}
href="/sys/log" onPress={onPressSystemLog}
title="System log"> accessibilityRole="button"
accessibilityHint="Open system log"
accessibilityLabel="Opens the system log page">
<Text type="lg" style={pal.text}> <Text type="lg" style={pal.text}>
System log System log
</Text> </Text>
</Link> </TouchableOpacity>
{isDesktopWeb ? ( {isDesktopWeb ? (
<ToggleButton <ToggleButton
type="default-light" type="default-light"
@ -477,22 +498,26 @@ export const SettingsScreen = withAuthRequired(
) : null} ) : null}
{__DEV__ ? ( {__DEV__ ? (
<> <>
<Link <TouchableOpacity
style={[pal.view, styles.linkCardNoIcon]} style={[pal.view, styles.linkCardNoIcon]}
href="/sys/debug" onPress={onPressStorybook}
title="Debug tools"> accessibilityRole="button"
accessibilityHint="Open storybook page"
accessibilityLabel="Opens the storybook page">
<Text type="lg" style={pal.text}> <Text type="lg" style={pal.text}>
Storybook Storybook
</Text> </Text>
</Link> </TouchableOpacity>
<Link <TouchableOpacity
style={[pal.view, styles.linkCardNoIcon]} style={[pal.view, styles.linkCardNoIcon]}
onPress={onPressResetPreferences} onPress={onPressResetPreferences}
title="Debug tools"> accessibilityRole="button"
accessibilityHint="Reset preferences"
accessibilityLabel="Resets the preferences state">
<Text type="lg" style={pal.text}> <Text type="lg" style={pal.text}>
Reset preferences state Reset preferences state
</Text> </Text>
</Link> </TouchableOpacity>
</> </>
) : null} ) : null}
<TouchableOpacity <TouchableOpacity