diff --git a/src/components/MagicCodeInput.tsx b/src/components/MagicCodeInput.tsx index b43b0e6ecb2fd..0452c6b9db121 100644 --- a/src/components/MagicCodeInput.tsx +++ b/src/components/MagicCodeInput.tsx @@ -5,6 +5,7 @@ import {StyleSheet, View} from 'react-native'; import {Gesture, GestureDetector} from 'react-native-gesture-handler'; import Animated, {useAnimatedStyle, useSharedValue, withDelay, withRepeat, withSequence, withTiming} from 'react-native-reanimated'; import type {ValueOf} from 'type-fest'; +import useAccessibilityAnnouncement from '@hooks/useAccessibilityAnnouncement'; import useLocalize from '@hooks/useLocalize'; import useNetwork from '@hooks/useNetwork'; import useStyleUtils from '@hooks/useStyleUtils'; @@ -213,6 +214,9 @@ function MagicCodeInput({ editIndex.current = index; }; + const announcement = focusedIndex !== undefined ? translate('common.enterDigitLabel', {digitIndex: focusedIndex + 1, totalDigits: maxLength}) : undefined; + useAccessibilityAnnouncement(announcement, !!announcement, {shouldAnnounceOnNative: true, shouldAnnounceOnWeb: true}); + useImperativeHandle(ref, () => ({ focus() { focusMagicCodeInput(); @@ -467,7 +471,7 @@ function MagicCodeInput({ {/* Android does not handle touch on invisible Views so I created a wrapper around invisible TextInput just to handle taps */} @@ -533,6 +539,7 @@ function MagicCodeInput({ accessibilityElementsHidden importantForAccessibility="no-hide-descendants" accessible={false} + aria-hidden > {!!char && {char}} diff --git a/src/languages/de.ts b/src/languages/de.ts index 82ee108404b3a..7771e5bdba563 100644 --- a/src/languages/de.ts +++ b/src/languages/de.ts @@ -528,6 +528,7 @@ const translations: TranslationDeepObject = { concierge: {sidePanelGreeting: 'Hallo, wie kann ich helfen?', showHistory: 'Verlauf anzeigen'}, duplicateReport: 'Duplizierten Bericht', approver: 'Genehmiger', + enterDigitLabel: ({digitIndex, totalDigits}: {digitIndex: number; totalDigits: number}) => `Ziffer ${digitIndex} von ${totalDigits} eingeben`, copyOfReportName: (reportName: string) => `Kopie von ${reportName}`, }, socials: { diff --git a/src/languages/en.ts b/src/languages/en.ts index 4b6645274b688..18bb2c2d4785d 100644 --- a/src/languages/en.ts +++ b/src/languages/en.ts @@ -550,6 +550,7 @@ const translations = { vacationDelegate: 'Vacation delegate', expensifyLogo: 'Expensify logo', approver: 'Approver', + enterDigitLabel: ({digitIndex, totalDigits}: {digitIndex: number; totalDigits: number}) => `enter digit ${digitIndex} of ${totalDigits}`, }, socials: { podcast: 'Follow us on Podcast', diff --git a/src/languages/es.ts b/src/languages/es.ts index ed025e937e2fd..d37c47c8fa7fb 100644 --- a/src/languages/es.ts +++ b/src/languages/es.ts @@ -437,6 +437,7 @@ const translations: TranslationDeepObject = { vacationDelegate: 'Delegado de vacaciones', expensifyLogo: 'Logo de Expensify', approver: 'Aprobador', + enterDigitLabel: ({digitIndex, totalDigits}: {digitIndex: number; totalDigits: number}) => `introducir dígito ${digitIndex} de ${totalDigits}`, }, socials: { podcast: 'Síguenos en Podcast', diff --git a/src/languages/fr.ts b/src/languages/fr.ts index 5ee4f9359a1ad..ee82aaa2c501a 100644 --- a/src/languages/fr.ts +++ b/src/languages/fr.ts @@ -528,6 +528,7 @@ const translations: TranslationDeepObject = { concierge: {sidePanelGreeting: 'Bonjour, comment puis-je vous aider ?', showHistory: 'Afficher l’historique'}, duplicateReport: 'Note de frais en double', approver: 'Approbateur', + enterDigitLabel: ({digitIndex, totalDigits}: {digitIndex: number; totalDigits: number}) => `saisir le chiffre ${digitIndex} sur ${totalDigits}`, copyOfReportName: (reportName: string) => `Copie de ${reportName}`, }, socials: { diff --git a/src/languages/it.ts b/src/languages/it.ts index 1728e4defd4f8..eb75aedb927fa 100644 --- a/src/languages/it.ts +++ b/src/languages/it.ts @@ -528,6 +528,7 @@ const translations: TranslationDeepObject = { concierge: {sidePanelGreeting: 'Ciao, come posso aiutarti?', showHistory: 'Mostra cronologia'}, duplicateReport: 'Report duplicato', approver: 'Approvante', + enterDigitLabel: ({digitIndex, totalDigits}: {digitIndex: number; totalDigits: number}) => `inserire la cifra ${digitIndex} di ${totalDigits}`, copyOfReportName: (reportName: string) => `Copia di ${reportName}`, }, socials: { diff --git a/src/languages/ja.ts b/src/languages/ja.ts index 102e4941579ae..4df82f0e29b1e 100644 --- a/src/languages/ja.ts +++ b/src/languages/ja.ts @@ -527,6 +527,7 @@ const translations: TranslationDeepObject = { concierge: {sidePanelGreeting: 'こんにちは、どのようにお手伝いできますか?', showHistory: '履歴を表示'}, duplicateReport: 'レポートを複製', approver: '承認者', + enterDigitLabel: ({digitIndex, totalDigits}: {digitIndex: number; totalDigits: number}) => `${totalDigits}桁中${digitIndex}桁目を入力`, copyOfReportName: (reportName: string) => `${reportName} のコピー`, }, socials: { diff --git a/src/languages/nl.ts b/src/languages/nl.ts index 1df2b00e2b98e..48c6d48d26fbc 100644 --- a/src/languages/nl.ts +++ b/src/languages/nl.ts @@ -527,6 +527,7 @@ const translations: TranslationDeepObject = { concierge: {sidePanelGreeting: 'Hoi, waarmee kan ik je helpen?', showHistory: 'Geschiedenis weergeven'}, duplicateReport: 'Dubbel rapport', approver: 'Fiatteur', + enterDigitLabel: ({digitIndex, totalDigits}: {digitIndex: number; totalDigits: number}) => `voer cijfer ${digitIndex} van ${totalDigits} in`, copyOfReportName: (reportName: string) => `Kopie van ${reportName}`, }, socials: { diff --git a/src/languages/pl.ts b/src/languages/pl.ts index 1f2940d6f12dc..ade83f7b18860 100644 --- a/src/languages/pl.ts +++ b/src/languages/pl.ts @@ -527,6 +527,7 @@ const translations: TranslationDeepObject = { concierge: {sidePanelGreeting: 'Cześć, w czym mogę pomóc?', showHistory: 'Pokaż historię'}, duplicateReport: 'Zduplikowany raport', approver: 'Osoba zatwierdzająca', + enterDigitLabel: ({digitIndex, totalDigits}: {digitIndex: number; totalDigits: number}) => `wprowadź cyfrę ${digitIndex} z ${totalDigits}`, copyOfReportName: (reportName: string) => `Kopia raportu ${reportName}`, }, socials: { diff --git a/src/languages/pt-BR.ts b/src/languages/pt-BR.ts index 772e6e1373dcf..2a296521b9fe9 100644 --- a/src/languages/pt-BR.ts +++ b/src/languages/pt-BR.ts @@ -526,6 +526,7 @@ const translations: TranslationDeepObject = { concierge: {sidePanelGreeting: 'Oi, como posso ajudar?', showHistory: 'Mostrar histórico'}, duplicateReport: 'Duplicar relatório', approver: 'Aprovador', + enterDigitLabel: ({digitIndex, totalDigits}: {digitIndex: number; totalDigits: number}) => `inserir dígito ${digitIndex} de ${totalDigits}`, copyOfReportName: (reportName: string) => `Cópia de ${reportName}`, }, socials: { diff --git a/src/languages/zh-hans.ts b/src/languages/zh-hans.ts index 7e5fe1dbaa542..4e791303b0fd7 100644 --- a/src/languages/zh-hans.ts +++ b/src/languages/zh-hans.ts @@ -523,6 +523,7 @@ const translations: TranslationDeepObject = { concierge: {sidePanelGreeting: '你好,我能帮你做什么?', showHistory: '显示历史'}, duplicateReport: '重复报销单', approver: '审批人', + enterDigitLabel: ({digitIndex, totalDigits}: {digitIndex: number; totalDigits: number}) => `输入第 ${digitIndex} 位数字,共 ${totalDigits} 位`, copyOfReportName: (reportName: string) => `${reportName} 的副本`, }, socials: {