Fix a11y issues in radio component

[fateeand]

Fixing accessibility issues in radio component

Validation rules:

Validated using Playwright accessibility tests, Lighthouse tool, axe DevTools extension, Accessibility Insights for Web extension, 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
Radio	-	✅	❌

---

State after:

Component	aria-roles	color-contrast	label
Radio	✅	✅	✅

---

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.

• [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 radio component

[github-actions]

Coverage report for library

St.❔	Category	Percentage	Covered / Total
🔴	Statements	30.48%	1987/6519
🔴	Branches	24.68%	733/2970
🔴	Functions	26.06%	364/1397
🔴	Lines	31.38%	1882/5998

Test suite run success

453 tests passing in 22 suites.

Report generated by 🧪jest coverage report action from d436c32

[github-actions]

Playwright test results

 46 passed

Details

 46 tests across 4 suites
 1 minute, 34 seconds
 d436c32
 For details, download the Playwright report

[Copilot]

Pull request overview

This PR focuses on resolving accessibility gaps in the CPS radio components by ensuring radio groups/options have proper accessible naming, adding appropriate ARIA semantics, and strengthening automated a11y validation coverage.

Changes:

• Add ariaLabel support and radiogroup semantics to cps-radio-group, including required/invalid/disabled ARIA states.
• Ensure radio buttons are properly grouped via a generated shared name, and add per-option ariaLabel support for cases with custom content.
• Expand automated accessibility coverage (Playwright) to include the radio group and align a few related components’ ARIA error/required semantics.

Reviewed changes

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

Show a summary per file

File	Description
projects/cps-ui-kit/src/lib/utils/internal/accessibility-utils.ts	Simplifies getComputedLabel to use a single error input for accessible label composition.
projects/cps-ui-kit/src/lib/components/cps-scheduler/cps-scheduler.component.html	Adds radio-group and option ariaLabels for scheduler frequency radios.
projects/cps-ui-kit/src/lib/components/cps-radio-group/cps-radio/cps-radio.component.html	Passes the generated group name down to rendered radio inputs.
projects/cps-ui-kit/src/lib/components/cps-radio-group/cps-radio-group.component.ts	Introduces ariaLabel, generated groupName, required detection, and computed ARIA labeling.
projects/cps-ui-kit/src/lib/components/cps-radio-group/cps-radio-group.component.spec.ts	Adds coverage for radiogroup aria-label behavior and unlabeled-group logging.
projects/cps-ui-kit/src/lib/components/cps-radio-group/cps-radio-group.component.scss	Converts several px spacings to rem to improve scalability/zoom behavior.
projects/cps-ui-kit/src/lib/components/cps-radio-group/cps-radio-group.component.html	Adds role="radiogroup" and key ARIA attributes; replaces ngClass with class bindings; makes errors assertively announced.
projects/cps-ui-kit/src/lib/components/cps-radio-group/cps-radio-button/cps-radio-button.component.ts	Adds groupName input and unlabeled-option logging; tightens option usage.
projects/cps-ui-kit/src/lib/components/cps-radio-group/cps-radio-button/cps-radio-button.component.scss	Improves focus-visible styling and disabled styling; introduces wrapper-based focus ring.
projects/cps-ui-kit/src/lib/components/cps-radio-group/cps-radio-button/cps-radio-button.component.html	Applies shared name, sets per-option aria-label, and adds inert handling for non-selected content.
projects/cps-ui-kit/src/lib/components/cps-button/cps-button.component.spec.ts	Prevents console noise in a test that exercises unlabeled button rendering.
projects/cps-ui-kit/src/lib/components/cps-button-toggle/cps-button-toggle.component.ts	Marks component for check after font readiness sizing to keep layout in sync.
projects/cps-ui-kit/src/lib/components/cps-autocomplete/cps-autocomplete.component.ts	Adds required detection and adapts computed label to updated getComputedLabel signature.
projects/cps-ui-kit/src/lib/components/cps-autocomplete/cps-autocomplete.component.html	Announces errors via alert semantics and adds aria-required; normalizes aria-invalid to string.
projects/composition/src/app/pages/radio-page/radio-page.component.scss	Converts example page spacing from px to rem.
projects/composition/src/app/pages/radio-page/radio-page.component.html	Adds a vertical radio group example and ensures custom-content option has an ariaLabel.
projects/composition/src/app/api-data/cron-validation.service.json	Normalizes JSON line endings to LF.
projects/composition/src/app/api-data/cps-tree-table.json	Normalizes JSON line endings to LF.
projects/composition/src/app/api-data/cps-table.json	Normalizes JSON line endings to LF.
projects/composition/src/app/api-data/cps-radio-group.json	Updates generated API docs for new radio props/types (ariaLabel, groupName, ariaLabel on option).
projects/composition/src/app/api-data/cps-notification.json	Normalizes JSON line endings to LF.
playwright/cps-accessibility.spec.ts	Re-enables radio-group coverage in the Playwright accessibility suite.