From 66b0062c6b11bf9cce75d4dd2af12a2e6a7e1384 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Wed, 2 Sep 2026 17:08:23 +0000
Subject: [PATCH 1/2] =?UTF-8?q?fix:=20l=C3=A1pis=20de=20editar=20em=20/cat?=
 =?UTF-8?q?egorias=20e=20/contas=20ganham=20aria-label=20(closes=20#127)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Os três diálogos de edição (CategoryDialog, GroupDialog, AccountDialog) usam
um <Button size="icon" variant="ghost"> cujo único filho é um <Pencil> do
lucide-react, sem aria-label/title/sr-only. lucide-react está pinado em
1.8.0 e marca o ícone como aria-hidden quando não recebe filho nem prop de
a11y, então o role=button ficava sem nenhuma fonte de nome (WCAG 4.1.2).

Rotula o <Button>, não o ícone, seguindo o padrão já usado pelos 6 outros
diálogos de edição do repo (WithdrawalEditButton, ContributionEditButton,
InstallmentGroupEditDialog, IncomeEditDialog, TransactionEditDialog,
FixedExpenseEditDialog).

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01UpoqDa8kyqy7ewGn28LM2a
---
 __tests__/unit/a11y-nomes-acessiveis.test.ts | 57 ++++++++++++++++++++
 components/categorias/CategoryDialog.tsx     |  1 +
 components/categorias/GroupDialog.tsx        |  1 +
 components/contas/AccountDialog.tsx          |  1 +
 4 files changed, 60 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..92fa1c1
--- /dev/null
+++ b/__tests__/unit/a11y-nomes-acessiveis.test.ts
@@ -0,0 +1,57 @@
+import { describe, it, expect } from 'vitest'
+import { readFileSync } from 'node:fs'
+import { join } from 'node:path'
+
+// ─── Botões só de ícone sem nome acessível (#106) ──────────────────────────
+//
+// Não há infra de render de componente no projeto (sem jsdom/testing-library).
+// O gate possível é sobre o texto-fonte, padrão já usado em row-actions.test.ts
+// (#54) e a11y-estado-selecao.test.ts (#107).
+//
+// A asserção precisa ancorar no <Button> que envolve o ícone, não no arquivo
+// inteiro — senão um aria-label em qualquer outro botão do mesmo arquivo
+// deixaria o teste verde com o gatilho ainda sem nome.
+
+function findClosestButtonWithIcon(source: string, iconTag: string): string | undefined {
+  // Ancora no <Button> MAIS PRÓXIMO do ícone: a lookahead negativa impede o
+  // match de atravessar outro "<Button" antes de alcançar o ícone-alvo — sem
+  // isso um regex guloso/lazy simples pegaria o botão de criar ("+ Categoria",
+  // "+ Novo grupo", "+ Nova conta"), que abre antes do de editar no mesmo
+  // arquivo e também usa onClick={() => setOpen(true)}.
+  const pattern = new RegExp(
+    `<Button\\b(?:(?!<Button\\b)[\\s\\S])*?<${iconTag}\\b[\\s\\S]*?<\\/Button>`
+  )
+  return source.match(pattern)?.[0]
+}
+
+describe('Lápis de editar — cadastro (#127)', () => {
+  const cases = [
+    {
+      name: 'CategoryDialog — editar categoria',
+      path: 'components/categorias/CategoryDialog.tsx',
+    },
+    {
+      name: 'GroupDialog — editar grupo',
+      path: 'components/categorias/GroupDialog.tsx',
+    },
+    {
+      name: 'AccountDialog — editar conta',
+      path: 'components/contas/AccountDialog.tsx',
+    },
+  ]
+
+  for (const { name, path } of cases) {
+    describe(name, () => {
+      const source = readFileSync(join(process.cwd(), path), 'utf-8')
+      const trigger = findClosestButtonWithIcon(source, 'Pencil')
+
+      it('encontra o bloco do botão de editar (o mais próximo do ícone Pencil)', () => {
+        expect(trigger).toBeDefined()
+      })
+
+      it('expõe aria-label no <Button> do gatilho, não no ícone', () => {
+        expect(trigger).toMatch(/^\s*aria-label="[^"]+"\s*$/m)
+      })
+    })
+  }
+})
diff --git a/components/categorias/CategoryDialog.tsx b/components/categorias/CategoryDialog.tsx
index 08b16f6..6dd6598 100644
--- a/components/categorias/CategoryDialog.tsx
+++ b/components/categorias/CategoryDialog.tsx
@@ -158,6 +158,7 @@ export function CategoryDialog(props: Props) {
           variant="ghost"
           className="h-7 w-7 text-text-tertiary hover:text-text-primary"
           onClick={() => setOpen(true)}
+          aria-label="Editar categoria"
         >
           <Pencil className="h-3.5 w-3.5" />
         </Button>
diff --git a/components/categorias/GroupDialog.tsx b/components/categorias/GroupDialog.tsx
index c1715f2..93e79d6 100644
--- a/components/categorias/GroupDialog.tsx
+++ b/components/categorias/GroupDialog.tsx
@@ -90,6 +90,7 @@ export function GroupDialog(props: Props) {
           variant="ghost"
           className="h-7 w-7 text-text-tertiary hover:text-text-primary"
           onClick={() => setOpen(true)}
+          aria-label="Editar grupo"
         >
           <Pencil className="h-3.5 w-3.5" />
         </Button>
diff --git a/components/contas/AccountDialog.tsx b/components/contas/AccountDialog.tsx
index bce29c3..19175b9 100644
--- a/components/contas/AccountDialog.tsx
+++ b/components/contas/AccountDialog.tsx
@@ -166,6 +166,7 @@ export function AccountDialog(props: Props) {
         variant="ghost"
         className="h-7 w-7 text-text-tertiary hover:text-text-primary"
         onClick={() => setOpen(true)}
+        aria-label="Editar conta"
       >
         <Pencil className="h-3.5 w-3.5" />
       </Button>

From b565b05e3b96c57376120d083874b9b367707f6f Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Thu, 3 Sep 2026 19:18:23 +0000
Subject: [PATCH 2/2] =?UTF-8?q?fix:=20para=20o=20gate=20de=20a11y=20no=20i?=
 =?UTF-8?q?n=C3=ADcio=20do=20=C3=ADcone,=20n=C3=A3o=20em=20</Button>?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Review em #140: a asserção de aria-label ancorava até "</Button>", então
os atributos do próprio ícone entravam no trecho testado. Um aria-label
colocado por engano no <Pencil> (em vez do <Button>) passava a asserção
de linha isolada sempre que o prettier quebrasse os atributos do ícone
em múltiplas linhas — exatamente o erro que a issue #127 existe para
barrar. Truncar a captura em "<Pencil\b" tira os atributos do ícone do
trecho e fecha a lacuna, sem enfraquecer nenhuma das rejeições existentes
(revert, aria-label no botão de criar).

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01UpoqDa8kyqy7ewGn28LM2a
---
 __tests__/unit/a11y-nomes-acessiveis.test.ts | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/__tests__/unit/a11y-nomes-acessiveis.test.ts b/__tests__/unit/a11y-nomes-acessiveis.test.ts
index 92fa1c1..32684c4 100644
--- a/__tests__/unit/a11y-nomes-acessiveis.test.ts
+++ b/__tests__/unit/a11y-nomes-acessiveis.test.ts
@@ -18,9 +18,12 @@ function findClosestButtonWithIcon(source: string, iconTag: string): string | un
   // isso um regex guloso/lazy simples pegaria o botão de criar ("+ Categoria",
   // "+ Novo grupo", "+ Nova conta"), que abre antes do de editar no mesmo
   // arquivo e também usa onClick={() => setOpen(true)}.
-  const pattern = new RegExp(
-    `<Button\\b(?:(?!<Button\\b)[\\s\\S])*?<${iconTag}\\b[\\s\\S]*?<\\/Button>`
-  )
+  //
+  // Para no início da tag do ícone (não em "</Button>"): estender até o fechamento
+  // incluiria os atributos do próprio ícone no trecho, e um aria-label colocado
+  // ali por engano (o erro que esta issue existe para barrar) passaria a asserção
+  // de linha isolada sempre que o prettier quebrasse os atributos do ícone.
+  const pattern = new RegExp(`<Button\\b(?:(?!<Button\\b)[\\s\\S])*?<${iconTag}\\b`)
   return source.match(pattern)?.[0]
 }