Fix a11y issues in input component

[fateeand]

Fixing accessibility issues in input 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

---

Playwright axe-core validation results:

State before:

Component	aria-roles	color-contrast	label	tabindex	target-size
Input	-	❌	✅	-	-

---

State after:

Component	aria-roles	color-contrast	label	tabindex	target-size
Input	✅	✅	✅	✅	✅

---

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.

• 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.

• 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.

• 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 input component

[github-actions]

Coverage report for library

St.❔	Category	Percentage	Covered / Total
🔴	Statements	42.83%	3020/7051
🔴	Branches	37.22%	1281/3442
🔴	Functions	42.37%	583/1376
🔴	Lines	43.5%	2832/6511

Test suite run success

951 tests passing in 32 suites.

Report generated by 🧪jest coverage report action from 5c65b7d

[Copilot]

Pull request overview

This PR improves accessibility across the UI kit’s input-related controls, primarily by enhancing cps-input semantics (labeling, ARIA attributes, keyboard operability, and focus styling) and updating component usages/tests to comply with the new requirements.

Changes:

• Added explicit ariaLabel support (and related enforcement) for cps-input/cps-datepicker, and propagated aria labels into consuming templates (tables, filters, composition demos).
• Improved cps-input accessibility behavior: unique input id, label association, aria-invalid/required/busy, accessible clear + password-toggle interactions, and focus-ring styling.
• Expanded unit + Playwright axe coverage for the input component page.

Reviewed changes

Copilot reviewed 22 out of 22 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
projects/cps-ui-kit/src/lib/components/cps-tree-table/cps-tree-table.component.html	Adds aria label for global filter input.
projects/cps-ui-kit/src/lib/components/cps-table/cps-table.component.html	Adds aria label for global filter input.
projects/cps-ui-kit/src/lib/components/cps-table/components/internal/table-column-filter-constraint/table-column-filter-constraint.component.html	Adds aria labels for text/number/date filter inputs.
projects/cps-ui-kit/src/lib/components/cps-select/cps-select.component.html	Adds aria-busy while loading.
projects/cps-ui-kit/src/lib/components/cps-scheduler/cps-scheduler.component.html	Replaces empty visual label with ariaLabel.
projects/cps-ui-kit/src/lib/components/cps-input/cps-input.component.ts	Adds aria labeling props, required detection, keyboard focus tracking, id generation, and updated enter/clear behavior.
projects/cps-ui-kit/src/lib/components/cps-input/cps-input.component.html	Adds for/id association, ARIA attrs, accessible icon/button interactions, and error live-region markup.
projects/cps-ui-kit/src/lib/components/cps-input/cps-input.component.scss	Updates layout + focus styling to support new structure and keyboard focus indication.
projects/cps-ui-kit/src/lib/components/cps-input/cps-input.component.spec.ts	Updates existing tests and adds accessibility-focused unit tests.
projects/cps-ui-kit/src/lib/components/cps-datepicker/cps-datepicker.component.ts	Adds ariaLabel + validation warning on missing labeling.
projects/cps-ui-kit/src/lib/components/cps-datepicker/cps-datepicker.component.html	Passes ariaLabel and adds prefix icon aria label.
projects/cps-ui-kit/src/lib/components/cps-datepicker/cps-datepicker.component.scss	Aligns focus styling with new cps-input wrapper border behavior.
projects/cps-ui-kit/src/lib/components/cps-autocomplete/cps-autocomplete.component.html	Adds aria-busy while loading/validating.
projects/composition/src/app/pages/input-page/input-page.component.ts	Adds example handling for clickable prefix icon (notification).
projects/composition/src/app/pages/input-page/input-page.component.html	Updates width units; demonstrates clickable prefix icon + aria label.
projects/composition/src/app/pages/input-page/input-page.component.scss	Converts spacing from px to rem.
projects/composition/src/app/pages/icons-page/icons-page/icons-page.component.html	Adds aria label to search input.
projects/composition/src/app/pages/colors-page/colors-page/colors-page.component.html	Adds aria label to search input.
projects/composition/src/app/components/navigation-sidebar/navigation-sidebar.component.html	Adds aria label to sidebar search input.
projects/composition/src/app/api-data/cps-input.json	Documents new ariaLabel / prefixIconAriaLabel props and default icon size change.
projects/composition/src/app/api-data/cps-datepicker.json	Documents new ariaLabel prop.
playwright/cps-accessibility.spec.ts	Re-enables input page axe scan with scoped selector.

[github-actions]

Playwright test results

 74 passed

Details

 74 tests across 4 suites
 2 minutes, 16 seconds
 5c65b7d
 For details, download the Playwright report