feat: fix a11y issues in paginator component

[fateeand]

Fixing accessibility issues in paginator component

Validation rules:

Validated using Playwright accessibility tests, Lighthouse tool, and manual checks including keyboard tab navigation and screen reader testing.

Full doc with rules

---

Checklist

• Keyboard Navigation
  All interactive elements are fully operable via keyboard only, including buttons, inputs, menus, dialogs, sliders, drag-and-drop, tree views, multi-selects, and composite widgets. No traps or dead ends.

• Focus Management
  Focus is visible, logical, moves in predictable order, trapped where necessary (modals/popovers), and restored after closing. Focus is perceivable in all interactive widgets.

• Semantics / ARIA

  • Semantic HTML is used correctly.
  • ARIA roles, states, and properties are applied only when needed.
  • All form fields, tables, and widgets (including autocomplete, tree selects, tree tables, drag-and-drop, sliders, and multi-selects) are properly labeled and accessible.

• Color / Contrast

  • Text and interactive elements meet contrast requirements (≥4.5:1 normal text, ≥3:1 large text).
  • Focus and selection indicators are visually perceivable.
  • Color is not the only indicator of state.

• Screen Reader / Assistive Technology

  • All content, labels, and dynamic updates are perceivable via screen readers.
  • Live regions announce status messages, alerts, modals, notifications, and dynamic changes.
  • Interactive widgets provide proper announcements of selection and updates.

• Responsive & Zoom

  • Components function correctly and remain readable at all viewport sizes and up to 200% zoom, including mobile and touch devices.
  • Prefer em/rem units over px where scaling is required.

• [N/A] Error Handling

  • Errors are clearly identified visually and programmatically.
  • Form inputs use aria-describedby or aria-invalid for inline messages.
  • Instructions and suggestions are accessible.

• [N/A] Dynamic Content / Updates

  • Status updates, alerts, notifications, and modals use live regions.
  • Updates do not disrupt focus or user control unexpectedly.

• Interaction Feedback / States

  • All interactive states (hover, focus, active, disabled, drag-and-drop, reordering, multi-select) are visually perceivable.

• [N/A] Authentication & Sensitive Actions

  • Inputs and actions involving sensitive data provide accessible instructions, feedback, and error messages.

• Predictable & Controllable UI

  • Components behave consistently and predictably.
  • Popups, modals, autocomplete suggestions, drag-and-drop, and dynamic content allow user control.

---

Release notes:

• Fix a11y issues in paginator component

[github-actions]

Coverage report for library

St.❔	Category	Percentage	Covered / Total
🔴	Statements	50.93%	3852/7564
🔴	Branches	46.52%	1752/3766
🔴	Functions	50.1%	727/1451
🔴	Lines	51.51%	3593/6975

Test suite run success

1408 tests passing in 39 suites.

Report generated by 🧪jest coverage report action from 83d4619

[github-actions]

Playwright test results

 104 passed

Details

 104 tests across 4 suites
 3 minutes, 35 seconds
 83d4619
 For details, download the Playwright report

[Copilot]

Pull request overview

This PR improves the accessibility of CpsPaginatorComponent by adding semantic host attributes, better keyboard navigation/focus handling, and updated focus-visible styling, plus expands automated a11y and unit test coverage around the paginator behavior.

Changes:

• Adds role="navigation" and default/customizable aria-label handling on the paginator host, plus pass-through props to improve disabled semantics.
• Implements arrow-key navigation across page buttons and redirects focus away from boundary buttons when they become disabled.
• Updates paginator styling for focus-visible rings and rem-based sizing; enables the paginator route in Playwright accessibility checks and adds/extends unit tests.

Reviewed changes

Copilot reviewed 7 out of 7 changed files in this pull request and generated 10 comments.

Show a summary per file

File	Description
projects/cps-ui-kit/src/lib/components/cps-paginator/cps-paginator.component.ts	Adds host semantics, aria-label handling, arrow-key navigation, focus redirection, and paginator pass-through props.
projects/cps-ui-kit/src/lib/components/cps-paginator/cps-paginator.component.html	Switches paginator rows binding to internal state and applies PT; hides redundant text from screen readers.
projects/cps-ui-kit/src/lib/components/cps-paginator/cps-paginator.component.scss	Adds focus-ring mixin usage and rem-based sizing for improved focus visibility and zoom behavior.
projects/cps-ui-kit/src/lib/components/cps-paginator/cps-paginator.component.spec.ts	Adds tests for host semantics, PT output, focus redirection, and arrow-key navigation behavior.
projects/cps-ui-kit/src/lib/components/cps-paginator/pipes/cps-paginate.pipe.spec.ts	Adds unit tests for pagination pipe behavior.
projects/composition/src/app/api-data/cps-paginator.json	Documents the new ariaLabel input in the composition API metadata.
playwright/cps-accessibility.spec.ts	Enables paginator route in Playwright accessibility coverage.

Comments suppressed due to low confidence (1)

projects/cps-ui-kit/src/lib/components/cps-paginator/cps-paginator.component.ts:252

• onRowsPerPageChange updates the PrimeNG paginator but does not update the component's own rows/currentRows state. This can leave the wrapper component out of sync with its template bindings and with _syncRows() (which reads from rows). Update the component state as well.

  onRowsPerPageChange(rows: number) {
    if (this.resetPageOnRowsChange) {
      this.first = 0;
      this.paginator.first = 0;
    }