Fix a11y issues in tabs component

[fateeand]

Fixing accessibility issues in tabs 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	scrollable-region-focusable	tabindex
Tabs	-	❌	-	❌	-

---

State after:

Component	aria-roles	color-contrast	label	scrollable-region-focusable	tabindex
Tabs	✅	✅	✅	✅	✅

---

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.

• [N/A] 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.

---

Additional changes:

Updated the API generator to support compound prop types composed of a union between a custom type (with deeplink support to its section on the API pages) and other TS types. Previously, the custom type was ignored in such combinations, and only the remaining types were displayed.

---

Release notes:

• Fix a11y issues in tabs component

[github-actions]

Coverage report for library

St.❔	Category	Percentage	Covered / Total
🔴	Statements	37.45%	2706/7226
🔴	Branches	31.81%	1069/3361
🔴	Functions	34.02%	513/1508
🔴	Lines	38.3%	2537/6624

Test suite run success

732 tests passing in 28 suites.

Report generated by 🧪jest coverage report action from eb62b35

[Copilot]

Pull request overview

This PR improves accessibility for the tab group component by adding proper ARIA semantics, keyboard interaction support, focus styling, and updating the composition/docs tooling to reflect the new API and types.

Changes:

• Added ARIA roles/attributes and keyboard navigation (Arrow/Home/End + optional manual activation) to cps-tab-group.
• Migrated cps-tab inputs/state to signals and introduced ariaLabel to ensure tabs have an accessible name.
• Updated docs/demo pages, API JSON generation, and Playwright a11y coverage for the tabs page.

Reviewed changes

Copilot reviewed 18 out of 19 changed files in this pull request and generated 7 comments.

Show a summary per file

File	Description
projects/cps-ui-kit/src/lib/components/cps-tab-group/cps-tab/cps-tab.component.ts	Converts tab inputs to signal inputs; adds ariaLabel; updates active state handling.
projects/cps-ui-kit/src/lib/components/cps-tab-group/cps-tab/cps-tab.component.spec.ts	Adds unit tests for the new signal inputs and labeling validation behavior.
projects/cps-ui-kit/src/lib/components/cps-tab-group/cps-tab-group.component.ts	Adds IDs for tabs/panels, keyboard handling, focus/tabindex logic, and unique ID generation.
projects/cps-ui-kit/src/lib/components/cps-tab-group/cps-tab-group.component.spec.ts	Adds unit tests for ARIA wiring, keyboard behavior, and activation mode.
projects/cps-ui-kit/src/lib/components/cps-tab-group/cps-tab-group.component.scss	Improves focus-visible styling and converts many px values to rem for scalability.
projects/cps-ui-kit/src/lib/components/cps-tab-group/cps-tab-group.component.html	Adds tablist/tab/tabpanel roles, ARIA linking, and keyboard event bindings; refines markup.
projects/cps-ui-kit/src/lib/components/cps-sidebar-menu/cps-sidebar-menu.component.scss	Tweaks focus-ring offsets to align with updated focus styling.
projects/composition/src/app/pipes/detect-type.pipe.ts	Extends type detection to support arrays and unions via a structured return type.
projects/composition/src/app/pages/tab-group-page/tab-group-page.component.ts	Refactors tab demo data into arrays and adds checkbox demo content via templates.
projects/composition/src/app/pages/tab-group-page/tab-group-page.component.scss	Adjusts sizing to rem and adds padding for templated tab content.
projects/composition/src/app/pages/tab-group-page/tab-group-page.component.html	Refactors tab demos to use @for + ngTemplateOutlet; showcases manual activation.
projects/composition/src/app/components/service-docs-viewer/service-docs-viewer.component.html	Updates type-link rendering to use the new detectType return shape and adds type anchors.
projects/composition/src/app/components/component-docs-viewer/component-docs-viewer.component.html	Updates type-link rendering to use the new detectType return shape.
projects/composition/src/app/api-data/cps-timepicker.json	Normalizes string-literal union formatting.
projects/composition/src/app/api-data/cps-tab-group.json	Documents autoActivation and updates tab inputs to readonly/signal-style metadata.
projects/composition/src/app/api-data/cps-dialog.json	Updates documented types to reflect current API typings more accurately.
playwright/cps-accessibility.spec.ts	Re-enables Tabs coverage in Playwright accessibility suite with an updated selector.
api-generator/api-generator.js	Attempts to preserve source-level type annotations when generating API JSON.

[github-actions]

Playwright test results

 70 passed

Details

 70 tests across 4 suites
 1 minute, 42 seconds
 eb62b35
 For details, download the Playwright report