make accessibilityLabel localized

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";

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 (
     <CenteredView style={[styles.container, pal.view]}>
       <SafeAreaView testID="noSessionView" style={styles.container}>
@@ -24,7 +27,7 @@ export const SplashScreen = ({
               <Trans>Bluesky</Trans>
             </Text>
             <Text style={[styles.subtitle, pal.textLight]}>
-              See what's next
+              <Trans>See what's next</Trans>
             </Text>
           </View>
           <View testID="signinOrCreateAccount" style={styles.btns}>
@@ -33,18 +36,18 @@ 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">
               <Text style={[s.white, styles.btnLabel]}>
-                Create a new account
+                <Trans>Create a new account</Trans>
               </Text>
             </TouchableOpacity>
             <TouchableOpacity
               testID="signInButton"
               style={[styles.btn, pal.btn]}
               onPress={onPressSignin}
               accessibilityRole="button"
-              accessibilityLabel="Sign in"
+              accessibilityLabel={_(msg`Sign in`)}
               accessibilityHint="Opens flow to sign into your existing Bluesky account">
               <Text style={[pal.text, styles.btnLabel]}>
                 <Trans>Sign In</Trans>

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 (
     <LoggedOutLayout
       leadin={`Step ${model.step}`}
-      title="Create Account"
-      description="We're so excited to have you join us!">
+      title={_(msg`Create Account`)}
+      description={_(msg`We're so excited to have you join us!`)}>
       <ScrollView testID="createAccount" style={pal.view}>
         <KeyboardAvoidingView behavior="padding">
           <View style={styles.stepContainer}>
@@ -86,7 +89,7 @@ export const CreateAccount = observer(function CreateAccountImpl({
               testID="backBtn"
               accessibilityRole="button">
               <Text type="xl" style={pal.link}>
-                Back
+                <Trans>Back</Trans>
               </Text>
             </TouchableOpacity>
             <View style={s.flex1} />
@@ -99,7 +102,7 @@ export const CreateAccount = observer(function CreateAccountImpl({
                   <ActivityIndicator />
                 ) : (
                   <Text type="xl-bold" style={[pal.link, s.pr5]}>
-                    Next
+                    <Trans>Next</Trans>
                   </Text>
                 )}
               </TouchableOpacity>
@@ -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">
                 <Text type="xl-bold" style={[pal.link, s.pr5]}>
-                  Retry
+                  <Trans>Retry</Trans>
                 </Text>
               </TouchableOpacity>
             ) : model.isFetchingServiceDescription ? (
               <>
                 <ActivityIndicator color="#fff" />
                 <Text type="xl" style={[pal.text, s.pr5]}>
-                  Connecting...
+                  <Trans>Connecting...</Trans>
                 </Text>
               </>
             ) : undefined}

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 (
     <View>
-      <StepHeader step="1" title="Your hosting provider" />
+      <StepHeader step="1" title={_(msg`Your hosting provider`)} />
       <Text style={[pal.text, s.mb10]}>
-        This is the service that keeps you online.
+        <Trans>This is the service that keeps you online.</Trans>
       </Text>
       <Option
         testID="blueskyServerBtn"
@@ -81,17 +84,17 @@ export const Step1 = observer(function Step1Impl({
         onPress={onPressOther}>
         <View style={styles.otherForm}>
           <Text nativeID="addressProvider" style={[pal.text, s.mb5]}>
-            Enter the address of your provider:
+            <Trans>Enter the address of your provider:</Trans>
           </Text>
           <TextInput
             testID="customServerInput"
             icon="globe"
-            placeholder="Hosting provider address"
+            placeholder={_(msg`Hosting provider address`)}
             value={model.serviceUrl}
             editable
             onChange={onChangeServiceUrl}
             accessibilityHint="Input hosting provider address"
-            accessibilityLabel="Hosting provider address"
+            accessibilityLabel={_(msg`Hosting provider address`)}
             accessibilityLabelledBy="addressProvider"
           />
           {LOGIN_INCLUDE_DEV_SERVERS && (
@@ -100,13 +103,13 @@ export const Step1 = observer(function Step1Impl({
                 testID="stagingServerBtn"
                 type="default"
                 style={s.mr5}
-                label="Staging"
+                label={_(msg`Staging`)}
                 onPress={() => onDebugChangeServiceUrl(STAGING_SERVICE)}
               />
               <Button
                 testID="localDevServerBtn"
                 type="default"
-                label="Dev Server"
+                label={_(msg`Dev Server`)}
                 onPress={() => onDebugChangeServiceUrl(LOCAL_DEV_SERVICE)}
               />
             </View>
@@ -116,7 +119,7 @@ export const Step1 = observer(function Step1Impl({
       {model.error ? (
         <ErrorMessage message={model.error} style={styles.error} />
       ) : (
-        <HelpTip text="You can change hosting providers at any time." />
+        <HelpTip text={_(msg`You can change hosting providers at any time.`)} />
       )}
     </View>
   )

src/view/com/auth/create/Step2.tsx

@@ -12,7 +12,8 @@ import {Policies} from './Policies'
 import {ErrorMessage} from 'view/com/util/error/ErrorMessage'
 import {useStores} from 'state/index'
 import {isWeb} from 'platform/detection'
-import {Trans} from '@lingui/macro'
+import {Trans, msg} from '@lingui/macro'
+import {useLingui} from '@lingui/react'
 
 /** STEP 2: Your account
  * @field Invite code or waitlist
@@ -30,14 +31,15 @@ export const Step2 = observer(function Step2Impl({
 }) {
   const pal = usePalette('default')
   const store = useStores()
+  const {_} = useLingui()
 
   const onPressWaitlist = React.useCallback(() => {
     store.shell.openModal({name: 'waitlist'})
   }, [store])
 
   return (
     <View>
-      <StepHeader step="2" title="Your account" />
+      <StepHeader step="2" title={_(msg`Your account`)} />
 
       {model.isInviteCodeRequired && (
         <View style={s.pb20}>
@@ -47,11 +49,11 @@ export const Step2 = observer(function Step2Impl({
           <TextInput
             testID="inviteCodeInput"
             icon="ticket"
-            placeholder="Required for this provider"
+            placeholder={_(msg`Required for this provider`)}
             value={model.inviteCode}
             editable
             onChange={model.setInviteCode}
-            accessibilityLabel="Invite code"
+            accessibilityLabel={_(msg`Invite code`)}
             accessibilityHint="Input invite code to proceed"
           />
         </View>
@@ -62,7 +64,7 @@ export const Step2 = observer(function Step2Impl({
           Don't have an invite code?{' '}
           <TouchableWithoutFeedback
             onPress={onPressWaitlist}
-            accessibilityLabel="Join the waitlist."
+            accessibilityLabel={_(msg`Join the waitlist.`)}
             accessibilityHint="">
             <View style={styles.touchable}>
               <Text style={pal.link}>
@@ -75,16 +77,16 @@ export const Step2 = observer(function Step2Impl({
         <>
           <View style={s.pb20}>
             <Text type="md-medium" style={[pal.text, s.mb2]} nativeID="email">
-              Email address
+              <Trans>Email address</Trans>
             </Text>
             <TextInput
               testID="emailInput"
               icon="envelope"
-              placeholder="Enter your email address"
+              placeholder={_(msg`Enter your email address`)}
               value={model.email}
               editable
               onChange={model.setEmail}
-              accessibilityLabel="Email"
+              accessibilityLabel={_(msg`Email`)}
               accessibilityHint="Input email for Bluesky waitlist"
               accessibilityLabelledBy="email"
             />
@@ -95,17 +97,17 @@ export const Step2 = observer(function Step2Impl({
               type="md-medium"
               style={[pal.text, s.mb2]}
               nativeID="password">
-              Password
+              <Trans>Password</Trans>
             </Text>
             <TextInput
               testID="passwordInput"
               icon="lock"
-              placeholder="Choose your password"
+              placeholder={_(msg`Choose your password`)}
               value={model.password}
               editable
               secureTextEntry
               onChange={model.setPassword}
-              accessibilityLabel="Password"
+              accessibilityLabel={_(msg`Password`)}
               accessibilityHint="Set password"
               accessibilityLabelledBy="password"
             />
@@ -116,7 +118,7 @@ export const Step2 = observer(function Step2Impl({
               type="md-medium"
               style={[pal.text, s.mb2]}
               nativeID="birthDate">
-              Your birth date
+              <Trans>Your birth date</Trans>
             </Text>
             <DateInput
               testID="birthdayInput"
@@ -125,7 +127,7 @@ export const Step2 = observer(function Step2Impl({
               buttonType="default-light"
               buttonStyle={[pal.border, styles.dateInputButton]}
               buttonLabelType="lg"
-              accessibilityLabel="Birthday"
+              accessibilityLabel={_(msg`Birthday`)}
               accessibilityHint="Enter your birth date"
               accessibilityLabelledBy="birthDate"
             />

src/view/com/auth/create/Step3.tsx

@@ -9,6 +9,8 @@ import {TextInput} from '../util/TextInput'
 import {createFullHandle} from 'lib/strings/handles'
 import {usePalette} from 'lib/hooks/usePalette'
 import {ErrorMessage} from 'view/com/util/error/ErrorMessage'
+import {msg, Trans} from '@lingui/macro'
+import {useLingui} from '@lingui/react'
 
 /** STEP 3: Your user handle
  * @field User handle
@@ -19,9 +21,10 @@ export const Step3 = observer(function Step3Impl({
   model: CreateAccountModel
 }) {
   const pal = usePalette('default')
+  const {_} = useLingui()
   return (
     <View>
-      <StepHeader step="3" title="Your user handle" />
+      <StepHeader step="3" title={_(msg`Your user handle`)} />
       <View style={s.pb10}>
         <TextInput
           testID="handleInput"
@@ -31,11 +34,11 @@ export const Step3 = observer(function Step3Impl({
           editable
           onChange={model.setHandle}
           // TODO: Add explicit text label
-          accessibilityLabel="User handle"
+          accessibilityLabel={_(msg`User handle`)}
           accessibilityHint="Input your user handle"
         />
         <Text type="lg" style={[pal.text, s.pl5, s.pt10]}>
-          Your full handle will be{' '}
+          <Trans>Your full handle will be </Trans>
           <Text type="lg-bold" style={pal.text}>
             @{createFullHandle(model.handle, model.userDomain)}
           </Text>