pagination: activate page items with Space key

src/lib/components/Pagination/Pagination.js

@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2018-2022 CERN.
+ * SPDX-FileCopyrightText: 2018-2026 CERN.
  * SPDX-License-Identifier: MIT
  */
 
@@ -10,6 +10,21 @@ import { Pagination as Paginator } from "semantic-ui-react";
 import { AppContext } from "../ReactSearchKit";
 import { ShouldRender } from "../ShouldRender";
 
+const a11yPaginationItem = (Item, itemProps) => (
+  <Item
+    {...itemProps}
+    role="button"
+    onKeyDown={(event) => {
+      // ARIA button pattern: activate on "Space" in addition to "Enter".
+      // Mirrors the existing "Enter" handling in semantic-ui-react's PaginationItem.
+      if (event.key === " " && !itemProps.disabled) {
+        event.preventDefault(); // prevent page scroll
+        itemProps.onClick(event, itemProps);
+      }
+    }}
+  />
+);
+
 const defaultOptions = {
   boundaryRangeCount: 1,
   siblingRangeCount: 1,
@@ -141,6 +156,7 @@ const Element = ({
         lastItem={showLast ? undefined : null}
         prevItem={showPrev ? undefined : null}
         nextItem={showNext ? undefined : null}
+        pageItem={a11yPaginationItem}
         size={size}
         {...props}
       />

src/lib/components/Pagination/Pagination.test.js

@@ -0,0 +1,64 @@
+/*
+ * SPDX-FileCopyrightText: 2026 CERN.
+ * SPDX-License-Identifier: MIT
+ */
+import { mount } from "enzyme";
+import React from "react";
+import { AppContext } from "../ReactSearchKit/AppContext";
+import Pagination from "./Pagination";
+
+describe("test Pagination component", () => {
+  const mountPagination = (mockUpdateQueryPage) =>
+    mount(
+      <AppContext.Provider value={{ buildUID: (id) => id }}>
+        <Pagination
+          currentPage={1}
+          currentSize={10}
+          loading={false}
+          totalResults={50}
+          updateQueryPage={mockUpdateQueryPage}
+        />
+      </AppContext.Provider>
+    );
+
+  const findPageItem = (wrapper, page) =>
+    wrapper
+      .find("a.item")
+      .filterWhere(
+        (node) => node.prop("value") === page && node.prop("type") === "pageItem"
+      );
+
+  it("should change page when 'Space' is pressed on a page item", () => {
+    const mockUpdateQueryPage = jest.fn();
+    const mockPreventDefault = jest.fn();
+    const wrapper = mountPagination(mockUpdateQueryPage);
+
+    findPageItem(wrapper, 2).simulate("keydown", {
+      key: " ",
+      preventDefault: mockPreventDefault,
+    });
+
+    expect(mockUpdateQueryPage).toHaveBeenCalledWith(2);
+    // page scroll on "Space" should be prevented
+    expect(mockPreventDefault).toHaveBeenCalled();
+  });
+
+  it("should still change page when 'Enter' is pressed on a page item", () => {
+    const mockUpdateQueryPage = jest.fn();
+    const wrapper = mountPagination(mockUpdateQueryPage);
+
+    findPageItem(wrapper, 3).simulate("keydown", {
+      key: "Enter",
+      keyCode: 13,
+      which: 13,
+    });
+
+    expect(mockUpdateQueryPage).toHaveBeenCalledWith(3);
+  });
+
+  it("should expose page items with a 'button' role", () => {
+    const wrapper = mountPagination(jest.fn());
+
+    expect(findPageItem(wrapper, 2).prop("role")).toEqual("button");
+  });
+});