fix: add accessible name to CircularProgress spinners

src/components/LoadingSpinner-test.js

@@ -9,6 +9,12 @@ describe('LoadingSpinner', () => {
     expect(screen.getByRole('progressbar')).toBeInTheDocument()
   })
 
+  it('renders a progressbar with an accessible name', () => {
+    render(<LoadingSpinner />)
+
+    expect(screen.getByRole('progressbar', { name: 'Loading ...' })).toBeInTheDocument()
+  })
+
   it('does not render the loading text by default', () => {
     render(<LoadingSpinner />)
 

src/components/LoadingSpinner.js

@@ -12,7 +12,7 @@ export const LoadingSpinner = ({ showText = false, size = 48 }) => {
   return (
     <div className={styles.container}>
       <Stack spacing={2}>
-        <CircularProgress color="primary" size={size} />
+        <CircularProgress aria-label={__('Loading ...')} color="primary" size={size} />
         {showText && (
           <Text className={styles.text} variant="caption">
             {__('Loading ...')}

src/const/language/es.json

@@ -20,8 +20,6 @@
   "Oops! We weren't able to disconnect this institution. Please try again later.": "¡Oh, no! No pudimos desconectar esta institución. Inténtelo de nuevo más tarde.",
   "Ok": "OK",
   "Disconnect": "Desconectar",
-  "The account information is old or inaccurate": "La información de la cuenta es antigua o inexacta",
-  "I am unable to connect this account here": "No puedo conectar esta cuenta aquí",
   "Other": "Otro",
   "Add account with %1": "Agregar cuenta con %1",
   "You are leaving": "Está saliendo",

src/const/language/es.po

@@ -249,10 +249,14 @@ msgstr ""
 "problema."
 
 #: src/components/LoadingSpinner.js src/views/oauth/OAuthDefault.js
+#: src/views/connecting/progress/ProgressCircle.js
+#: src/views/connecting/progress/ProgressBar.tsx
 #: src/views/credentials/Credentials.js
 msgid "Loading ..."
 msgstr "Cargando…"
 
+#: src/views/demoConnectGuard/DemoConnectGuard.tsx
+#: src/views/actionableError/useActionableErrorMap.tsx
 #: src/views/verification/VerifyError.js
 msgid "Go back"
 msgstr "Regresar"
@@ -588,6 +592,7 @@ msgstr "Regrese para verificar los montos del depósito."
 #: src/views/microdeposits/MicrodepositErrors.js
 #: src/views/microdeposits/AccountInfo.js
 #: src/views/microdeposits/ConfirmDetails.js
+#: src/views/manualAccount/ManualAccountForm.tsx
 msgid "Account type"
 msgstr "Tipo de cuenta"
 
@@ -893,11 +898,11 @@ msgstr "Elija el día del mes en que vence su pago."
 #: src/views/search/views/PopularInstitutionsList.js
 #: src/views/search/views/SearchedInstitutionsList.js
 #: src/views/search/views/SearchNoResult.js
-#: src/views/manualAccount/ManualAccountMenu.js
+#: src/views/manualAccount/ManualAccountMenu.tsx
 msgid "Add account manually"
 msgstr "Agregar cuenta manualmente"
 
-#: src/views/manualAccount/ManualAccountMenu.js
+#: src/views/manualAccount/ManualAccountMenu.tsx
 msgid ""
 "Track accounts, assets, and other things that don't have a live connection."
 msgstr ""

src/const/language/frCa.json

@@ -30,8 +30,6 @@
   "Oops! We weren't able to disconnect this institution. Please try again later.": "Oops! Nous n'avons pas pu déconnecter cette institution. Veuillez réessayer plus tard.",
   "Ok": "Ok",
   "Disconnect": "Déconnecter",
-  "The account information is old or inaccurate": "Les informations de compte sont anciennes ou erronées",
-  "I am unable to connect this account here": "Je n’arrive pas à connecter ce compte",
   "Other": "Autre",
   "Oops! There was an error trying to connect your account. Please try again.": "Oups! Une erreur est survenue lors de la connexion de votre compte. Veuillez réessayer.",
   "Loading ...": "Chargement ...",

src/const/language/frCa.po

@@ -189,6 +189,8 @@ msgstr ""
 "réessayer."
 
 #: src/components/LoadingSpinner.js src/views/oauth/OAuthDefault.js
+#: src/views/connecting/progress/ProgressCircle.js
+#: src/views/connecting/progress/ProgressBar.tsx
 #: src/views/credentials/Credentials.js
 msgid "Loading ..."
 msgstr "Chargement ..."
@@ -517,7 +519,7 @@ msgstr "Veuillez saisir à nouveau vos informations d'identification"
 #: src/views/search/views/PopularInstitutionsList.js
 #: src/views/search/views/SearchedInstitutionsList.js
 #: src/views/search/views/SearchNoResult.js
-#: src/views/manualAccount/ManualAccountMenu.js
+#: src/views/manualAccount/ManualAccountMenu.tsx
 msgid "Add account manually"
 msgstr "Ajouter un compte manuellement"
 
@@ -672,6 +674,7 @@ msgstr "Retour pour vérifier les montants des dépôts."
 #: src/views/microdeposits/MicrodepositErrors.js
 #: src/views/microdeposits/AccountInfo.js
 #: src/views/microdeposits/ConfirmDetails.js
+#: src/views/manualAccount/ManualAccountForm.tsx
 msgid "Account type"
 msgstr "Type de compte"
 
@@ -981,7 +984,7 @@ msgstr "Jour d'échéance du paiement"
 msgid "Choose what day of the month your payment is due."
 msgstr "Choisissez le jour du mois où votre paiement est dû."
 
-#: src/views/manualAccount/ManualAccountMenu.js
+#: src/views/manualAccount/ManualAccountMenu.tsx
 msgid ""
 "Track accounts, assets, and other things that don't have a live connection."
 msgstr ""
@@ -1645,6 +1648,8 @@ msgstr ""
 msgid "You have successfully connected to %1"
 msgstr "Vous vous êtes connecté avec succès à %1"
 
+#: src/views/demoConnectGuard/DemoConnectGuard.tsx
+#: src/views/actionableError/useActionableErrorMap.tsx
 #: src/views/verification/VerifyError.js
 msgid "Go back"
 msgstr "Retourner"

src/views/connecting/progress/ProgressBar.tsx

@@ -7,6 +7,7 @@ import { ProgressCircle } from 'src/views/connecting/progress/ProgressCircle'
 import { ProgressMessage } from 'src/views/connecting/progress/ProgressMessage'
 
 import * as JobSchedule from 'src/utilities/JobSchedule'
+import { __ } from 'src/utilities/Intl'
 import { ClientLogo } from 'src/components/ClientLogo'
 import { useSelector } from 'react-redux'
 import { getClientGuid } from 'src/redux/reducers/profilesSlice'
@@ -30,7 +31,7 @@ export const ProgressBar = ({
   if (jobSchedule.isInitialized === false) {
     return (
       <div style={styles.container}>
-        <CircularProgress color="primary" size={64} />
+        <CircularProgress aria-label={__('Loading ...')} color="primary" size={64} />
       </div>
     )
   }

src/views/connecting/progress/ProgressCircle.js

@@ -4,6 +4,7 @@ import { useTokens } from '@kyper/tokenprovider'
 import CircularProgress from '@mui/material/CircularProgress'
 
 import { JOB_STATUSES } from 'src/const/consts'
+import { __ } from 'src/utilities/Intl'
 
 import { ProgressCheckMark } from 'src/views/connecting/progress/ProgressCheckMark'
 
@@ -29,7 +30,7 @@ export const ProgressCircle = (props) => {
   if (isActive) {
     circleContent = (
       <div style={circleStyle}>
-        <CircularProgress color="primary" size={16} />
+        <CircularProgress aria-label={__('Loading ...')} color="primary" size={16} />
       </div>
     )
   } else if (isDone) {