fix(AccountCard): sequence label/tooltip, subentry reserve indicator, aria-labelledby (#168)

src/components/AccountCard.test.tsx

@@ -45,6 +45,51 @@ describe("AccountCard", () => {
     expect(screen.getByText("2")).toBeInTheDocument();
   });
 
+  it("shows a Sequence Number label with an explanatory tooltip", () => {
+    vi.mocked(useSorokit).mockReturnValue({
+      address: "GABC",
+      account: { sequence: "123456", subentryCount: 2 },
+      isLoadingAccount: false,
+    } as unknown as ReturnType<typeof useSorokit>);
+
+    render(<AccountCard />);
+    const label = screen.getByText("Sequence Number");
+    expect(label).toBeInTheDocument();
+    expect(label).toHaveAttribute(
+      "title",
+      "Used to prevent duplicate transactions"
+    );
+  });
+
+  it("shows the XLM reserve impact for subentries", () => {
+    vi.mocked(useSorokit).mockReturnValue({
+      address: "GABC",
+      account: { sequence: "123456", subentryCount: 2 },
+      isLoadingAccount: false,
+    } as unknown as ReturnType<typeof useSorokit>);
+
+    render(<AccountCard />);
+    expect(
+      screen.getByText("Subentries: 2 (+1 XLM reserved)")
+    ).toBeInTheDocument();
+  });
+
+  it("associates the content region with the card heading via aria-labelledby", () => {
+    vi.mocked(useSorokit).mockReturnValue({
+      address: "GABC",
+      account: { sequence: "123456", subentryCount: 2 },
+      isLoadingAccount: false,
+    } as unknown as ReturnType<typeof useSorokit>);
+
+    const { container } = render(<AccountCard />);
+    const heading = container.querySelector("#account-card-heading");
+    const region = container.querySelector(
+      '[aria-labelledby="account-card-heading"]'
+    );
+    expect(heading).toBeInTheDocument();
+    expect(region).toBeInTheDocument();
+  });
+
   it("returns null when no address is present", () => {
     vi.mocked(useSorokit).mockReturnValue({
       address: null,

src/components/AccountCard.tsx

@@ -12,7 +12,7 @@ export function AccountCard() {
     <div className="rounded-xl border border-line bg-surface overflow-hidden">
       <div className="flex items-center justify-between px-5 py-4 border-b border-line">
         <div>
-          <h3 className="text-[14px] font-semibold text-ink">Account</h3>
+          <h3 id="account-card-heading" className="text-[14px] font-semibold text-ink">Account</h3>
           <p className="text-[12px] text-ink-3 mt-0.5">
             Stellar account details
           </p>
@@ -27,7 +27,7 @@ export function AccountCard() {
           )
         )}
       </div>
-      <div className="px-5 py-5">
+      <div className="px-5 py-5" aria-labelledby="account-card-heading">
         {isLoadingAccount ? (
           <div className="flex flex-col gap-4">
             <Skeleton className="h-4 w-full" />
@@ -43,11 +43,21 @@ export function AccountCard() {
                   <span className="font-mono text-[12px] text-ink-2">
                     {account.sequence}
                   </span>
+                  <span
+                    className="text-[10px] text-ink-4 cursor-help"
+                    title="Used to prevent duplicate transactions"
+                  >
+                    Sequence Number
+                  </span>
                 </Field>
                 <Field label="Subentries">
                   <span className="text-[13px] text-ink">
                     {account.subentryCount}
                   </span>
+                  <span className="text-[10px] text-ink-4">
+                    Subentries: {account.subentryCount} (+
+                    {Number(account.subentryCount) * 0.5} XLM reserved)
+                  </span>
                 </Field>
               </div>
             )}

vitest.config.ts

@@ -0,0 +1,17 @@
+import { defineConfig } from "vitest/config";
+import react from "@vitejs/plugin-react";
+import path from "path";
+
+export default defineConfig({
+  plugins: [react()],
+  test: {
+    globals: true,
+    environment: "jsdom",
+    setupFiles: ["./src/setupTests.ts"],
+  },
+  resolve: {
+    alias: {
+      "@": path.resolve(__dirname, "./src"),
+    },
+  },
+});