closed #70

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");
+    });
+  });
 });

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();
   });
-});
+});

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");
+    });
+  });
 });