From e0dba938ea97eec0a204198cbaf048e8435297aa Mon Sep 17 00:00:00 2001
From: automated-signal <37887102+automated-signal@users.noreply.github.com>
Date: Wed, 20 Aug 2025 12:23:42 -0500
Subject: [PATCH] Fix donation receipts list noMouseClose

Co-authored-by: ayumi-signal <143036029+ayumi-signal@users.noreply.github.com>
---
 _locales/en/messages.json                     |  4 +
 .../components/PreferencesDonations.scss      |  9 +++
 ts/components/PreferencesDonations.tsx        | 74 ++++++++++---------
 3 files changed, 52 insertions(+), 35 deletions(-)

diff --git a/_locales/en/messages.json b/_locales/en/messages.json
index ac5b204bd6..119d5579b0 100644
--- a/_locales/en/messages.json
+++ b/_locales/en/messages.json
@@ -8878,6 +8878,10 @@
     "messageformat": "Receipts",
     "description": "Menu item to view donation receipts"
   },
+  "icu:PreferencesDonations__receipt-details-button-aria": {
+    "messageformat": "View receipt details",
+    "description": "Donation receipts list accessibility label for a single receipt."
+  },
   "icu:PreferencesDonations__faqs": {
     "messageformat": "Donation FAQs",
     "description": "Menu item to view donation FAQs"
diff --git a/stylesheets/components/PreferencesDonations.scss b/stylesheets/components/PreferencesDonations.scss
index ec9bc6c5e1..61caf5ce98 100644
--- a/stylesheets/components/PreferencesDonations.scss
+++ b/stylesheets/components/PreferencesDonations.scss
@@ -244,6 +244,15 @@
       );
     }
 
+    @include mixins.keyboard-mode {
+      &:focus {
+        background-color: light-dark(
+          variables.$color-gray-02,
+          variables.$color-gray-80
+        );
+      }
+    }
+
     // Currently only one time donations are possible
     &__icon {
       @include mixins.light-theme {
diff --git a/ts/components/PreferencesDonations.tsx b/ts/components/PreferencesDonations.tsx
index 3b3b5f3769..2be612e7a8 100644
--- a/ts/components/PreferencesDonations.tsx
+++ b/ts/components/PreferencesDonations.tsx
@@ -354,33 +354,20 @@ function PreferencesReceiptList({
     useState<DonationReceipt | null>(null);
   const [isDownloading, setIsDownloading] = useState(false);
 
-  const sortedReceipts = sortBy(
-    donationReceipts,
-    receipt => -receipt.timestamp
-  );
-  const receiptsByYear = groupBy(sortedReceipts, receipt =>
-    new Date(receipt.timestamp).getFullYear()
+  const hasReceipts = useMemo(
+    () => donationReceipts.length > 0,
+    [donationReceipts]
   );
 
-  const dateFormatter = getDateTimeFormatter({
-    month: 'short',
-    day: 'numeric',
-    year: 'numeric',
-  });
-
-  const preferredSystemLocales =
-    window.SignalContext.getPreferredSystemLocales();
-  const localeOverride = window.SignalContext.getLocaleOverride();
-  const locales =
-    localeOverride != null ? [localeOverride] : preferredSystemLocales;
-
-  const getCurrencyFormatter = (currencyType: string) =>
-    new Intl.NumberFormat(locales, {
-      style: 'currency',
-      currency: currencyType,
-    });
-
-  const hasReceipts = Object.keys(receiptsByYear).length > 0;
+  const receiptsByYear = useMemo(() => {
+    const sortedReceipts = sortBy(
+      donationReceipts,
+      receipt => -receipt.timestamp
+    );
+    return groupBy(sortedReceipts, receipt =>
+      new Date(receipt.timestamp).getFullYear()
+    );
+  }, [donationReceipts]);
 
   const handleDownloadReceipt = useCallback(async () => {
     if (!selectedReceipt) {
@@ -420,6 +407,24 @@ function PreferencesReceiptList({
     showToast,
   ]);
 
+  const dateFormatter = getDateTimeFormatter({
+    month: 'short',
+    day: 'numeric',
+    year: 'numeric',
+  });
+
+  const preferredSystemLocales =
+    window.SignalContext.getPreferredSystemLocales();
+  const localeOverride = window.SignalContext.getLocaleOverride();
+  const locales =
+    localeOverride != null ? [localeOverride] : preferredSystemLocales;
+
+  const getCurrencyFormatter = (currencyType: string) =>
+    new Intl.NumberFormat(locales, {
+      style: 'currency',
+      currency: currencyType,
+    });
+
   return (
     <div className="PreferencesDonations PreferencesDonations--receiptList">
       {hasReceipts ? (
@@ -438,14 +443,16 @@ function PreferencesReceiptList({
               <div className="PreferencesDonations--receiptList__year-header">
                 {year}
               </div>
-              <ListBox className="PreferencesDonations--receiptList__list">
+              <div className="PreferencesDonations--receiptList__list">
                 {receipts.map(receipt => (
-                  <ListBoxItem
+                  <button
+                    aria-label={i18n(
+                      'icu:PreferencesDonations__receipt-details-button-aria'
+                    )}
                     key={receipt.id}
                     className="PreferencesDonations--receiptList__receipt-item"
-                    onAction={() => {
-                      setSelectedReceipt(receipt);
-                    }}
+                    onClick={() => setSelectedReceipt(receipt)}
+                    type="button"
                   >
                     <div className="PreferencesDonations--receiptList__receipt-item__icon" />
                     <div className="PreferencesDonations--receiptList__receipt-item__details">
@@ -461,9 +468,9 @@ function PreferencesReceiptList({
                         getHumanDonationAmount(receipt)
                       )}
                     </div>
-                  </ListBoxItem>
+                  </button>
                 ))}
-              </ListBox>
+              </div>
             </div>
           ))}
         </>
@@ -483,9 +490,6 @@ function PreferencesReceiptList({
           i18n={i18n}
           modalName="ReceiptDetailsModal"
           moduleClassName="PreferencesDonations__ReceiptModal"
-          // TODO(DESKTOP-9100): the noMouseClose prop is a temporary
-          // workaround for buttons on the modal not working.
-          noMouseClose
           hasXButton
           title={i18n('icu:PreferencesDonations__ReceiptModal--title')}
           onClose={() => setSelectedReceipt(null)}