fix(a11y): replace Alert with Callout for non-critical messages (#62466)

client/src/components/Intro/learn-alert.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Alert, Spacer } from '@freecodecamp/ui';
+import { Callout, Spacer } from '@freecodecamp/ui';
 import { useFeature } from '@growthbook/growthbook-react';
 import { useTranslation } from 'react-i18next';
 import { Link } from '../helpers';
@@ -19,7 +19,7 @@ const LearnAlert = ({
   const progressAlertFlag2024 = useFeature('progress-alert-2024');
   const createUniversityFlag = useFeature('university-alert');
   const progressAlertDefault = (text: string, value?: number) => (
-    <Alert variant='info' className='annual-donation-alert'>
+    <Callout variant='info' className='annual-donation-alert'>
       {value && (
         <>
           <div className='text-center'>
@@ -47,11 +47,11 @@ const LearnAlert = ({
           {t('buttons.donate')}
         </Link>
       </div>
-    </Alert>
+    </Callout>
   );
 
   const seasonalAlertFlagAlert = (
-    <Alert variant='info' className='annual-donation-alert'>
+    <Callout variant='info' className='annual-donation-alert'>
       <p>
         <b>{t('learn.season-greetings-fcc')}</b>
       </p>
@@ -68,7 +68,7 @@ const LearnAlert = ({
           {t('buttons.donate')}
         </Link>
       </p>
-    </Alert>
+    </Callout>
   );
 
   const progressAlert2024 = progressAlertDefault(
@@ -77,7 +77,7 @@ const LearnAlert = ({
   );
 
   const universityAlert = (
-    <Alert variant='info' className='university-alert'>
+    <Callout variant='info' className='university-alert'>
       <p>
         <b>{t('learn.building-a-university')}</b>
       </p>
@@ -94,7 +94,7 @@ const LearnAlert = ({
           {t('buttons.donate')}
         </Link>
       </p>
-    </Alert>
+    </Callout>
   );
 
   if (!isDonating) {

client/src/components/growth-book/codeally-down.tsx

@@ -1,12 +1,12 @@
 import React from 'react';
 import { Trans, useTranslation } from 'react-i18next';
-import { Alert, Spacer } from '@freecodecamp/ui';
+import { Callout, Spacer } from '@freecodecamp/ui';
 import { useFeature } from '@growthbook/growthbook-react';
 
 const Down = () => {
   const { t } = useTranslation();
   return (
-    <Alert variant='danger'>
+    <Callout variant='danger'>
       <p>
         <Trans i18nKey='intro:misc-text.course-maintenance'>
           <a
@@ -20,14 +20,14 @@ const Down = () => {
       </p>
       <Spacer size='xs' />
       <p>{t('intro:misc-text.progress-wont-save')}</p>
-    </Alert>
+    </Callout>
   );
 };
 
 const Disabled = () => {
   const { t } = useTranslation();
   return (
-    <Alert variant='danger'>
+    <Callout variant='danger'>
       <p>
         <Trans i18nKey='intro:misc-text.course-disabled'>
           <a
@@ -41,7 +41,7 @@ const Disabled = () => {
       </p>
       <Spacer size='xs' />
       <p>{t('intro:misc-text.progress-wont-save')}</p>
-    </Alert>
+    </Callout>
   );
 };
 

client/src/components/growth-book/ona-note.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
-import { Alert } from '@freecodecamp/ui';
+import { Callout } from '@freecodecamp/ui';
 import { useFeatureValue } from '@growthbook/growthbook-react';
 import { SuperBlocks } from '../../../../shared-dist/config/curriculum';
 import { Link } from '../helpers';
@@ -16,7 +16,7 @@ export function OnaNote({ superBlock }: OnaNoteProps): JSX.Element | null {
   const { t } = useTranslation();
 
   return onaNoteFeature.superblocks.includes(superBlock) ? (
-    <Alert variant='info'>
+    <Callout variant='info'>
       <p>
         <Link
           external={true}
@@ -26,6 +26,6 @@ export function OnaNote({ superBlock }: OnaNoteProps): JSX.Element | null {
           {t('intro:misc-text.read-database-cert-article')}
         </Link>
       </p>
-    </Alert>
+    </Callout>
   ) : null;
 }

client/src/components/profile/profile.tsx

@@ -2,7 +2,7 @@ import React, { useState } from 'react';
 import Helmet from 'react-helmet';
 import type { TFunction } from 'i18next';
 import { useTranslation } from 'react-i18next';
-import { Alert, Container, Modal, Row, Spacer } from '@freecodecamp/ui';
+import { Callout, Container, Modal, Row, Spacer } from '@freecodecamp/ui';
 import { FullWidthRow, Link } from '../helpers';
 import Portfolio from './components/portfolio';
 
@@ -38,7 +38,7 @@ interface MessageProps {
 const UserMessage = ({ t }: Pick<MessageProps, 't'>) => {
   return (
     <FullWidthRow>
-      <Alert variant='info'>{t('profile.you-change-privacy')}</Alert>
+      <Callout variant='info'>{t('profile.you-change-privacy')}</Callout>
       <Spacer size='xl' />
     </FullWidthRow>
   );
@@ -69,9 +69,9 @@ const VisitorMessage = ({
 }: Omit<MessageProps, 'isSessionUser'>) => {
   return (
     <FullWidthRow>
-      <Alert variant='info'>
+      <Callout variant='info'>
         {t('profile.username-change-privacy', { username })}
-      </Alert>
+      </Callout>
       <Spacer size='m' />
     </FullWidthRow>
   );

client/src/components/settings/email.tsx

@@ -1,6 +1,6 @@
 import {
   HelpBlock,
-  Alert,
+  Callout,
   FormGroup,
   FormGroupProps,
   FormControl,
@@ -168,7 +168,7 @@ function EmailSettings({
       {isEmailVerified ? null : (
         <FullWidthRow>
           <HelpBlock>
-            <Alert
+            <Callout
               variant='info'
               className='text-center'
               data-playwright-test-label='email-verification-alert'
@@ -181,7 +181,7 @@ function EmailSettings({
                   to='/update-email'
                 />
               </Trans>
-            </Alert>
+            </Callout>
           </HelpBlock>
         </FullWidthRow>
       )}

client/src/templates/Challenges/codeally/rdb-local-logout-alert.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
-import { Alert } from '@freecodecamp/ui';
+import { Callout } from '@freecodecamp/ui';
 
 interface RdbLocalLogoutAlertProps {
   course: string;
@@ -12,9 +12,9 @@ function RdbLocalLogoutAlert({
   const { t } = useTranslation();
 
   return (
-    <Alert variant='danger'>
+    <Callout variant='danger'>
       {t('learn.local.logout-warning', { course })}
-    </Alert>
+    </Callout>
   );
 }
 

client/src/templates/Challenges/codeally/rdb-ona-continue-alert.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Trans } from 'react-i18next';
-import { Alert, Spacer } from '@freecodecamp/ui';
+import { Callout, Spacer } from '@freecodecamp/ui';
 
 interface RdbOnaContinueAlertProps {
   course: string;
@@ -10,7 +10,7 @@ function RdbOnaContinueAlert({
   course
 }: RdbOnaContinueAlertProps): JSX.Element {
   return (
-    <Alert variant='info'>
+    <Callout variant='info'>
       <Trans values={{ course }} i18nKey='learn.ona.continue-project'>
         <a href='https://app.ona.com' rel='noopener noreferrer' target='_blank'>
           placeholder
@@ -26,7 +26,7 @@ function RdbOnaContinueAlert({
           placeholder
         </a>
       </Trans>
-    </Alert>
+    </Callout>
   );
 }
 

client/src/templates/Challenges/codeally/rdb-ona-logout-alert.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
-import { Alert } from '@freecodecamp/ui';
+import { Callout } from '@freecodecamp/ui';
 
 interface RdbOnaLogoutAlertProps {
   course: string;
@@ -10,7 +10,9 @@ function RdbOnaLogoutAlert({ course }: RdbOnaLogoutAlertProps): JSX.Element {
   const { t } = useTranslation();
 
   return (
-    <Alert variant='danger'>{t('learn.ona.logout-warning', { course })}</Alert>
+    <Callout variant='danger'>
+      {t('learn.ona.logout-warning', { course })}
+    </Callout>
   );
 }
 

client/src/templates/Challenges/exam/components/missing-prerequisites.tsx

@@ -1,7 +1,7 @@
 import { useStaticQuery, graphql } from 'gatsby';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
-import { Alert, Spacer } from '@freecodecamp/ui';
+import { Callout, Spacer } from '@freecodecamp/ui';
 
 import {
   AllChallengeNode,
@@ -36,7 +36,7 @@ function MissingPrerequisites({
     });
 
   return (
-    <Alert variant='danger'>
+    <Callout variant='danger'>
       <p>{t('learn.exam.not-qualified')}</p>
       <Spacer size='xs' />
       <ul>
@@ -50,7 +50,7 @@ function MissingPrerequisites({
           )
         )}
       </ul>
-    </Alert>
+    </Callout>
   );
 }
 

client/src/templates/Challenges/exam/show.tsx

@@ -9,7 +9,7 @@ import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 import type { Dispatch } from 'redux';
 import { createSelector } from 'reselect';
-import { Container, Col, Alert, Row, Button, Spacer } from '@freecodecamp/ui';
+import { Container, Col, Callout, Row, Button, Spacer } from '@freecodecamp/ui';
 import { micromark } from 'micromark';
 
 // Local Utilities
@@ -502,9 +502,9 @@ function ShowExam(props: ShowExamProps) {
               <Spacer size='m' />
 
               {qualifiedForExam ? (
-                <Alert variant='info'>
+                <Callout variant='info'>
                   <p>{t('learn.exam.qualified')}</p>
-                </Alert>
+                </Callout>
               ) : !prerequisitesComplete ? (
                 <MissingPrerequisites
                   missingPrerequisites={missingPrerequisites}

client/src/templates/Introduction/components/legacy-links.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
-import { Alert } from '@freecodecamp/ui';
+import { Callout } from '@freecodecamp/ui';
 import { SuperBlocks } from '../../../../../shared-dist/config/curriculum';
 import { isRelationalDbCert, isExamCert } from '../../../utils/is-a-cert';
 import { CodeAllyDown } from '../../../components/growth-book/codeally-down';
@@ -22,17 +22,17 @@ function LegacyLinks({ superBlock }: LegacyLinksProps): JSX.Element {
       <>
         <CodeAllyDown />
         {clientLocale != 'english' && (
-          <Alert variant='info'>
+          <Callout variant='info'>
             <p>{t('intro:misc-text.english-only')}</p>
-          </Alert>
+          </Callout>
         )}
       </>
     );
   } else if (isExamCert(superBlock) && clientLocale != 'english') {
     return (
-      <Alert variant='info'>
+      <Callout variant='info'>
         <p>{t('intro:misc-text.exam-english-only')}</p>
-      </Alert>
+      </Callout>
     );
   } else {
     return <OnaNote superBlock={superBlock} />;

client/src/templates/Introduction/components/super-block-intro.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { graphql, useStaticQuery } from 'gatsby';
 import { useTranslation, Trans } from 'react-i18next';
-import { Alert, Spacer, Container, Row, Col, Callout } from '@freecodecamp/ui';
+import { Callout, Spacer, Container, Row, Col } from '@freecodecamp/ui';
 import { ConnectedProps, connect } from 'react-redux';
 import { useFeatureIsOn } from '@growthbook/growthbook-react';
 import {
@@ -68,7 +68,7 @@ export const ConditionalDonationAlert = ({
 
   if (!isDonating && betaCertifications.includes(superBlock))
     return (
-      <Alert variant='info' className='annual-donation-alert'>
+      <Callout variant='info' className='annual-donation-alert'>
         <p>{t('donate.beta-certification')}</p>
         <hr />
         <p className='btn-container'>
@@ -82,12 +82,12 @@ export const ConditionalDonationAlert = ({
             {t('buttons.donate-now')}
           </Link>
         </p>
-      </Alert>
+      </Callout>
     );
 
   if (!isDonating && unfinishedCertifications.includes(superBlock))
     return (
-      <Alert variant='info' className='annual-donation-alert'>
+      <Callout variant='info' className='annual-donation-alert'>
         <p>
           <Trans i18nKey='donate.consider-donating-2'>
             <Link className='inline' to='/donate'>
@@ -95,7 +95,7 @@ export const ConditionalDonationAlert = ({
             </Link>
           </Trans>
         </p>
-      </Alert>
+      </Callout>
     );
 
   return null;