From 6fc0866032935af9389eee3b081d78b0a9bdf508 Mon Sep 17 00:00:00 2001
From: Federico Mastrini <federicomastrini93@gmail.com>
Date: Tue, 17 Oct 2023 16:45:42 +0200
Subject: [PATCH] fix: [IOBP-243] Fix `TransactionList` a11y (#5128)

## Short description
This PR fixes an accessibility issue in `TransactionList` elements,
which caused iOS VoiceOver to read the time and amount as a single
string.

## List of changes proposed in this pull request
- added `accessibilityLabel` to `ListItemTransaction` items

## How to test
With VoiceOver turned on, go to the transaction list on the wallet
screen and check that the amount is read correctly.

Co-authored-by: Martino Cesari Tomba <60693085+forrest57@users.noreply.github.com>
---
 ts/components/wallet/TransactionsList.tsx | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/ts/components/wallet/TransactionsList.tsx b/ts/components/wallet/TransactionsList.tsx
index f87ce553467..34a80c2f50c 100644
--- a/ts/components/wallet/TransactionsList.tsx
+++ b/ts/components/wallet/TransactionsList.tsx
@@ -22,6 +22,7 @@ import { H3 } from "../core/typography/H3";
 import { IOVisualCostants } from "../core/variables/IOStyles";
 import { EdgeBorderComponent } from "../screens/EdgeBorderComponent";
 import BoxedRefreshIndicator from "../ui/BoxedRefreshIndicator";
+import { getAccessibleAmountText } from "../../utils/accessibility";
 
 type Props = Readonly<{
   title: string;
@@ -110,15 +111,25 @@ export const TransactionsList = (props: Props) => {
     const item = info.item;
     const recipient = item.merchant;
 
-    const amount = formatNumberCurrencyCents(item.amount.amount);
+    const amountText = formatNumberCurrencyCents(item.amount.amount);
     const datetime: string = format(item.created, "DD MMM YYYY, HH:mm");
+
+    const accessibleDatetime: string = format(
+      item.created,
+      "DD MMMM YYYY, HH:mm"
+    );
+    const accessibleAmountText = getAccessibleAmountText(amountText);
+    const accessibilityLabel = `${recipient}; ${accessibleDatetime}; ${accessibleAmountText}`;
+
     return (
       <ListItemTransaction
         title={recipient}
         subtitle={datetime}
         onPress={() => props.navigateToTransactionDetails(item)}
         transactionStatus="success"
-        transactionAmount={amount}
+        transactionAmount={amountText}
+        accessible={true}
+        accessibilityLabel={accessibilityLabel}
       />
     );
   };