fix: add translated close button label in alert messages (#43810)

client/src/components/Donation/DonateCompletion.tsx

@@ -36,7 +36,11 @@ function DonateCompletion({
     : `${t('donate.error')}`;
 
   return (
-    <Alert bsStyle={style} className='donation-completion'>
+    <Alert
+      bsStyle={style}
+      className='donation-completion'
+      closeLabel={t('buttons.close')}
+    >
       <h4>
         <b>{heading}</b>
       </h4>

client/src/components/Flash/index.tsx

@@ -43,6 +43,7 @@ function Flash({ flashMessage, onClose }: FlashProps): JSX.Element {
           <Alert
             bsStyle={type}
             className='flash-message'
+            closeLabel={t('buttons.close')}
             onDismiss={handleClose}
           >
             {t(message, variables)}

client/src/components/formHelpers/FormFields.js

@@ -11,6 +11,7 @@ import normalizeUrl from 'normalize-url';
 import PropTypes from 'prop-types';
 import React from 'react';
 import { Field } from 'react-final-form';
+import { useTranslation } from 'react-i18next';
 import {
   editorValidator,
   localhostValidator,
@@ -34,6 +35,7 @@ const propTypes = {
 };
 
 function FormFields(props) {
+  const { t } = useTranslation();
   const { formFields, options = {} } = props;
   const {
     ignored = [],
@@ -62,7 +64,10 @@ function FormFields(props) {
     const message = error || validationError || validationWarning;
     return message ? (
       <HelpBlock>
-        <Alert bsStyle={error || validationError ? 'danger' : 'info'}>
+        <Alert
+          bsStyle={error || validationError ? 'danger' : 'info'}
+          closeLabel={t('buttons.close')}
+        >
           {message}
         </Alert>
       </HelpBlock>

client/src/components/settings/about.tsx

@@ -157,7 +157,9 @@ class AboutSettings extends Component<AboutProps, AboutState> {
     if (this.state.isPictureUrlValid === false) {
       return (
         <HelpBlock>
-          <Alert bsStyle='info'>{t('validation.url-not-image')}</Alert>
+          <Alert bsStyle='info' closeLabel={t('buttons.close')}>
+            {t('validation.url-not-image')}
+          </Alert>
         </HelpBlock>
       );
     } else {

client/src/components/settings/email.tsx

@@ -182,7 +182,11 @@ class EmailSettings extends Component<EmailProps, EmailState> {
         {isEmailVerified ? null : (
           <FullWidthRow>
             <HelpBlock>
-              <Alert bsStyle='info' className='text-center'>
+              <Alert
+                bsStyle='info'
+                className='text-center'
+                closeLabel={t('buttons.close')}
+              >
                 {t('settings.email.not-verified')}
                 <br />
                 <Trans i18nKey='settings.email.check'>

client/src/components/settings/username.tsx

@@ -152,7 +152,7 @@ class UsernameSettings extends Component<UsernameProps, UsernameState> {
       console.log(error);
       return (
         <FullWidthRow>
-          <Alert bsStyle='danger'>
+          <Alert bsStyle='danger' closeLabel={t('buttons.close')}>
             {t(`settings.username.${error}`, {
               username: this.state.formValue
             })}
@@ -163,28 +163,38 @@ class UsernameSettings extends Component<UsernameProps, UsernameState> {
     if (!validating && !isValidUsername) {
       return (
         <FullWidthRow>
-          <Alert bsStyle='warning'>{t('settings.username.unavailable')}</Alert>
+          <Alert bsStyle='warning' closeLabel={t('buttons.close')}>
+            {t('settings.username.unavailable')}
+          </Alert>
         </FullWidthRow>
       );
     }
     if (validating) {
       return (
         <FullWidthRow>
-          <Alert bsStyle='info'>{t('settings.username.validating')}</Alert>
+          <Alert bsStyle='info' closeLabel={t('buttons.close')}>
+            {t('settings.username.validating')}
+          </Alert>
         </FullWidthRow>
       );
     }
     if (!validating && isValidUsername && this.state.isUserNew) {
       return (
         <FullWidthRow>
-          <Alert bsStyle='success'>{t('settings.username.available')}</Alert>
+          <Alert bsStyle='success' closeLabel={t('buttons.close')}>
+            {t('settings.username.available')}
+          </Alert>
         </FullWidthRow>
       );
     } else if (!validating && isValidUsername && !this.state.isUserNew) {
       return (
         <FullWidthRow>
-          <Alert bsStyle='success'>{t('settings.username.available')}</Alert>
+          <Alert bsStyle='success' closeLabel={t('buttons.close')}>
-          <Alert bsStyle='info'>{t('settings.username.change')}</Alert>
+            {t('settings.username.available')}
+          </Alert>
+          <Alert bsStyle='info' closeLabel={t('buttons.close')}>
+            {t('settings.username.change')}
+          </Alert>
         </FullWidthRow>
       );
     }

client/src/pages/donate.tsx

@@ -100,7 +100,7 @@ function DonatePage({
                 </Col>
               </Row>
               {isDonating ? (
-                <Alert>
+                <Alert closeLabel={t('buttons.close')}>
                   <p>{t('donate.thank-you-2')}</p>
                   <br />
                   <DonationOptionsAlertText />