From b3a7f5185a309735ab604ae0db88c4c06932f4ed Mon Sep 17 00:00:00 2001
From: Carlos Escalante <cescalante2988@gmail.com>
Date: Wed, 10 Jun 2026 18:03:55 -0600
Subject: [PATCH] Polish: aria-pressed toggles, deferred row styling, override
 hint

Fund visibility toggles and the header privacy/theme buttons expose
aria-pressed (FE-16); deferred transactions render struck-through and
muted so the state is visible at a glance (UX-05); the balance-override
input documents its keyboard contract (UX-21). The Budget CSV button
rides in the transactions tab header.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 .../src/components/budget/YearlyOverview.tsx  |  2 ++
 .../transactions/transaction-columns.tsx      |  1 +
 frontend/src/pages/Budget.tsx                 | 31 +++++++++++++------
 frontend/src/pages/Pensions.tsx               |  1 +
 4 files changed, 25 insertions(+), 10 deletions(-)

diff --git a/frontend/src/components/budget/YearlyOverview.tsx b/frontend/src/components/budget/YearlyOverview.tsx
index 9c354d5..4b17ab4 100644
--- a/frontend/src/components/budget/YearlyOverview.tsx
+++ b/frontend/src/components/budget/YearlyOverview.tsx
@@ -189,6 +189,8 @@ export default function YearlyOverview({
                       onChange={(e) => setEditValue(e.target.value)}
                       onBlur={handleSave}
                       onKeyDown={handleKeyDown}
+                      title="Enter para guardar · vacío para quitar el ajuste · Esc para cancelar"
+                      aria-description="Enter guarda; vacío quita el ajuste"
                       className="h-7 w-36 text-right font-mono text-sm ml-auto"
                       onClick={(e) => e.stopPropagation()}
                     />
diff --git a/frontend/src/components/transactions/transaction-columns.tsx b/frontend/src/components/transactions/transaction-columns.tsx
index 16afea0..0efa029 100644
--- a/frontend/src/components/transactions/transaction-columns.tsx
+++ b/frontend/src/components/transactions/transaction-columns.tsx
@@ -107,6 +107,7 @@ export function getTransactionColumns({
             className={cn(
               'font-mono font-medium',
               tx.transaction_type !== 'COMPRA' && 'text-primary',
+              tx.deferred_to_next_cycle && 'opacity-50 line-through decoration-muted-foreground/60',
             )}
           >
             {tx.transaction_type === 'COMPRA' ? '-' : '+'}
diff --git a/frontend/src/pages/Budget.tsx b/frontend/src/pages/Budget.tsx
index b644a6a..28b32bf 100644
--- a/frontend/src/pages/Budget.tsx
+++ b/frontend/src/pages/Budget.tsx
@@ -1,5 +1,5 @@
 import { useState, useCallback } from 'react';
-import { ChevronLeft, ChevronRight, Calculator } from 'lucide-react';
+import { ChevronLeft, ChevronRight, Calculator, Download } from 'lucide-react';
 import { useQuery, useQueryClient } from '@tanstack/react-query';
 import { toast } from 'sonner';
 
@@ -171,15 +171,26 @@ export default function Budget() {
             </TabsContent>
 
             <TabsContent value="transactions" className="space-y-3 mt-4">
-              <Tabs
-                value={txSource}
-                onValueChange={(v) => setTxSource(v as typeof txSource)}
-              >
-                <TabsList>
-                  <TabsTrigger value="CREDIT_CARD">Tarjeta</TabsTrigger>
-                  <TabsTrigger value="CASH_AND_TRANSFER">Efectivo y Transferencias</TabsTrigger>
-                </TabsList>
-              </Tabs>
+              <div className="flex items-center justify-between gap-2">
+                <Tabs
+                  value={txSource}
+                  onValueChange={(v) => setTxSource(v as typeof txSource)}
+                >
+                  <TabsList>
+                    <TabsTrigger value="CREDIT_CARD">Tarjeta</TabsTrigger>
+                    <TabsTrigger value="CASH_AND_TRANSFER">Efectivo y Transferencias</TabsTrigger>
+                  </TabsList>
+                </Tabs>
+                <Button
+                  variant="outline"
+                  size="sm"
+                  onClick={() => window.open('/api/v1/transactions/export', '_blank')}
+                  title="Descargar todas las transacciones como CSV"
+                >
+                  <Download className="w-4 h-4 mr-2" aria-hidden="true" />
+                  CSV
+                </Button>
+              </div>
               {txQuery.isError ? (
                 <ErrorState
                   message="No se pudieron cargar las transacciones"
diff --git a/frontend/src/pages/Pensions.tsx b/frontend/src/pages/Pensions.tsx
index 8f57f57..e2d6d84 100644
--- a/frontend/src/pages/Pensions.tsx
+++ b/frontend/src/pages/Pensions.tsx
@@ -523,6 +523,7 @@ export default function Pensions() {
                   <button
                     key={key}
                     onClick={() => toggleFund(key)}
+                    aria-pressed={active}
                     className="flex items-center gap-1.5 px-3 py-1.5 rounded-full text-xs font-medium transition-all border cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
                     style={{
                       borderColor: fund.color,