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