Internationalization & localization (#1822)

* install and setup lingui

* setup dynamic locale activation and async loading

* first pass of automated replacement of text messages

* add some more documentaton

* fix nits

* add `es` and `hi`locales for testing purposes

* make accessibilityLabel localized

* compile and extract new messages

* fix merge conflicts

* fix eslint warning

* change instructions from sending email to opening PR

* fix comments
This commit is contained in:
Ansh 2023-11-09 10:04:16 -08:00 committed by GitHub
parent 82059b7ee1
commit 4c7850f8c4
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
108 changed files with 10334 additions and 1365 deletions

View file

@ -5,10 +5,10 @@
* LICENSE file in the root directory of this source tree.
*
*/
import {createHitslop} from 'lib/constants'
import React from 'react'
import {createHitslop} from 'lib/constants'
import {SafeAreaView, Text, TouchableOpacity, StyleSheet} from 'react-native'
import {t} from '@lingui/macro'
type Props = {
onRequestClose: () => void
@ -23,7 +23,7 @@ const ImageDefaultHeader = ({onRequestClose}: Props) => (
onPress={onRequestClose}
hitSlop={HIT_SLOP}
accessibilityRole="button"
accessibilityLabel="Close image"
accessibilityLabel={t`Close image`}
accessibilityHint="Closes viewer for header image"
onAccessibilityEscape={onRequestClose}>
<Text style={styles.closeText}></Text>

View file

@ -14,6 +14,8 @@ import * as models from 'state/models/ui/shell'
import {colors, s} from 'lib/styles'
import ImageDefaultHeader from './ImageViewing/components/ImageDefaultHeader'
import {Text} from '../util/text/Text'
import {useLingui} from '@lingui/react'
import {msg} from '@lingui/macro'
interface Img {
uri: string
@ -62,6 +64,7 @@ function LightboxInner({
initialIndex: number
onClose: () => void
}) {
const {_} = useLingui()
const [index, setIndex] = useState<number>(initialIndex)
const [isAltExpanded, setAltExpanded] = useState(false)
@ -101,7 +104,7 @@ function LightboxInner({
<TouchableWithoutFeedback
onPress={onClose}
accessibilityRole="button"
accessibilityLabel="Close image viewer"
accessibilityLabel={_(msg`Close image viewer`)}
accessibilityHint="Exits image view"
onAccessibilityEscape={onClose}>
<View style={styles.imageCenterer}>
@ -117,7 +120,7 @@ function LightboxInner({
onPress={onPressLeft}
style={[styles.btn, styles.leftBtn]}
accessibilityRole="button"
accessibilityLabel="Previous image"
accessibilityLabel={_(msg`Previous image`)}
accessibilityHint="">
<FontAwesomeIcon
icon="angle-left"
@ -131,7 +134,7 @@ function LightboxInner({
onPress={onPressRight}
style={[styles.btn, styles.rightBtn]}
accessibilityRole="button"
accessibilityLabel="Next image"
accessibilityLabel={_(msg`Next image`)}
accessibilityHint="">
<FontAwesomeIcon
icon="angle-right"
@ -145,7 +148,7 @@ function LightboxInner({
{imgs[index].alt ? (
<View style={styles.footer}>
<Pressable
accessibilityLabel="Expand alt text"
accessibilityLabel={_(msg`Expand alt text`)}
accessibilityHint="If alt text is long, toggles alt text expanded state"
onPress={() => {
setAltExpanded(!isAltExpanded)