Fix a11y issues in select component

[fateeand]

Fixing accessibility issues in select 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	tabindex	target-size
Select	-	❌	✅	-

---

State after:

Component	aria-roles	color-contrast	tabindex	target-size
Select	✅	✅	✅	✅

---

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 select component

[github-actions]

Coverage report for library

St.❔	Category	Percentage	Covered / Total
🔴	Statements	42.47%	2989/7038
🔴	Branches	36.62%	1259/3438
🔴	Functions	41.65%	571/1371
🔴	Lines	43.17%	2806/6500

Test suite run success

893 tests passing in 31 suites.

Report generated by 🧪jest coverage report action from 660d5e8

[github-actions]

Playwright test results

 72 passed

Details

 72 tests across 4 suites
 2 minutes, 15 seconds
 660d5e8
 For details, download the Playwright report

[Copilot]

Pull request overview

This PR improves accessibility for the cps-select component and updates related consumers/demos to provide accessible labels and rem-based sizing.

Changes:

• Adds ARIA roles/attributes, keyboard handling, focus states, and accessibility tests for cps-select.
• Adds ariaLabel usage to select instances in tables, paginator, scheduler, and demo pages.
• Adjusts select/chip styling and documentation examples for accessibility and scaling.

Reviewed changes

Copilot reviewed 25 out of 25 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
projects/cps-ui-kit/src/lib/components/cps-select/cps-select.component.ts	Adds select ARIA state helpers, keyboard navigation, sizing updates, and label validation.
projects/cps-ui-kit/src/lib/components/cps-select/cps-select.component.html	Adds combobox/listbox semantics and accessible controls.
projects/cps-ui-kit/src/lib/components/cps-select/cps-select.component.scss	Updates focus, sizing, contrast, and option styles.
projects/cps-ui-kit/src/lib/components/cps-select/cps-select.component.spec.ts	Adds unit coverage for select behavior and accessibility attributes.
projects/cps-ui-kit/src/lib/components/cps-chip/cps-chip.component.scss	Adjusts chip spacing and focus styling.
projects/cps-ui-kit/src/lib/components/cps-autocomplete/cps-autocomplete.component.ts	Refines width updates, clear behavior, and blur/menu handling.
projects/cps-ui-kit/src/lib/components/cps-autocomplete/cps-autocomplete.component.html	Marks decorative autocomplete icons as hidden from assistive tech.
projects/cps-ui-kit/src/lib/components/cps-autocomplete/cps-autocomplete.component.spec.ts	Updates autocomplete expectations for menu-close behavior.
projects/cps-ui-kit/src/lib/components/cps-button/cps-button.component.ts	Adjusts accessibility label validation timing.
projects/cps-ui-kit/src/lib/components/cps-button-toggle/cps-button-toggle.component.ts	Adjusts accessibility label validation timing.
projects/cps-ui-kit/src/lib/components/cps-checkbox/cps-checkbox.component.ts	Adjusts accessibility label validation timing.
projects/cps-ui-kit/src/lib/components/cps-radio-group/cps-radio-group.component.ts	Adjusts accessibility label validation timing.
projects/cps-ui-kit/src/lib/components/cps-tab-group/cps-tab/cps-tab.component.ts	Adjusts accessibility label validation timing.
projects/cps-ui-kit/src/lib/components/cps-paginator/cps-paginator.component.html	Adds an accessible label to the page-size select.
projects/cps-ui-kit/src/lib/components/cps-table/cps-table.component.html	Adds an accessible label to the rows-per-page select.
projects/cps-ui-kit/src/lib/components/cps-tree-table/cps-tree-table.component.html	Adds an accessible label to the rows-per-page select.
projects/cps-ui-kit/src/lib/components/cps-table/components/internal/table-column-filter/table-column-filter.component.html	Adds accessible labels to filter selects.
projects/cps-ui-kit/src/lib/components/cps-scheduler/cps-scheduler.component.html	Adds accessible labels to scheduler selects.
projects/composition/src/app/pages/radio-page/radio-page.component.html	Adds accessible labels to inline demo selects.
projects/composition/src/app/pages/select-page/select-page.component.html	Updates select demo fixed-width example to rem units.
projects/composition/src/app/pages/select-page/select-page.component.scss	Converts select demo spacing to rem units.
projects/composition/src/app/pages/autocomplete-page/autocomplete-page.component.html	Updates autocomplete demo hint to rem units.
projects/composition/src/app/pages/autocomplete-page/autocomplete-page.examples.ts	Updates autocomplete example hint to rem units.
projects/composition/src/app/api-data/cps-select.json	Documents the new ariaLabel input and rem-based icon size default.
playwright/cps-accessibility.spec.ts	Enables select accessibility validation in Playwright.

[lukasmatta]

Could we restore the active option when reopening the select?
Starting from the selected item makes Arrow/Enter navigation much easier.

[lukasmatta]

tabindex="0" makes this tabbable even when disabled

[fateeand]

done

[lukasmatta]

The focus ring is not visible on borderless/underline selects, is that on purpose?

[fateeand]

Currently, autocomplete/select don't use focus rings on the components themselves - those are borders. Since the borderless/underline options don't have borders, the active state isn't visible. I didn't cover this initially because autocomplete was the first component I used for the a11y work. For consistency with the existing autocomplete behavior, I also didn't introduce focus rings here.

I'm considering adding focus rings so the active state is always visible. I'll evaluate the effort and either include it in this PR or follow up with a separate change.

[fateeand]

Created a follow-up work item: #635