From 53f9b56004651605d24aaac2f289af2a0862d338 Mon Sep 17 00:00:00 2001
From: KayProject <jadonsunshine@gmail.com>
Date: Tue, 30 Jun 2026 09:58:48 +0100
Subject: [PATCH] fix(TransactionHistory): show feePaid, truncate long memos,
 add accessible row label

- Render the feePaid value in each TxRow ('Fee: N stroops')
- Cap memo display at 20 chars with the full value in a title tooltip
- Wrap each row in an <article role=listitem> with an aria-label summarising
  hash, status, ledger and fee for screen-reader users

Closes #167
---
 src/components/TransactionHistory.tsx | 18 +++++++++++++++---
 1 file changed, 15 insertions(+), 3 deletions(-)

diff --git a/src/components/TransactionHistory.tsx b/src/components/TransactionHistory.tsx
index 18813ea..1b6e892 100644
--- a/src/components/TransactionHistory.tsx
+++ b/src/components/TransactionHistory.tsx
@@ -26,8 +26,15 @@ function TxRow({ tx }: { tx: Transaction }) {
     day: "numeric",
   });
 
+  const memoTruncated =
+    tx.memo && tx.memo.length > 20 ? `${tx.memo.slice(0, 20)}…` : tx.memo;
+
   return (
-    <div className="flex items-center justify-between px-5 py-3.5 border-b border-line last:border-0 gap-4">
+    <article
+      role="listitem"
+      aria-label={`Transaction ${truncateAddress(tx.hash, 10, 6)}, ${tx.successful ? "successful" : "failed"}, ledger ${tx.ledger}, fee ${tx.feePaid} stroops`}
+      className="flex items-center justify-between px-5 py-3.5 border-b border-line last:border-0 gap-4"
+    >
       <div className="flex items-center gap-3 min-w-0">
         {/* Status icon */}
         <div
@@ -48,8 +55,13 @@ function TxRow({ tx }: { tx: Transaction }) {
           </span>
           <div className="flex items-center gap-2">
             <span className="text-[10px] text-ink-3">Ledger {tx.ledger}</span>
+            <span className="text-[10px] text-ink-3">
+              · Fee: {tx.feePaid} stroops
+            </span>
             {tx.memo && (
-              <span className="text-[10px] text-ink-3">· {tx.memo}</span>
+              <span className="text-[10px] text-ink-3" title={tx.memo}>
+                · {memoTruncated}
+              </span>
             )}
           </div>
         </div>
@@ -63,7 +75,7 @@ function TxRow({ tx }: { tx: Transaction }) {
           {dateStr} {timeStr}
         </span>
       </div>
-    </div>
+    </article>
   );
 }