Accessibility standards alignment

[lukasmatta]

Overview

We need to address and resolve accessibility issues across all cps-ui-kit components to ensure full compliance with WCAG 2.2 AA standards:

Category	Check
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 composite widgets such as 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 for normal text, ≥3:1 for 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. Using px units may prevent this if the font does not scale correctly; em and rem units are preferable.
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. Guidance for editable components with complex input.
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, and multi-select focus indicators) are visually perceivable. No reliance on color alone.
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.

Rules for submitting accessibility fixes:

• Submit small, focused PRs for accessibility fixes for each component
• Include a mandatory before-and-after comparison in the PR description (detected->fixed issues, screenshots)
• Attach the above accessibility checklist, marking each item as Check or N/A
• Use Angular Aria where possible
• Validate the fixes with playwright a11y tests and manually

---

Loop component with more info