fix(a11y): improve the second part of the donation modal (#55273)

client/src/components/Donation/donation-modal-body.tsx

@@ -16,6 +16,7 @@ type DonationModalBodyProps = {
   activeDonors?: number;
   closeDonationModal: typeof closeDonationModal;
   recentlyClaimedBlock: RecentlyClaimedBlock;
+  setCanClose: (canClose: boolean) => void;
 };
 
 const Illustration = () => {
@@ -217,7 +218,8 @@ const BecomeASupporterConfirmation = ({
 
 function DonationModalBody({
   closeDonationModal,
-  recentlyClaimedBlock
+  recentlyClaimedBlock,
+  setCanClose
 }: DonationModalBodyProps): JSX.Element {
   const [donationAttempted, setDonationAttempted] = useState(false);
   const [showHeaderAndFooter, setShowHeaderAndFooter] = useState(true);
@@ -245,6 +247,12 @@ function DonationModalBody({
     return () => clearInterval(interval);
   }, []);
 
+  useEffect(() => {
+    if (secondsRemaining === 0) {
+      setCanClose(true);
+    }
+  }, [secondsRemaining, setCanClose]);
+
   return (
     <Modal.Body borderless alignment='start'>
       <div aria-live='polite' className='donation-modal'>
@@ -268,5 +276,6 @@ function DonationModalBody({
 }
 
 DonationModalBody.displayName = 'DonationModalBody';
+Benefits.displayName = 'DonationModalBenefits';
 
 export default DonationModalBody;

client/src/components/Donation/donation-modal.tsx

@@ -1,10 +1,11 @@
 import { WindowLocation } from '@reach/router';
-import React, { useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
 import { connect } from 'react-redux';
 import { goToAnchor } from 'react-scrollable-anchor';
 import { bindActionCreators, Dispatch, AnyAction } from 'redux';
 import { createSelector } from 'reselect';
 import { Modal } from '@freecodecamp/ui';
+import { useFeature } from '@growthbook/growthbook-react';
 
 import { closeDonationModal } from '../../redux/actions';
 import {
@@ -44,6 +45,9 @@ function DonateModal({
   location,
   recentlyClaimedBlock
 }: DonateModalProps): JSX.Element {
+  const [canClose, setCanClose] = useState(false);
+  const isA11yFeatureEnabled = useFeature('a11y-donation-modal').on;
+
   useEffect(() => {
     if (show) {
       void playTone('donation');
@@ -62,6 +66,10 @@ function DonateModal({
     if (isLocationSuperBlock(location)) {
       goToAnchor('claim-cert-block');
     }
+
+    if (isA11yFeatureEnabled && canClose) {
+      closeDonationModal();
+    }
   };
 
   return (
@@ -69,6 +77,7 @@ function DonateModal({
       <DonationModalBody
         closeDonationModal={closeDonationModal}
         recentlyClaimedBlock={recentlyClaimedBlock}
+        setCanClose={setCanClose}
       />
     </Modal>
   );

client/src/components/Donation/donation-text-components.tsx

@@ -1,5 +1,7 @@
 import React, { useState } from 'react';
 import { useTranslation, Trans } from 'react-i18next';
+import { useFeature } from '@growthbook/growthbook-react';
+
 import Caret from '../../assets/icons/caret';
 import { Spacer } from '../helpers';
 import GreenPass from '../../assets/icons/green-pass';
@@ -318,8 +320,11 @@ export const GetSupporterBenefitsText = ({
 
 export const ModalBenefitList = () => {
   const { t } = useTranslation();
+  const isA11yFeatureEnabled = useFeature('a11y-donation-modal').on;
+
   return (
-    <ul>
+    // Set the initial focus to this list as it appears first in the second modal.
+    <ul {...(isA11yFeatureEnabled && { tabIndex: -1 })}>
       <li>
         <GreenPass aria-hidden={true} />
         {t('donate.help-us-more-certifications')}

client/src/components/Donation/donation.css

@@ -462,13 +462,6 @@ button.confirm-donation-btn {
   display: inline-flex;
   align-items: center;
 }
-button.confirm-donation-btn:focus,
-button.confirm-donation-btn:active,
-button.confirm-donation-btn:active:focus {
-  background-color: var(--quaternary-background);
-  border-color: var(--secondary-color);
-  color: var(--secondary-color);
-}
 button.confirm-donation-btn:hover {
   color: black;
   background-color: #f2ba38;