From a80ac693a0e1dcde695f6a09301f02563c9b7261 Mon Sep 17 00:00:00 2001
From: Nimi <120312489+emmyoat@users.noreply.github.com>
Date: Wed, 22 Jul 2026 22:23:43 +0100
Subject: [PATCH 1/3] Enhance PoolTable tests for aria-sort behavior

Add tests for aria-sort accessibility and functionality in PoolTable component.
---
 src/components/PoolTable.test.tsx | 71 ++++++++++++++++++++++++++++++-
 1 file changed, 70 insertions(+), 1 deletion(-)

diff --git a/src/components/PoolTable.test.tsx b/src/components/PoolTable.test.tsx
index 8e4a5e2..fc9a41e 100644
--- a/src/components/PoolTable.test.tsx
+++ b/src/components/PoolTable.test.tsx
@@ -70,6 +70,75 @@ describe("PoolTable", () => {
     expect(tfoot).toHaveTextContent("500");
     expect(tfoot).toHaveTextContent("3 anchors");
   });
+
+  describe("initial aria-sort accessibility", () => {
+    it("announces all column headers as aria-sort=none on initial render", () => {
+      render(<PoolTable pools={pools} />);
+
+      const assetHeader = screen.getByLabelText("Sort by Asset").closest("th");
+      const liquidityHeader = screen
+        .getByLabelText("Sort by Total liquidity")
+        .closest("th");
+      const anchorsHeader = screen.getByLabelText("Sort by Anchors").closest("th");
+
+      expect(assetHeader).toHaveAttribute("aria-sort", "none");
+      expect(liquidityHeader).toHaveAttribute("aria-sort", "none");
+      expect(anchorsHeader).toHaveAttribute("aria-sort", "none");
+    });
+
+    it("updates aria-sort to ascending on first column click", () => {
+      render(<PoolTable pools={pools} />);
+      const header = screen
+        .getByLabelText("Sort by Total liquidity")
+        .closest("th");
+
+      expect(header).toHaveAttribute("aria-sort", "none");
+
+      fireEvent.click(screen.getByLabelText("Sort by Total liquidity"));
+      expect(header).toHaveAttribute("aria-sort", "ascending");
+    });
+
+    it("updates aria-sort to descending on second column click", () => {
+      render(<PoolTable pools={pools} />);
+      const header = screen
+        .getByLabelText("Sort by Total liquidity")
+        .closest("th");
+
+      fireEvent.click(screen.getByLabelText("Sort by Total liquidity"));
+      fireEvent.click(screen.getByLabelText("Sort by Total liquidity"));
+      expect(header).toHaveAttribute("aria-sort", "descending");
+    });
+
+    it("resets aria-sort to none on third column click", () => {
+      render(<PoolTable pools={pools} />);
+      const header = screen
+        .getByLabelText("Sort by Total liquidity")
+        .closest("th");
+
+      fireEvent.click(screen.getByLabelText("Sort by Total liquidity"));
+      fireEvent.click(screen.getByLabelText("Sort by Total liquidity"));
+      fireEvent.click(screen.getByLabelText("Sort by Total liquidity"));
+      expect(header).toHaveAttribute("aria-sort", "none");
+    });
+
+    it("switches aria-sort between columns when clicking different headers", () => {
+      render(<PoolTable pools={pools} />);
+      const assetHeader = screen.getByLabelText("Sort by Asset").closest("th");
+      const liquidityHeader = screen
+        .getByLabelText("Sort by Total liquidity")
+        .closest("th");
+
+      // Click Asset (first sort)
+      fireEvent.click(screen.getByLabelText("Sort by Asset"));
+      expect(assetHeader).toHaveAttribute("aria-sort", "ascending");
+      expect(liquidityHeader).toHaveAttribute("aria-sort", "none");
+
+      // Click Liquidity (switches to that column, ascending)
+      fireEvent.click(screen.getByLabelText("Sort by Total liquidity"));
+      expect(assetHeader).toHaveAttribute("aria-sort", "none");
+      expect(liquidityHeader).toHaveAttribute("aria-sort", "ascending");
+    });
+  });
 });
 
 describe("PoolsPanel", () => {
@@ -90,4 +159,4 @@ describe("PoolsPanel", () => {
       within(searchRegion).getByRole("button", { name: /refresh/i }),
     ).toBeInTheDocument();
   });
-});
\ No newline at end of file
+});

From e05d7947dd628a48fa411cfe39ea65fe4b1e68be Mon Sep 17 00:00:00 2001
From: Nimi <120312489+emmyoat@users.noreply.github.com>
Date: Wed, 22 Jul 2026 22:24:13 +0100
Subject: [PATCH 2/3] Add tests for aria-sort accessibility in AnchorTable

---
 src/components/AnchorTable.test.tsx | 63 +++++++++++++++++++++++++++++
 1 file changed, 63 insertions(+)

diff --git a/src/components/AnchorTable.test.tsx b/src/components/AnchorTable.test.tsx
index d4d5200..c8da52c 100644
--- a/src/components/AnchorTable.test.tsx
+++ b/src/components/AnchorTable.test.tsx
@@ -79,4 +79,67 @@ describe("AnchorTable", () => {
     );
     expect(screen.getAllByText("Deactivate")).toHaveLength(1);
   });
+
+  describe("initial aria-sort accessibility", () => {
+    it("announces all column headers as aria-sort=none on initial render", () => {
+      render(<AnchorTable anchors={anchors} />);
+
+      const nameHeader = screen.getByLabelText("Sort by Anchor").closest("th");
+      const registeredHeader = screen
+        .getByLabelText("Sort by Registered")
+        .closest("th");
+      const statusHeader = screen.getByLabelText("Sort by Status").closest("th");
+
+      expect(nameHeader).toHaveAttribute("aria-sort", "none");
+      expect(registeredHeader).toHaveAttribute("aria-sort", "none");
+      expect(statusHeader).toHaveAttribute("aria-sort", "none");
+    });
+
+    it("updates aria-sort to ascending on first column click", () => {
+      render(<AnchorTable anchors={anchors} />);
+      const header = screen.getByLabelText("Sort by Anchor").closest("th");
+
+      expect(header).toHaveAttribute("aria-sort", "none");
+
+      fireEvent.click(screen.getByLabelText("Sort by Anchor"));
+      expect(header).toHaveAttribute("aria-sort", "ascending");
+    });
+
+    it("updates aria-sort to descending on second column click", () => {
+      render(<AnchorTable anchors={anchors} />);
+      const header = screen.getByLabelText("Sort by Anchor").closest("th");
+
+      fireEvent.click(screen.getByLabelText("Sort by Anchor"));
+      fireEvent.click(screen.getByLabelText("Sort by Anchor"));
+      expect(header).toHaveAttribute("aria-sort", "descending");
+    });
+
+    it("resets aria-sort to none on third column click", () => {
+      render(<AnchorTable anchors={anchors} />);
+      const header = screen.getByLabelText("Sort by Anchor").closest("th");
+
+      fireEvent.click(screen.getByLabelText("Sort by Anchor"));
+      fireEvent.click(screen.getByLabelText("Sort by Anchor"));
+      fireEvent.click(screen.getByLabelText("Sort by Anchor"));
+      expect(header).toHaveAttribute("aria-sort", "none");
+    });
+
+    it("switches aria-sort between columns when clicking different headers", () => {
+      render(<AnchorTable anchors={anchors} />);
+      const nameHeader = screen.getByLabelText("Sort by Anchor").closest("th");
+      const registeredHeader = screen
+        .getByLabelText("Sort by Registered")
+        .closest("th");
+
+      // Click Anchor (first sort)
+      fireEvent.click(screen.getByLabelText("Sort by Anchor"));
+      expect(nameHeader).toHaveAttribute("aria-sort", "ascending");
+      expect(registeredHeader).toHaveAttribute("aria-sort", "none");
+
+      // Click Registered (switches to that column, ascending)
+      fireEvent.click(screen.getByLabelText("Sort by Registered"));
+      expect(nameHeader).toHaveAttribute("aria-sort", "none");
+      expect(registeredHeader).toHaveAttribute("aria-sort", "ascending");
+    });
+  });
 });

From c78685e3c6f66ba0ca8e97e9fdbdd78154694659 Mon Sep 17 00:00:00 2001
From: Nimi <120312489+emmyoat@users.noreply.github.com>
Date: Wed, 22 Jul 2026 22:24:44 +0100
Subject: [PATCH 3/3] Add tests for aria-sort accessibility in SettlementTable

---
 src/components/SettlementTable.test.tsx | 59 +++++++++++++++++++++++++
 1 file changed, 59 insertions(+)

diff --git a/src/components/SettlementTable.test.tsx b/src/components/SettlementTable.test.tsx
index f03fab8..c9561b3 100644
--- a/src/components/SettlementTable.test.tsx
+++ b/src/components/SettlementTable.test.tsx
@@ -125,4 +125,63 @@ describe("SettlementTable sorting", () => {
     fireEvent.click(screen.getByLabelText("Sort by Amount"));
     expect(header).toHaveAttribute("aria-sort", "descending");
   });
+
+  describe("initial aria-sort accessibility", () => {
+    it("announces all column headers as aria-sort=none on initial render", () => {
+      render(<SettlementTable settlements={settlements} />);
+
+      const anchorHeader = screen.getByLabelText("Sort by Anchor").closest("th");
+      const amountHeader = screen.getByLabelText("Sort by Amount").closest("th");
+      const statusHeader = screen.getByLabelText("Sort by Status").closest("th");
+
+      expect(anchorHeader).toHaveAttribute("aria-sort", "none");
+      expect(amountHeader).toHaveAttribute("aria-sort", "none");
+      expect(statusHeader).toHaveAttribute("aria-sort", "none");
+    });
+
+    it("updates aria-sort to ascending on first column click", () => {
+      render(<SettlementTable settlements={settlements} />);
+      const header = screen.getByLabelText("Sort by Amount").closest("th");
+
+      expect(header).toHaveAttribute("aria-sort", "none");
+
+      fireEvent.click(screen.getByLabelText("Sort by Amount"));
+      expect(header).toHaveAttribute("aria-sort", "ascending");
+    });
+
+    it("updates aria-sort to descending on second column click", () => {
+      render(<SettlementTable settlements={settlements} />);
+      const header = screen.getByLabelText("Sort by Amount").closest("th");
+
+      fireEvent.click(screen.getByLabelText("Sort by Amount"));
+      fireEvent.click(screen.getByLabelText("Sort by Amount"));
+      expect(header).toHaveAttribute("aria-sort", "descending");
+    });
+
+    it("resets aria-sort to none on third column click", () => {
+      render(<SettlementTable settlements={settlements} />);
+      const header = screen.getByLabelText("Sort by Amount").closest("th");
+
+      fireEvent.click(screen.getByLabelText("Sort by Amount"));
+      fireEvent.click(screen.getByLabelText("Sort by Amount"));
+      fireEvent.click(screen.getByLabelText("Sort by Amount"));
+      expect(header).toHaveAttribute("aria-sort", "none");
+    });
+
+    it("switches aria-sort between columns when clicking different headers", () => {
+      render(<SettlementTable settlements={settlements} />);
+      const anchorHeader = screen.getByLabelText("Sort by Anchor").closest("th");
+      const amountHeader = screen.getByLabelText("Sort by Amount").closest("th");
+
+      // Click Anchor (first sort)
+      fireEvent.click(screen.getByLabelText("Sort by Anchor"));
+      expect(anchorHeader).toHaveAttribute("aria-sort", "ascending");
+      expect(amountHeader).toHaveAttribute("aria-sort", "none");
+
+      // Click Amount (switches to that column, ascending)
+      fireEvent.click(screen.getByLabelText("Sort by Amount"));
+      expect(anchorHeader).toHaveAttribute("aria-sort", "none");
+      expect(amountHeader).toHaveAttribute("aria-sort", "ascending");
+    });
+  });
 });