Fix a11y issues in autocomplete and chip components

[fateeand]

Fixing accessibility issues in Autocomplete and Chip components

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
Autocomplete	-	❌	❌	❌
Chip	-	❌	-	-

---

State after:

Component	aria-roles	color-contrast	label	tabindex
Autocomplete	✅	✅	✅	✅
Chip	✅	✅	-	✅

---

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 autocomplete and chip components

[github-actions]

Coverage report for library

St.❔	Category	Percentage	Covered / Total
🔴	Statements	29.75%	1884/6332
🔴	Branches	23.21%	661/2848
🔴	Functions	25.24%	341/1351
🔴	Lines	30.58%	1781/5825

Test suite run success

419 tests passing in 21 suites.

Report generated by 🧪jest coverage report action from e8691b4

[github-actions]

Playwright test results

 38 passed

Details

 38 tests across 4 suites
 1 minute, 13 seconds
 e8691b4
 For details, download the Playwright report

[Copilot]

Pull request overview

This PR improves accessibility compliance for the UI kit’s Autocomplete and Chip components by updating ARIA semantics, keyboard interactions, focus styling, and contrast-related colors, with supporting composition/demo updates.

Changes:

• Add ARIA roles/attributes and keyboard interaction support to cps-autocomplete and cps-chip.
• Improve focus styles and contrast by adjusting text colors and converting several sizing values to rem.
• Update composition/demo pages and API metadata to reflect new/updated props and color tokens.

Reviewed changes

Copilot reviewed 14 out of 15 changed files in this pull request and generated 4 comments.

Show a summary per file

File	Description
projects/cps-ui-kit/styles/_colors.scss	Tweaks text color token values and adds --cps-color-text-medium for improved contrast.
projects/cps-ui-kit/src/lib/utils/internal/accessibility-utils.ts	Adds internal helpers for unique IDs and computed aria-label text.
projects/cps-ui-kit/src/lib/components/cps-select/cps-select.component.ts	Adjusts virtual scroll item size.
projects/cps-ui-kit/src/lib/components/cps-icon/cps-icon.component.scss	Converts icon sizes from px to rem.
projects/cps-ui-kit/src/lib/components/cps-chip/cps-chip.component.ts	Adds close button aria-label input and prevents close interaction when disabled.
projects/cps-ui-kit/src/lib/components/cps-chip/cps-chip.component.scss	Updates chip spacing/sizing and adds focus-visible styling for the close icon.
projects/cps-ui-kit/src/lib/components/cps-chip/cps-chip.component.html	Adds ARIA labeling and keyboard interaction to the close icon.
projects/cps-ui-kit/src/lib/components/cps-autocomplete/cps-autocomplete.component.ts	Adds ARIA/ID plumbing, improves blur/focus behavior, and adds arrow navigation support for virtual scroll.
projects/cps-ui-kit/src/lib/components/cps-autocomplete/cps-autocomplete.component.scss	Updates styles for focus/active/opened states and multi-selection layout.
projects/cps-ui-kit/src/lib/components/cps-autocomplete/cps-autocomplete.component.html	Adds combobox/listbox semantics, active-descendant wiring, and keyboard support for clear/chevron actions.
projects/composition/src/app/pages/colors-page/colors-page/colors-page.component.ts	Updates demo color grouping to include the new text-medium token.
projects/composition/src/app/pages/autocomplete-page/autocomplete-page.component.html	Converts a demo width value to rem.
projects/composition/src/app/api-data/cps-chip.json	Documents the new closeButtonAriaLabel prop.
package.json	Reorders/adds dev dependency entry for @axe-core/playwright.
package-lock.json	Updates resolved dependency versions; includes an extraneous package entry that should be cleaned up.

[lukasmatta]

Great work! Please see my other comment regarding the optionInfo.

Since a11y was fixed for Autocomplete and Chip here, feels like a good time to turn on a11y Playwright checks in CI for them to avoid regressions (if it’s just a one‑liner, maybe we can add it in this PR).