Accessibility improvements for pagination

[glad-adyen]

Summary

This PR introduces the following changes to improve the accessibility of the pagination controls rendered by the <Pagination /> component.

• Remove unnecessary accessible name and organized class names
• Update localization for the "Showing" word to take into account the page limit (number)
• Add a live region (that is visually hidden) to politely announce page limit updates
• Add localization for page limit announcement text

Addresses:

• piefp-1 — Provide valid, concise, and meaningful alternative text for image buttons
• piefp-6 — Ensure custom controls provide proper textual name, role, and state information
• piefp-30 — Ensure custom controls provide proper textual name, role, and state information
• piefp-41 — Ensure custom controls provide proper textual name, role, and state information

Related to: CXP-3361

[gemini-code-assist]

Summary of Changes

Hello @glad-adyen, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

This pull request focuses on enhancing the accessibility of the pagination component by improving how page limit changes are communicated. It introduces dynamic localization for the 'Showing' text and implements a visually hidden ARIA live region to politely announce page limit updates to assistive technologies, ensuring a more inclusive user experience.

Highlights

• Accessibility Improvements for Pagination: Enhanced the <Pagination /> component to significantly improve accessibility, particularly for screen reader users, by providing more dynamic and explicit feedback on page limit changes.
• Dynamic Localization for Page Limit Display: Updated the pagination.showing localization key to include a dynamic %{limit} placeholder. This allows the displayed text to reflect the current number of items shown per page (e.g., 'Showing 10') directly within the UI.
• ARIA Live Region for Page Limit Announcements: Implemented a visually hidden ARIA live region (aria-live="polite") that announces changes to the page limit (e.g., 'Showing 10 records per page') to assistive technologies. This ensures users are informed of these updates without interrupting their current task.
• New Localization Keys for Accessibility: Introduced a new localization key (pagination.showing.notice) specifically for screen reader announcements and modified an existing one (pagination.showing) to support the dynamic display of page limit information.
• CSS Class Refactoring: Renamed a CSS class from adyen-pe-pagination__context to adyen-pe-pagination__limit in Pagination.scss to better reflect its purpose and align with the component's updated structure for displaying the page limit selector.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point in your pull request via creating an issue comment (i.e. comment on the pull request page) using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands.

Feature	Command	Description
Code Review	/gemini review	Performs a code review for the current pull request in its current state.
Pull Request Summary	/gemini summary	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in issue comments and review comments.
Help	/gemini help	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist is currently in preview and may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments to provide feedback.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Footnotes

1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

[gemini-code-assist]

Code Review

This pull request improves the accessibility of the pagination component by adding a visually hidden aria-live region to announce page limit changes to screen reader users. It also refactors the 'Showing' text to use the Translation component, allowing a dropdown to be embedded within the localized string. The changes are well-implemented.