From 78abca6e154f5fca4dacec72edac7422174ade93 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Thu, 3 Sep 2026 17:05:49 +0000
Subject: [PATCH] fix: aria-label nos dois X de SplitSection.tsx (closes #129)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Os botões de fechar divisão e remover pessoa usam o mesmo ícone X do
lucide-react sem nome acessível — role=button sem fonte de nome, já que
lucide-react@1.8.0 marca o svg como aria-hidden quando não recebe filho
nem prop de a11y. Rótulos distintos para os dois estados.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01L2ttiXUNPukdqzYnnmuzw7
---
 __tests__/unit/a11y-nomes-acessiveis.test.ts  | 43 +++++++++++++++++++
 components/forms/transaction/SplitSection.tsx |  2 +
 2 files changed, 45 insertions(+)
 create mode 100644 __tests__/unit/a11y-nomes-acessiveis.test.ts

diff --git a/__tests__/unit/a11y-nomes-acessiveis.test.ts b/__tests__/unit/a11y-nomes-acessiveis.test.ts
new file mode 100644
index 0000000..e3ca82d
--- /dev/null
+++ b/__tests__/unit/a11y-nomes-acessiveis.test.ts
@@ -0,0 +1,43 @@
+import { describe, it, expect } from 'vitest'
+import { readFileSync } from 'node:fs'
+import { join } from 'node:path'
+
+// ─── SplitSection — dois "X" idênticos sem nome acessível (#129) ──────────
+//
+// `lucide-react@1.8.0` (pinado em package.json) marca o <svg> do ícone como
+// aria-hidden="true" quando não recebe filho nem prop de a11y — sem
+// aria-label no <Button>, o role=button chega ao leitor de tela sem nome.
+//
+// SplitSection.tsx tem 5 <Button> no total (o "Dividir com alguém", os dois
+// <X>, e mais dois no rodapé), e os dois sites em risco usam o mesmo ícone
+// <X> — um `toMatch(/aria-label/)` genérico sobre o arquivo passaria com
+// qualquer um deles rotulado, e um recorte que pegue só a primeira
+// ocorrência deixaria o segundo site descoberto. O gate precisa: (1) achar
+// os dois <Button> que envolvem um <X>, (2) exigir aria-label em ambos, e
+// (3) exigir que os rótulos sejam distintos — o defeito original é a
+// ambiguidade entre "fechar tudo" e "remover uma pessoa", não a ausência
+// isolada de nome.
+
+const splitSection = readFileSync(
+  join(process.cwd(), 'components/forms/transaction/SplitSection.tsx'),
+  'utf-8'
+)
+
+describe('SplitSection — os dois botões "X" têm nomes distintos (#129)', () => {
+  it('tem exatamente dois <Button> envolvendo um <X>', () => {
+    const gatilhos = [...splitSection.matchAll(/<Button\b(?:(?!<Button)[\s\S])*?<X\b/g)].map(
+      (m) => m[0]
+    )
+    expect(gatilhos).toHaveLength(2)
+  })
+
+  it('cada gatilho tem aria-label, e os dois rótulos são distintos', () => {
+    const gatilhos = [...splitSection.matchAll(/<Button\b(?:(?!<Button)[\s\S])*?<X\b/g)].map(
+      (m) => m[0]
+    )
+    const rotulos = gatilhos.map((g) => g.match(/^\s*aria-label="([^"]+)"$/m)?.[1])
+
+    expect(rotulos.every(Boolean)).toBe(true)
+    expect(new Set(rotulos).size).toBe(2)
+  })
+})
diff --git a/components/forms/transaction/SplitSection.tsx b/components/forms/transaction/SplitSection.tsx
index 6c4cb0b..7542b9d 100644
--- a/components/forms/transaction/SplitSection.tsx
+++ b/components/forms/transaction/SplitSection.tsx
@@ -148,6 +148,7 @@ export function SplitSection({ people, totalCents, onChange, onIntegralChange }:
           variant="ghost"
           size="icon"
           onClick={handleClose}
+          aria-label="Fechar divisão"
           className="text-text-tertiary hover:text-text-primary"
         >
           <X className="h-4 w-4" />
@@ -186,6 +187,7 @@ export function SplitSection({ people, totalCents, onChange, onIntegralChange }:
                 variant="ghost"
                 size="icon"
                 onClick={() => removePerson(entry.uid)}
+                aria-label="Remover pessoa da divisão"
                 className="mb-0.5 flex-shrink-0 text-text-tertiary hover:text-negative"
               >
                 <X className="h-4 w-4" />