pagination: activate page items with Space key

[SlimDumbledodge]

❤️ Thank you for your contribution!

Description

Please describe briefly your pull request.

Fixes #295

Root cause

Pagination page items are rendered by semantic-ui-react's Pagination as anchors without href and without an explicit role:

<a class="item" aria-current="false" aria-disabled="false" tabindex="0" value="2" type="pageItem">2</a>

An anchor without href has no native keyboard activation, so semantic-ui-react makes it focusable with tabindex="0" and wires up keyboard activation manually in PaginationItem. However, only "Enter" is handled:

_this.handleKeyDown = function (e) {
  _invoke(_this.props, 'onKeyDown', e, _this.props);
  if (keyboardKey.getCode(e) === keyboardKey.Enter)
    _invoke(_this.props, 'onClick', e, _this.props);
};

Since these items behave as buttons (they trigger an action rather than navigate to a URL), the ARIA APG button pattern applies: they should be activatable with both "Enter" and "Space".

Fix

The root cause lives in semantic-ui-react, but it can be remediated on the react-searchkit side. This PR passes a custom render function to the pageItem shorthand that:

• handles "Space" on keydown by invoking the same onClick that semantic-ui-react injects into the item props, mirroring its existing "Enter" handling
• calls preventDefault() to avoid the default page scroll on "Space"
• adds role="button" so the announced semantics match the behavior for assistive technologies
• ignores disabled items

Mouse and "Enter" activation are unchanged.

Scope

The fix is intentionally scoped to page items, as reported in the issue. The first/prev/next/last arrow items share the same underlying limitation, but customizing them through the shorthand render function drops their default content (icons), so extending the fix to them would require rebuilding those defaults. Happy to address that in a follow-up if there is interest.

Note: using an item shorthand render function triggers a semantic-ui-react v3 deprecation warning in the test output. v3 was never released, this repo pins v2, and there is no alternative API to customize pagination items.

How to verify

1. Run the OpenSearch demo (docker-compose up in src/demos/opensearch/docker, load the demo data, npm start)
2. Perform a search, then use Tab to focus a pagination page number
3. Press "Space": the page changes and the window does not scroll (previously: nothing happened)
4. Press "Enter": still changes the page
5. Mouse clicks: unchanged

Checklist

Ticks in all boxes and 🟢 on all GitHub actions status checks are required to merge:

• I'm aware of the code of conduct.
• I've created logical separate commits and followed the commit message format.
• I've added relevant test cases.
• I've added relevant documentation.
• I've marked translation strings.
• I've identified the copyright holder(s) and updated copyright headers for touched files (>15 lines contributions).
• I've NOT included third-party code (copy/pasted source code or new dependencies).
  • If you have added third-party code (copy/pasted or new dependencies), please reach out to an architect on Discord.

Frontend

• I've followed the CSS/JS and React guidelines.
• I've followed the web accessibility guidelines.
• I've followed the user interface guidelines.

Reminder

By using GitHub, you have already agreed to the GitHub’s Terms of Service including that:

1. You license your contribution under the same terms as the current repository’s license.
2. You agree that you have the right to license your contribution under the current repository’s license.

[ntarocco]

Hello, thank you very much for the fix.
Unfortunately, ci is not passing because you have changed the package-lock.json. Can you please remove it?

@monotasker given that you were reporting the issue, could you please have a quick look to it?

[monotasker]

I tested it out locally and it works smoothly. And the mechanism for adding the keystroke listener makes sense. Looks great. The tests all pass for me locally, so I believe @ntarocco is right. Please remove the package-lock.json from the PR (so that the tests will pass) and we should be able to merge it.

[monotasker]

I think your suggestion about adding handling to the next/prev buttons for the spacebar press is also important. So if you can submit another PR with that remediation, that would be very good.

[monotasker]

I tested out the change and it works nicely. Addresses the a11y issue well.

[monotasker]

@ntarocco, I don't have merge privileges and I'm not sure if there's someone else I should request review from who does?