From b79d00f9ffae47003c3447490b5f7b11f69ecb9a Mon Sep 17 00:00:00 2001
From: "Merlin (they/them)" <124289716+merlinpaypal@users.noreply.github.com>
Date: Wed, 3 Jul 2024 12:24:18 -0400
Subject: [PATCH] fix: add accessible text to donut

---
 src/components/modal/v2/parts/Donut.jsx | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/components/modal/v2/parts/Donut.jsx b/src/components/modal/v2/parts/Donut.jsx
index 5943a9c283..1afecfbcae 100644
--- a/src/components/modal/v2/parts/Donut.jsx
+++ b/src/components/modal/v2/parts/Donut.jsx
@@ -67,7 +67,11 @@ const Donut = ({
                 </svg>
             </span>
             {/* eslint-disable-next-line jsx-a11y/aria-role */}
-            <span aria-labelledby={`donut__payment__${currentNum} donut__timestamp__${currentNum}`} role="text">
+            <span aria-labelledby={`donut__sr_text_${currentNum}`} role="text">
+                <p className="sr-only" id={`donut__sr_text_${currentNum}`}>
+                    {/* the space before the comma is needed so the payment gets read correctly */}
+                    {isQualifying && periodicPayment !== '-' ? `${periodicPayment} , ${timeStamp}` : timeStamp}
+                </p>
                 {isQualifying && periodicPayment !== '-' && (
                     <span
                         className={isV4Design ? 'donut__payment_v4' : 'donut__payment'}