From 7d0504ad2254be5734ef0af59c6b11d4da24c69c Mon Sep 17 00:00:00 2001 From: Ansh Nanda Date: Tue, 7 Nov 2023 15:51:42 -0800 Subject: [PATCH] make accessibilityLabel localized --- docs/internationalization.md | 2 +- src/view/com/auth/SplashScreen.tsx | 13 +- src/view/com/auth/create/CreateAccount.tsx | 17 +- src/view/com/auth/create/Step1.tsx | 19 +- src/view/com/auth/create/Step2.tsx | 28 +- src/view/com/auth/create/Step3.tsx | 9 +- src/view/com/auth/login/ChooseAccountForm.tsx | 119 +++ .../com/auth/login/ForgotPasswordForm.tsx | 194 ++++ src/view/com/auth/login/Login.tsx | 889 +----------------- src/view/com/auth/login/LoginForm.tsx | 286 ++++++ .../com/auth/login/PasswordUpdatedForm.tsx | 48 + .../com/auth/login/SetNewPasswordForm.tsx | 181 ++++ src/view/com/auth/login/styles.ts | 118 +++ src/view/com/composer/Composer.tsx | 14 +- src/view/com/composer/ExternalEmbed.tsx | 5 +- src/view/com/composer/Prompt.tsx | 7 +- src/view/com/composer/labels/LabelsBtn.tsx | 5 +- src/view/com/composer/photos/Gallery.tsx | 19 +- .../com/composer/photos/OpenCameraBtn.tsx | 5 +- .../com/composer/photos/SelectPhotoBtn.tsx | 5 +- .../select-language/SelectLangBtn.tsx | 9 +- src/view/com/feeds/FeedPage.tsx | 11 +- .../components/ImageDefaultHeader.tsx | 6 +- src/view/com/lightbox/Lightbox.web.tsx | 11 +- src/view/com/modals/AddAppPasswords.tsx | 38 +- src/view/com/modals/AltImage.tsx | 13 +- src/view/com/modals/BirthDateSettings.tsx | 12 +- src/view/com/modals/ChangeEmail.tsx | 43 +- src/view/com/modals/ChangeHandle.tsx | 35 +- src/view/com/modals/Confirm.tsx | 8 +- .../com/modals/ContentFilteringSettings.tsx | 6 +- src/view/com/modals/CreateOrEditList.tsx | 20 +- src/view/com/modals/DeleteAccount.tsx | 39 +- src/view/com/modals/EditImage.tsx | 16 +- src/view/com/modals/EditProfile.tsx | 12 +- src/view/com/modals/LinkWarning.tsx | 15 +- src/view/com/modals/ListAddUser.tsx | 11 +- src/view/com/modals/Repost.tsx | 13 +- src/view/com/modals/SelfLabel.tsx | 27 +- src/view/com/modals/ServerInput.tsx | 10 +- src/view/com/modals/SwitchAccount.tsx | 9 +- src/view/com/modals/UserAddRemoveLists.tsx | 9 +- src/view/com/modals/VerifyEmail.tsx | 27 +- src/view/com/modals/Waitlist.tsx | 25 +- .../com/modals/crop-image/CropImage.web.tsx | 15 +- .../lang-settings/ConfirmLanguagesButton.tsx | 9 +- .../com/modals/report/InputIssueDetails.tsx | 8 +- src/view/com/modals/report/Modal.tsx | 8 +- .../com/modals/report/SendReportButton.tsx | 6 +- src/view/com/notifications/FeedItem.tsx | 11 +- src/view/com/pager/FeedsTabBarMobile.tsx | 7 +- src/view/com/post-thread/PostThread.tsx | 31 +- src/view/com/profile/ProfileHeader.tsx | 23 +- src/view/com/profile/ProfileSubpageHeader.tsx | 5 +- src/view/com/search/HeaderWithInput.tsx | 10 +- src/view/com/util/AccountDropdownBtn.tsx | 6 +- .../com/util/BottomSheetCustomBackdrop.tsx | 3 +- src/view/com/util/UserAvatar.tsx | 5 +- src/view/com/util/UserBanner.tsx | 5 +- src/view/com/util/error/ErrorMessage.tsx | 5 +- src/view/com/util/error/ErrorScreen.tsx | 8 +- src/view/com/util/forms/DropdownButton.tsx | 5 +- src/view/com/util/forms/PostDropdownBtn.tsx | 5 +- src/view/com/util/forms/SearchInput.tsx | 7 +- src/view/com/util/moderation/ContentHider.tsx | 5 +- src/view/com/util/moderation/PostAlerts.tsx | 7 +- src/view/com/util/moderation/PostHider.tsx | 5 +- .../util/moderation/ProfileHeaderAlerts.tsx | 7 +- src/view/com/util/moderation/ScreenHider.tsx | 15 +- .../com/util/post-ctrls/RepostButton.web.tsx | 5 +- src/view/screens/AppPasswords.tsx | 17 +- src/view/screens/Feeds.tsx | 29 +- src/view/screens/Log.tsx | 5 +- src/view/screens/PreferencesHomeFeed.tsx | 51 +- src/view/screens/PreferencesThreads.tsx | 28 +- src/view/screens/Profile.tsx | 6 +- src/view/screens/ProfileFeed.tsx | 20 +- src/view/screens/ProfileList.tsx | 26 +- src/view/screens/Settings.tsx | 100 +- src/view/shell/Drawer.tsx | 29 +- src/view/shell/bottom-bar/BottomBar.tsx | 13 +- src/view/shell/desktop/LeftNav.tsx | 10 +- src/view/shell/desktop/Search.tsx | 11 +- src/view/shell/index.web.tsx | 3 +- 84 files changed, 1682 insertions(+), 1300 deletions(-) create mode 100644 src/view/com/auth/login/ChooseAccountForm.tsx create mode 100644 src/view/com/auth/login/ForgotPasswordForm.tsx create mode 100644 src/view/com/auth/login/LoginForm.tsx create mode 100644 src/view/com/auth/login/PasswordUpdatedForm.tsx create mode 100644 src/view/com/auth/login/SetNewPasswordForm.tsx create mode 100644 src/view/com/auth/login/styles.ts diff --git a/docs/internationalization.md b/docs/internationalization.md index 6dc9afca9f..fd833ffe28 100644 --- a/docs/internationalization.md +++ b/docs/internationalization.md @@ -61,7 +61,7 @@ So the workflow is as follows: 6. Enjoy translated app! ### Common pitfalls -These pitfalls are memoization pitfalls that will cause the components to not re-render when the locale is changed -- causing for stale translations to be shown. +These pitfalls are memoization pitfalls that will cause the components to not re-render when the locale is changed -- causing stale translations to be shown. ```jsx import { msg } from "@lingui/macro"; diff --git a/src/view/com/auth/SplashScreen.tsx b/src/view/com/auth/SplashScreen.tsx index ff1e56360d..05e72a2e68 100644 --- a/src/view/com/auth/SplashScreen.tsx +++ b/src/view/com/auth/SplashScreen.tsx @@ -5,7 +5,8 @@ import {ErrorBoundary} from 'view/com/util/ErrorBoundary' import {s, colors} from 'lib/styles' import {usePalette} from 'lib/hooks/usePalette' import {CenteredView} from '../util/Views' -import {Trans} from '@lingui/macro' +import {Trans, msg} from '@lingui/macro' +import {useLingui} from '@lingui/react' export const SplashScreen = ({ onPressSignin, @@ -15,6 +16,8 @@ export const SplashScreen = ({ onPressCreateAccount: () => void }) => { const pal = usePalette('default') + const {_} = useLingui() + return ( @@ -24,7 +27,7 @@ export const SplashScreen = ({ Bluesky - See what's next + See what's next @@ -33,10 +36,10 @@ export const SplashScreen = ({ style={[styles.btn, {backgroundColor: colors.blue3}]} onPress={onPressCreateAccount} accessibilityRole="button" - accessibilityLabel="Create new account" + accessibilityLabel={_(msg`Create new account`)} accessibilityHint="Opens flow to create a new Bluesky account"> - Create a new account + Create a new account Sign In diff --git a/src/view/com/auth/create/CreateAccount.tsx b/src/view/com/auth/create/CreateAccount.tsx index 1d64cc0670..712871a5f1 100644 --- a/src/view/com/auth/create/CreateAccount.tsx +++ b/src/view/com/auth/create/CreateAccount.tsx @@ -15,6 +15,8 @@ import {s} from 'lib/styles' import {useStores} from 'state/index' import {CreateAccountModel} from 'state/models/ui/create-account' import {usePalette} from 'lib/hooks/usePalette' +import {msg, Trans} from '@lingui/macro' +import {useLingui} from '@lingui/react' import {Step1} from './Step1' import {Step2} from './Step2' @@ -29,6 +31,7 @@ export const CreateAccount = observer(function CreateAccountImpl({ const pal = usePalette('default') const store = useStores() const model = React.useMemo(() => new CreateAccountModel(store), [store]) + const {_} = useLingui() React.useEffect(() => { screen('CreateAccount') @@ -71,8 +74,8 @@ export const CreateAccount = observer(function CreateAccountImpl({ return ( + title={_(msg`Create Account`)} + description={_(msg`We're so excited to have you join us!`)}> @@ -86,7 +89,7 @@ export const CreateAccount = observer(function CreateAccountImpl({ testID="backBtn" accessibilityRole="button"> - Back + Back @@ -99,7 +102,7 @@ export const CreateAccount = observer(function CreateAccountImpl({ ) : ( - Next + Next )} @@ -108,18 +111,18 @@ export const CreateAccount = observer(function CreateAccountImpl({ testID="retryConnectBtn" onPress={onPressRetryConnect} accessibilityRole="button" - accessibilityLabel="Retry" + accessibilityLabel={_(msg`Retry`)} accessibilityHint="Retries account creation" accessibilityLiveRegion="polite"> - Retry + Retry ) : model.isFetchingServiceDescription ? ( <> - Connecting... + Connecting... ) : undefined} diff --git a/src/view/com/auth/create/Step1.tsx b/src/view/com/auth/create/Step1.tsx index cdd5cb21d8..7e3ea062dc 100644 --- a/src/view/com/auth/create/Step1.tsx +++ b/src/view/com/auth/create/Step1.tsx @@ -12,6 +12,8 @@ import {HelpTip} from '../util/HelpTip' import {TextInput} from '../util/TextInput' import {Button} from 'view/com/util/forms/Button' import {ErrorMessage} from 'view/com/util/error/ErrorMessage' +import {msg, Trans} from '@lingui/macro' +import {useLingui} from '@lingui/react' import {LOCAL_DEV_SERVICE, STAGING_SERVICE, PROD_SERVICE} from 'state/index' import {LOGIN_INCLUDE_DEV_SERVERS} from 'lib/build-flags' @@ -27,6 +29,7 @@ export const Step1 = observer(function Step1Impl({ }) { const pal = usePalette('default') const [isDefaultSelected, setIsDefaultSelected] = React.useState(true) + const {_} = useLingui() const onPressDefault = React.useCallback(() => { setIsDefaultSelected(true) @@ -63,9 +66,9 @@ export const Step1 = observer(function Step1Impl({ return ( - + - This is the service that keeps you online. + This is the service that keeps you online. - Content Warning + Content Warning - This {screenDescription} has been flagged:{' '} + This {screenDescription} has been flagged: {desc.name} @@ -79,10 +82,10 @@ export function ScreenHider({ }) }} accessibilityRole="button" - accessibilityLabel="Learn more about this warning" + accessibilityLabel={_(msg`Learn more about this warning`)} accessibilityHint=""> - Learn More + Learn More @@ -99,7 +102,7 @@ export function ScreenHider({ }} style={styles.btn}> - Go back + Go back {!moderation.noOverride && ( @@ -108,7 +111,7 @@ export function ScreenHider({ onPress={() => setOverride(v => !v)} style={styles.btn}> - Show anyway + Show anyway )} diff --git a/src/view/com/util/post-ctrls/RepostButton.web.tsx b/src/view/com/util/post-ctrls/RepostButton.web.tsx index 57f544d416..70f7229d4c 100644 --- a/src/view/com/util/post-ctrls/RepostButton.web.tsx +++ b/src/view/com/util/post-ctrls/RepostButton.web.tsx @@ -10,6 +10,8 @@ import { DropdownItem as NativeDropdownItem, } from '../forms/NativeDropdown' import {EventStopper} from '../EventStopper' +import {useLingui} from '@lingui/react' +import {msg} from '@lingui/macro' interface Props { isReposted: boolean @@ -28,6 +30,7 @@ export const RepostButton = ({ onQuote, }: Props) => { const theme = useTheme() + const {_} = useLingui() const defaultControlColor = React.useMemo( () => ({ @@ -63,7 +66,7 @@ export const RepostButton = ({ export const AppPasswords = withAuthRequired( @@ -50,8 +52,10 @@ export const AppPasswords = withAuthRequired( - You have not created any app passwords yet. You can create one by - pressing the button below. + + You have not created any app passwords yet. You can create one + by pressing the button below. + {!isTabletOrDesktop && } @@ -141,8 +145,10 @@ function AppPasswordsHeader() { pal.text, isTabletOrDesktop && styles.descriptionDesktop, ]}> - Use app passwords to login to other Bluesky clients without giving full - access to your account or password. + + Use app passwords to login to other Bluesky clients without giving + full access to your account or password. + ) @@ -159,6 +165,7 @@ function AppPassword({ }) { const pal = usePalette('default') const store = useStores() + const {_} = useLingui() const onDelete = React.useCallback(async () => { store.shell.openModal({ @@ -183,7 +190,7 @@ function AppPassword({ style={[styles.item, pal.border]} onPress={onDelete} accessibilityRole="button" - accessibilityLabel="Delete app password" + accessibilityLabel={_(msg`Delete app password`)} accessibilityHint=""> diff --git a/src/view/screens/Feeds.tsx b/src/view/screens/Feeds.tsx index 8cc8227b31..ecfe65a602 100644 --- a/src/view/screens/Feeds.tsx +++ b/src/view/screens/Feeds.tsx @@ -27,12 +27,15 @@ import {FeedSourceModel} from 'state/models/content/feed-source' import {FlatList} from 'view/com/util/Views' import {useFocusEffect} from '@react-navigation/native' import {FeedSourceCard} from 'view/com/feeds/FeedSourceCard' +import {Trans, msg} from '@lingui/macro' +import {useLingui} from '@lingui/react' type Props = NativeStackScreenProps export const FeedsScreen = withAuthRequired( observer(function FeedsScreenImpl({}: Props) { const pal = usePalette('default') const store = useStores() + const {_} = useLingui() const {isMobile, isTabletOrDesktop} = useWebMediaQueries() const myFeeds = store.me.myFeeds const [query, setQuery] = React.useState('') @@ -86,12 +89,12 @@ export const FeedsScreen = withAuthRequired( href="/settings/saved-feeds" hitSlop={10} accessibilityRole="button" - accessibilityLabel="Edit Saved Feeds" + accessibilityLabel={_(msg`Edit Saved Feeds`)} accessibilityHint="Opens screen to edit Saved Feeds"> ) - }, [pal]) + }, [pal, _]) const onRefresh = React.useCallback(() => { myFeeds.refresh() @@ -122,11 +125,11 @@ export const FeedsScreen = withAuthRequired( }, ]}> - My Feeds + My Feeds @@ -159,7 +162,7 @@ export const FeedsScreen = withAuthRequired( }, ]}> - Discover new feeds + Discover new feeds {!isMobile && ( - No results found for "{query}" + No results found for "{query}" ) } return null }, - [isMobile, pal, query, onChangeQuery, onPressCancelSearch, onSubmitQuery], + [ + isMobile, + pal, + query, + onChangeQuery, + onPressCancelSearch, + onSubmitQuery, + _, + ], ) return ( @@ -247,7 +258,7 @@ export const FeedsScreen = withAuthRequired( onPress={onPressCompose} icon={} accessibilityRole="button" - accessibilityLabel="New post" + accessibilityLabel={_(msg`New post`)} accessibilityHint="" /> @@ -287,7 +298,7 @@ function SavedFeed({feed}: {feed: FeedSourceModel}) { {feed.error && ( - Feed offline + Feed offline )} diff --git a/src/view/screens/Log.tsx b/src/view/screens/Log.tsx index 6ae61888d2..fc8f7868b4 100644 --- a/src/view/screens/Log.tsx +++ b/src/view/screens/Log.tsx @@ -12,6 +12,8 @@ import {Text} from '../com/util/text/Text' import {usePalette} from 'lib/hooks/usePalette' import {getEntries} from '#/logger/logDump' import {ago} from 'lib/strings/time' +import {useLingui} from '@lingui/react' +import {msg} from '@lingui/macro' export const LogScreen = observer(function Log({}: NativeStackScreenProps< CommonNavigatorParams, @@ -19,6 +21,7 @@ export const LogScreen = observer(function Log({}: NativeStackScreenProps< >) { const pal = usePalette('default') const store = useStores() + const {_} = useLingui() const [expanded, setExpanded] = React.useState([]) useFocusEffect( @@ -47,7 +50,7 @@ export const LogScreen = observer(function Log({}: NativeStackScreenProps< {entry.level === 'debug' ? ( diff --git a/src/view/screens/PreferencesHomeFeed.tsx b/src/view/screens/PreferencesHomeFeed.tsx index 4676be56c2..da99dc16f7 100644 --- a/src/view/screens/PreferencesHomeFeed.tsx +++ b/src/view/screens/PreferencesHomeFeed.tsx @@ -14,7 +14,8 @@ import {CommonNavigatorParams, NativeStackScreenProps} from 'lib/routes/types' import {ViewHeader} from 'view/com/util/ViewHeader' import {CenteredView} from 'view/com/util/Views' import debounce from 'lodash.debounce' -import {Trans} from '@lingui/macro' +import {Trans, msg} from '@lingui/macro' +import {useLingui} from '@lingui/react' function RepliesThresholdInput({enabled}: {enabled: boolean}) { const store = useStores() @@ -67,6 +68,7 @@ export const PreferencesHomeFeed = observer(function PreferencesHomeFeedImpl({ }: Props) { const pal = usePalette('default') const store = useStores() + const {_} = useLingui() const {isTabletOrDesktop} = useWebMediaQueries() return ( @@ -85,7 +87,7 @@ export const PreferencesHomeFeed = observer(function PreferencesHomeFeedImpl({ isTabletOrDesktop && {paddingTop: 20, paddingBottom: 20}, ]}> - Fine-tune the content you see on your home screen. + Fine-tune the content you see on your home screen. @@ -93,10 +95,12 @@ export const PreferencesHomeFeed = observer(function PreferencesHomeFeedImpl({ - Show Replies + Show Replies - Set this setting to "No" to hide all replies from your feed. + + Set this setting to "No" to hide all replies from your feed. + - Reply Filters + Reply Filters - Enable this setting to only see replies between people you follow. + + Enable this setting to only see replies between people you + follow. + - Adjust the number of likes a reply must have to be shown in your - feed. + + Adjust the number of likes a reply must have to be shown in your + feed. + - Show Reposts + Show Reposts - Set this setting to "No" to hide all reposts from your feed. + + Set this setting to "No" to hide all reposts from your feed. + - Show Quote Posts + Show Quote Posts - Set this setting to "No" to hide all quote posts from your feed. - Reposts will still be visible. + + Set this setting to "No" to hide all quote posts from your feed. + Reposts will still be visible. + - Show - Posts from My Feeds + + Show Posts from My Feeds - Set this setting to "Yes" to show samples of your saved feeds in - your following feed. This is an experimental feature. + + Set this setting to "Yes" to show samples of your saved feeds in + your following feed. This is an experimental feature. + Done diff --git a/src/view/screens/PreferencesThreads.tsx b/src/view/screens/PreferencesThreads.tsx index c90c697ace..8a2db13ce2 100644 --- a/src/view/screens/PreferencesThreads.tsx +++ b/src/view/screens/PreferencesThreads.tsx @@ -12,7 +12,8 @@ import {RadioGroup} from 'view/com/util/forms/RadioGroup' import {CommonNavigatorParams, NativeStackScreenProps} from 'lib/routes/types' import {ViewHeader} from 'view/com/util/ViewHeader' import {CenteredView} from 'view/com/util/Views' -import {Trans} from '@lingui/macro' +import {Trans, msg} from '@lingui/macro' +import {useLingui} from '@lingui/react' type Props = NativeStackScreenProps export const PreferencesThreads = observer(function PreferencesThreadsImpl({ @@ -20,6 +21,7 @@ export const PreferencesThreads = observer(function PreferencesThreadsImpl({ }: Props) { const pal = usePalette('default') const store = useStores() + const {_} = useLingui() const {isTabletOrDesktop} = useWebMediaQueries() return ( @@ -38,7 +40,7 @@ export const PreferencesThreads = observer(function PreferencesThreadsImpl({ isTabletOrDesktop && {paddingTop: 20, paddingBottom: 20}, ]}> - Fine-tune the discussion threads. + Fine-tune the discussion threads. @@ -46,10 +48,10 @@ export const PreferencesThreads = observer(function PreferencesThreadsImpl({ - Sort Replies + Sort Replies - Sort replies to the same post by: + Sort replies to the same post by: - Prioritize Your Follows + Prioritize Your Follows - Show replies by people you follow before all other replies. + + Show replies by people you follow before all other replies. + - Threaded - Mode + {' '} + Threaded Mode - Set this setting to "Yes" to show replies in a threaded view. This - is an experimental feature. + + Set this setting to "Yes" to show replies in a threaded view. + This is an experimental feature. + Done diff --git a/src/view/screens/Profile.tsx b/src/view/screens/Profile.tsx index 993d7b3e47..1d738bfd32 100644 --- a/src/view/screens/Profile.tsx +++ b/src/view/screens/Profile.tsx @@ -30,13 +30,15 @@ import {FeedSourceModel} from 'state/models/content/feed-source' import {useSetTitle} from 'lib/hooks/useSetTitle' import {combinedDisplayName} from 'lib/strings/display-names' import {logger} from '#/logger' -import {Trans} from '@lingui/macro' +import {Trans, msg} from '@lingui/macro' +import {useLingui} from '@lingui/react' type Props = NativeStackScreenProps export const ProfileScreen = withAuthRequired( observer(function ProfileScreenImpl({route}: Props) { const store = useStores() const {screen, track} = useAnalytics() + const {_} = useLingui() const viewSelectorRef = React.useRef(null) const name = route.params.name === 'me' ? store.me.did : route.params.name @@ -299,7 +301,7 @@ export const ProfileScreen = withAuthRequired( onPress={onPressCompose} icon={} accessibilityRole="button" - accessibilityLabel="New post" + accessibilityLabel={_(msg`New post`)} accessibilityHint="" /> diff --git a/src/view/screens/ProfileFeed.tsx b/src/view/screens/ProfileFeed.tsx index 6a3da665e3..051c0ab9fe 100644 --- a/src/view/screens/ProfileFeed.tsx +++ b/src/view/screens/ProfileFeed.tsx @@ -41,6 +41,8 @@ import {sanitizeHandle} from 'lib/strings/handles' import {makeProfileLink} from 'lib/routes/links' import {ComposeIcon2} from 'lib/icons' import {logger} from '#/logger' +import {Trans, msg} from '@lingui/macro' +import {useLingui} from '@lingui/react' const SECTION_TITLES = ['Posts', 'About'] @@ -53,6 +55,7 @@ export const ProfileFeedScreen = withAuthRequired( observer(function ProfileFeedScreenImpl(props: Props) { const pal = usePalette('default') const store = useStores() + const {_} = useLingui() const navigation = useNavigation() const {name: handleOrDid} = props.route.params @@ -91,7 +94,7 @@ export const ProfileFeedScreen = withAuthRequired( - Could not load feed + Could not load feed {error} @@ -100,12 +103,12 @@ export const ProfileFeedScreen = withAuthRequired( @@ -134,6 +137,7 @@ export const ProfileFeedScreenInner = observer( const pal = usePalette('default') const store = useStores() const {track} = useAnalytics() + const {_} = useLingui() const feedSectionRef = React.useRef(null) const {rkey, name: handleOrDid} = route.params const uri = useMemo( @@ -305,7 +309,7 @@ export const ProfileFeedScreenInner = observer( } accessibilityRole="button" - accessibilityLabel="New post" + accessibilityLabel={_(msg`New post`)} accessibilityHint="" /> @@ -439,6 +444,7 @@ const AboutSection = observer(function AboutPageImpl({ onToggleLiked: () => void }) { const pal = usePalette('default') + const {_} = useLingui() if (!feedInfo) { return @@ -463,14 +469,14 @@ const AboutSection = observer(function AboutPageImpl({ /> ) : ( - No description + No description )} diff --git a/src/view/screens/Settings.tsx b/src/view/screens/Settings.tsx index 3f498ba85a..2721530b3c 100644 --- a/src/view/screens/Settings.tsx +++ b/src/view/screens/Settings.tsx @@ -52,12 +52,15 @@ import {logger} from '#/logger' // -prf import {useDebugHeaderSetting} from 'lib/api/debug-appview-proxy-header' import {STATUS_PAGE_URL} from 'lib/constants' +import {Trans, msg} from '@lingui/macro' +import {useLingui} from '@lingui/react' type Props = NativeStackScreenProps export const SettingsScreen = withAuthRequired( observer(function Settings({}: Props) { const pal = usePalette('default') const store = useStores() + const {_} = useLingui() const navigation = useNavigation() const {isMobile} = useWebMediaQueries() const {screen, track} = useAnalytics() @@ -195,7 +198,7 @@ export const SettingsScreen = withAuthRequired( {store.session.currentSession !== undefined ? ( <> - Account + Account @@ -216,20 +219,20 @@ export const SettingsScreen = withAuthRequired( store.shell.openModal({name: 'change-email'})}> - Change + Change - Birthday:{' '} + Birthday: store.shell.openModal({name: 'birth-date-settings'}) }> - Show + Show @@ -239,7 +242,7 @@ export const SettingsScreen = withAuthRequired( ) : null} - Signed in as + Signed in as @@ -268,10 +271,10 @@ export const SettingsScreen = withAuthRequired( testID="signOutBtn" onPress={isSwitching ? undefined : onPressSignout} accessibilityRole="button" - accessibilityLabel="Sign out" + accessibilityLabel={_(msg`Sign out`)} accessibilityHint={`Signs ${store.me.displayName} out of Bluesky`}> - Sign out + Sign out @@ -307,7 +310,7 @@ export const SettingsScreen = withAuthRequired( style={[styles.linkCard, pal.view, isSwitching && styles.dimmed]} onPress={isSwitching ? undefined : onPressAddAccount} accessibilityRole="button" - accessibilityLabel="Add account" + accessibilityLabel={_(msg`Add account`)} accessibilityHint="Create a new Bluesky account"> - Add account + Add account - Invite a Friend + Invite a Friend - Accessibility + Accessibility - Appearance + Appearance @@ -401,7 +404,7 @@ export const SettingsScreen = withAuthRequired( - Basics + Basics + accessibilityLabel={_(msg`Opens the home feed preferences`)}> - Home Feed Preferences + Home Feed Preferences + accessibilityLabel={_(msg`Opens the threads preferences`)}> - Thread Preferences + Thread Preferences - My Saved Feeds + My Saved Feeds + accessibilityLabel={_(msg`Opens configurable language settings`)}> - Languages + Languages + accessibilityLabel={_(msg`Opens moderation settings`)}> - Moderation + Moderation - Advanced + Advanced + accessibilityLabel={_(msg`Opens the app password settings page`)}> - App passwords + App passwords - Change handle + Change handle - Danger Zone + Danger Zone - Delete my account… + Delete my account… - Developer Tools + Developer Tools + accessibilityLabel={_(msg`Opens the system log page`)}> - System log + System log {__DEV__ ? ( @@ -574,9 +577,9 @@ export const SettingsScreen = withAuthRequired( onPress={onPressStorybook} accessibilityRole="button" accessibilityHint="Open storybook page" - accessibilityLabel="Opens the storybook page"> + accessibilityLabel={_(msg`Opens the storybook page`)}> - Storybook + Storybook + accessibilityLabel={_(msg`Resets the preferences state`)}> - Reset preferences state + Reset preferences state + accessibilityLabel={_(msg`Resets the onboarding state`)}> - Reset onboarding state + Reset onboarding state @@ -606,7 +609,9 @@ export const SettingsScreen = withAuthRequired( accessibilityRole="button" onPress={onPressBuildInfo}> - Build version {AppInfo.appVersion} {AppInfo.updateChannel} + + Build version {AppInfo.appVersion} {AppInfo.updateChannel} + @@ -616,7 +621,7 @@ export const SettingsScreen = withAuthRequired( accessibilityRole="button" onPress={onPressStatusPage}> - Status page + Status page @@ -632,6 +637,7 @@ const EmailConfirmationNotice = observer( const pal = usePalette('default') const palInverted = usePalette('inverted') const store = useStores() + const {_} = useLingui() const {isMobile} = useWebMediaQueries() if (!store.session.emailNeedsConfirmation) { @@ -641,7 +647,7 @@ const EmailConfirmationNotice = observer( return ( - Verify email + Verify email store.shell.openModal({name: 'verify-email'})}> - Verify My Email + Verify My Email - Protect your account by verifying your email. + Protect your account by verifying your email. diff --git a/src/view/shell/Drawer.tsx b/src/view/shell/Drawer.tsx index c2d307f598..ee3c2a9379 100644 --- a/src/view/shell/Drawer.tsx +++ b/src/view/shell/Drawer.tsx @@ -43,11 +43,14 @@ import {NavigationProp} from 'lib/routes/types' import {useNavigationTabState} from 'lib/hooks/useNavigationTabState' import {isWeb} from 'platform/detection' import {formatCount, formatCountShortOnly} from 'view/com/util/numeric/format' +import {Trans, msg} from '@lingui/macro' +import {useLingui} from '@lingui/react' export const DrawerContent = observer(function DrawerContentImpl() { const theme = useTheme() const pal = usePalette('default') const store = useStores() + const {_} = useLingui() const navigation = useNavigation() const {track} = useAnalytics() const {isAtHome, isAtSearch, isAtFeeds, isAtNotifications, isAtMyProfile} = @@ -155,7 +158,7 @@ export const DrawerContent = observer(function DrawerContentImpl() { } label="Lists" - accessibilityLabel="Lists" + accessibilityLabel={_(msg`Lists`)} accessibilityHint="" onPress={onPressLists} /> } label="Moderation" - accessibilityLabel="Moderation" + accessibilityLabel={_(msg`Moderation`)} accessibilityHint="" onPress={onPressModeration} /> @@ -319,7 +322,7 @@ export const DrawerContent = observer(function DrawerContentImpl() { ) } label="Profile" - accessibilityLabel="Profile" + accessibilityLabel={_(msg`Profile`)} accessibilityHint="" onPress={onPressProfile} /> @@ -332,7 +335,7 @@ export const DrawerContent = observer(function DrawerContentImpl() { /> } label="Settings" - accessibilityLabel="Settings" + accessibilityLabel={_(msg`Settings`)} accessibilityHint="" onPress={onPressSettings} /> @@ -343,7 +346,7 @@ export const DrawerContent = observer(function DrawerContentImpl() { - Feedback + Feedback - Help + Help diff --git a/src/view/shell/bottom-bar/BottomBar.tsx b/src/view/shell/bottom-bar/BottomBar.tsx index c4e3790ad6..4459bf695d 100644 --- a/src/view/shell/bottom-bar/BottomBar.tsx +++ b/src/view/shell/bottom-bar/BottomBar.tsx @@ -24,6 +24,8 @@ import {styles} from './BottomBarStyles' import {useMinimalShellMode} from 'lib/hooks/useMinimalShellMode' import {useNavigationTabState} from 'lib/hooks/useNavigationTabState' import {UserAvatar} from 'view/com/util/UserAvatar' +import {useLingui} from '@lingui/react' +import {msg} from '@lingui/macro' type TabOptions = 'Home' | 'Search' | 'Notifications' | 'MyProfile' | 'Feeds' @@ -32,6 +34,7 @@ export const BottomBar = observer(function BottomBarImpl({ }: BottomTabBarProps) { const store = useStores() const pal = usePalette('default') + const {_} = useLingui() const safeAreaInsets = useSafeAreaInsets() const {track} = useAnalytics() const {isAtHome, isAtSearch, isAtFeeds, isAtNotifications, isAtMyProfile} = @@ -104,7 +107,7 @@ export const BottomBar = observer(function BottomBarImpl({ } onPress={onPressHome} accessibilityRole="tab" - accessibilityLabel="Home" + accessibilityLabel={_(msg`Home`)} accessibilityHint="" /> diff --git a/src/view/shell/desktop/LeftNav.tsx b/src/view/shell/desktop/LeftNav.tsx index 39271605cd..b85823b6f8 100644 --- a/src/view/shell/desktop/LeftNav.tsx +++ b/src/view/shell/desktop/LeftNav.tsx @@ -39,6 +39,8 @@ import {getCurrentRoute, isTab, isStateAtTabRoot} from 'lib/routes/helpers' import {NavigationProp, CommonNavigatorParams} from 'lib/routes/types' import {router} from '../../../routes' import {makeProfileLink} from 'lib/routes/links' +import {useLingui} from '@lingui/react' +import {Trans, msg} from '@lingui/macro' const ProfileCard = observer(function ProfileCardImpl() { const store = useStores() @@ -67,6 +69,7 @@ function BackBtn() { const {isTablet} = useWebMediaQueries() const pal = usePalette('default') const navigation = useNavigation() + const {_} = useLingui() const shouldShow = useNavigationState(state => !isStateAtTabRoot(state)) const onPressBack = React.useCallback(() => { @@ -86,7 +89,7 @@ function BackBtn() { onPress={onPressBack} style={styles.backBtn} accessibilityRole="button" - accessibilityLabel="Go back" + accessibilityLabel={_(msg`Go back`)} accessibilityHint=""> { @@ -222,7 +226,7 @@ function ComposeBtn() { style={[styles.newPostBtn]} onPress={onPressCompose} accessibilityRole="button" - accessibilityLabel="New post" + accessibilityLabel={_(msg`New post`)} accessibilityHint=""> - New Post + New Post ) diff --git a/src/view/shell/desktop/Search.tsx b/src/view/shell/desktop/Search.tsx index caecea4a8b..f54858b8a1 100644 --- a/src/view/shell/desktop/Search.tsx +++ b/src/view/shell/desktop/Search.tsx @@ -9,10 +9,13 @@ import {MagnifyingGlassIcon2} from 'lib/icons' import {NavigationProp} from 'lib/routes/types' import {ProfileCard} from 'view/com/profile/ProfileCard' import {Text} from 'view/com/util/text/Text' +import {Trans, msg} from '@lingui/macro' +import {useLingui} from '@lingui/react' export const DesktopSearch = observer(function DesktopSearch() { const store = useStores() const pal = usePalette('default') + const {_} = useLingui() const textInput = React.useRef(null) const [isInputFocused, setIsInputFocused] = React.useState(false) const [query, setQuery] = React.useState('') @@ -75,7 +78,7 @@ export const DesktopSearch = observer(function DesktopSearch() { onChangeText={onChangeQuery} onSubmitEditing={onSubmit} accessibilityRole="search" - accessibilityLabel="Search" + accessibilityLabel={_(msg`Search`)} accessibilityHint="" /> {query ? ( @@ -83,11 +86,11 @@ export const DesktopSearch = observer(function DesktopSearch() { - Cancel + Cancel @@ -106,7 +109,7 @@ export const DesktopSearch = observer(function DesktopSearch() { ) : ( - No results found for {autocompleteView.prefix} + No results found for {autocompleteView.prefix} )} diff --git a/src/view/shell/index.web.tsx b/src/view/shell/index.web.tsx index 3f2fed69b9..49e513532d 100644 --- a/src/view/shell/index.web.tsx +++ b/src/view/shell/index.web.tsx @@ -17,6 +17,7 @@ import {BottomBarWeb} from './bottom-bar/BottomBarWeb' import {useNavigation} from '@react-navigation/native' import {NavigationProp} from 'lib/routes/types' import {useAuxClick} from 'lib/hooks/useAuxClick' +import {t} from '@lingui/macro' const ShellInner = observer(function ShellInnerImpl() { const store = useStores() @@ -61,7 +62,7 @@ const ShellInner = observer(function ShellInnerImpl() { store.shell.closeDrawer()} style={styles.drawerMask} - accessibilityLabel="Close navigation footer" + accessibilityLabel={t`Close navigation footer`} accessibilityHint="Closes bottom navigation bar">