feat(ConnectButton): expose full address via aria-label for accessibi…

[Agencybuilds]

Closes #135

Problem

ConnectButton (src/components/ConnectButton.tsx) displayed the connected wallet address using truncateAddress() from src/lib/wallet.ts, which shortens the full 56-character Stellar public key into a form like GABC…WXYZ.

The button carried only a static title="Disconnect" attribute — a mouse-only tooltip that:

• Tells the user nothing about which address is connected
• Is invisible to screen readers and other assistive technology
• Requires opening DevTools or navigating away to verify the full address

This created an accessibility gap: users relying on assistive technology (and even sighted users who want to double-check their connected account) had no reliable way to discover the full address.

---

🔧 Solution

Added a single aria-label attribute to the connected-state <button> element that combines:

1. The disconnect intent — so assistive technology understands the button's action
2. The full, untruncated Stellar public key — so users can verify their account

The format is:

Disconnect – GABCDEFGHIJ...FULLADDRESS...WXYZ

This satisfies WCAG 2.1 Success Criterion 1.3.1 (Info and Relationships) and 4.1.2 (Name, Role, Value) by providing a meaningful accessible name that goes beyond the truncated visible text.

---

📁 Files Changed

src/components/ConnectButton.tsx

  <button
    onClick={() => setConfirmOpen(true)}
    className="rounded-lg border border-zinc-700 px-3 py-1.5 text-xs font-medium text-zinc-200 hover:bg-zinc-800"
    title="Disconnect"
+   aria-label={`Disconnect – ${account.address}`}
  >
    {truncateAddress(account.address)}
  </button>

What changed: One attribute added. Nothing else.

What did NOT change:

• The visible truncated text (GABC…WXYZ) — still rendered via truncateAddress()
• The title="Disconnect" mouse tooltip — still present
• The onClick handler and ConfirmDialog disconnect flow — completely untouched
• All styles and class names — unchanged

---

src/components/ConnectButton.test.tsx

Added one new test case inside the existing describe("ConnectButton") block:

it("exposes the full wallet address in aria-label when connected", async () => {
  await connectWallet();
  // The button's accessible name must contain the full Stellar address
  // (56-character G... key) so assistive technology and automated tests
  // can discover it without relying on the truncated visible text.
  const btn = screen.getByTitle("Disconnect");
  const ariaLabel = btn.getAttribute("aria-label") ?? "";
  expect(ariaLabel).toMatch(/^Disconnect \u2013 G[A-Z0-9]{55}$/);
});

What this test asserts:

• After connecting, the button has an aria-label
• It starts with "Disconnect – "
• It is followed by a valid full Stellar public key (G + 55 uppercase alphanumeric chars)
• The regex anchors (^ and $) ensure no extra content sneaks in

All 8 existing tests remain untouched — the title="Disconnect" attribute used by those tests is still present on the element.

---

✅ Acceptance Criteria

Requirement	Outcome
Full address accessible via an attribute	✅ aria-label="Disconnect – <full 56-char address>"
Available to assistive technology (not just title)	✅ aria-label is read by all screen readers; title alone is not
Visible truncated text unchanged	✅ truncateAddress() still renders GABC…WXYZ
title="Disconnect" tooltip unchanged	✅ Still present for mouse users
Connect/disconnect behavior unchanged	✅ Zero changes to onClick, useWallet, or ConfirmDialog
Test coverage for the new attribute	✅ 1 new targeted test added
No changes outside the two specified files	✅ Only ConnectButton.tsx and ConnectButton.test.tsx touched

---

🔒 Security

The wallet address is a Stellar public key (G...) — public by design, already rendered in the DOM via the truncated text. Adding it to aria-label introduces zero new sensitive data exposure.

---

🧪 How to Test

# Run only the ConnectButton test suite
npm test -- src/components/ConnectButton.test.tsx

# Or with vitest directly
npx vitest run src/components/ConnectButton.test.tsx --reporter=verbose

Manually: Connect the mock wallet in the UI, then inspect the button element in DevTools — the aria-label attribute should read Disconnect – G<full address>.