From bc525ae5b9283de7434f94b01998861f0693ef8a Mon Sep 17 00:00:00 2001
From: Andrei Fateev <fateeand@gmail.com>
Date: Thu, 6 Aug 2026 12:52:56 +0200
Subject: [PATCH 1/2] test: add Playwright coverage and test ids for radio
 group

---
 .../components/cps-radio-group.spec.ts        | 109 ++++++++++++++++++
 .../radio-page/radio-page.component.html      |  26 +++++
 .../pages/radio-page/radio-page.component.ts  |  20 ++--
 .../pages/radio-page/radio-page.examples.ts   |  40 +++++++
 .../cps-radio-button.component.html           |   6 +-
 .../cps-radio-group.component.html            |  15 ++-
 .../cps-radio/cps-radio.component.ts          |   3 +-
 7 files changed, 203 insertions(+), 16 deletions(-)
 create mode 100644 playwright/cps-ui-kit/components/cps-radio-group.spec.ts

diff --git a/playwright/cps-ui-kit/components/cps-radio-group.spec.ts b/playwright/cps-ui-kit/components/cps-radio-group.spec.ts
new file mode 100644
index 000000000..2226d4a1d
--- /dev/null
+++ b/playwright/cps-ui-kit/components/cps-radio-group.spec.ts
@@ -0,0 +1,109 @@
+import { test, expect } from '@playwright/test';
+
+test.describe('cps-radio-group', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto('/radio-group');
+  });
+
+  test.describe('Real native keyboard navigation skips disabled radios', () => {
+    test('ArrowDown from an enabled radio real-skips a disabled one via native grouping', async ({
+      page
+    }) => {
+      const group = page.getByRole('radiogroup', {
+        name: 'Radio group with partially disabled options and targeted tooltips'
+      });
+      const option2 = group.getByRole('radio', { name: 'Option 2' });
+      const option4 = group.getByRole('radio', { name: 'Option 4' });
+
+      await option2.focus();
+      await page.keyboard.press('ArrowDown');
+
+      await expect(option4).toBeFocused();
+      await expect(option4).toBeChecked();
+    });
+  });
+
+  test.describe('Real form validation shows and clears a real error', () => {
+    test('selecting the wrong option shows a real error; selecting the right one clears it', async ({
+      page
+    }) => {
+      const group = page.getByRole('radiogroup', {
+        name: 'Radio group where 3rd option must be selected'
+      });
+      const errorEl = group.getByTestId('cps-radio-group-error');
+
+      const option1 = group.getByRole('radio', { name: 'Option 1' });
+      await option1.focus();
+      await page.keyboard.press('Space');
+      await page.evaluate(() =>
+        (document.activeElement as HTMLElement)?.blur()
+      );
+
+      await expect(errorEl).toBeVisible();
+      await expect(errorEl).toHaveText('Only third option must be selected');
+      await expect(group).toHaveAttribute(
+        'aria-describedby',
+        (await errorEl.getAttribute('id')) ?? ''
+      );
+
+      const option3 = group.getByRole('radio', { name: 'Option 3' });
+      await option3.focus();
+      await page.keyboard.press('Space');
+      await page.evaluate(() =>
+        (document.activeElement as HTMLElement)?.blur()
+      );
+
+      await expect(errorEl).toHaveCount(0);
+    });
+  });
+
+  test.describe('Real inert blocks focus on unselected custom content', () => {
+    test('the nested control real-refuses focus until its radio is selected', async ({
+      page
+    }) => {
+      const group = page.getByRole('radiogroup', {
+        name: 'Radio group with custom content'
+      });
+      const customRadio = group.getByRole('radio', {
+        name: 'Custom option with inline selectors'
+      });
+      const nestedCombobox = group.getByRole('combobox', {
+        name: 'Select day'
+      });
+
+      await expect(customRadio).not.toBeChecked();
+
+      await nestedCombobox.focus();
+      await expect(nestedCombobox).not.toBeFocused();
+
+      await customRadio.click();
+      await expect(customRadio).toBeChecked();
+
+      await nestedCombobox.focus();
+      await expect(nestedCombobox).toBeFocused();
+    });
+  });
+
+  test.describe('Real hideDetails suppresses both a real hint and a real validation error', () => {
+    test('a hint stays real-absent untouched, and a real error stays real-absent once invalid', async ({
+      page
+    }) => {
+      const group = page.getByRole('radiogroup', {
+        name: 'Required radio group with hidden details'
+      });
+
+      await expect(group.getByTestId('cps-radio-group-hint')).toHaveCount(0);
+
+      const option1 = group.getByRole('radio', { name: 'Option 1' });
+      await option1.focus();
+      await page.keyboard.press('Space');
+      await page.evaluate(() =>
+        (document.activeElement as HTMLElement)?.blur()
+      );
+
+      await expect(group).toHaveAttribute('aria-invalid', 'true');
+      await expect(group).not.toHaveAttribute('aria-describedby', /.+/);
+      await expect(group.getByTestId('cps-radio-group-error')).toHaveCount(0);
+    });
+  });
+});
diff --git a/projects/composition/src/app/pages/radio-page/radio-page.component.html b/projects/composition/src/app/pages/radio-page/radio-page.component.html
index 70fde3e68..047dc62ba 100644
--- a/projects/composition/src/app/pages/radio-page/radio-page.component.html
+++ b/projects/composition/src/app/pages/radio-page/radio-page.component.html
@@ -13,6 +13,21 @@
     </form>
   </app-code-example>
 
+  <app-code-example
+    label="Required radio group with hidden details"
+    [htmlCode]="examples.requiredHiddenRadioGroup.html"
+    [tsCode]="examples.requiredHiddenRadioGroup.ts">
+    <form [formGroup]="form">
+      <cps-radio-group
+        groupLabel="Required radio group with hidden details"
+        formControlName="requiredRadioHidden"
+        [options]="options"
+        hint="This hint stays hidden"
+        [hideDetails]="true">
+      </cps-radio-group>
+    </form>
+  </app-code-example>
+
   <app-code-example
     label="Radio group with a tooltip"
     [htmlCode]="examples.tooltipRadioGroup.html"
@@ -60,6 +75,17 @@
     </cps-radio-group>
   </app-code-example>
 
+  <app-code-example
+    label="Radio group with a hint"
+    [htmlCode]="examples.hintRadioGroup.html"
+    [tsCode]="examples.hintRadioGroup.ts">
+    <cps-radio-group
+      groupLabel="Radio group with a hint"
+      [options]="options"
+      hint="Choose the option that best fits your use case">
+    </cps-radio-group>
+  </app-code-example>
+
   <app-code-example
     label="Radio group with two-way binding"
     [htmlCode]="examples.twoWayBindingRadioGroup.html"
diff --git a/projects/composition/src/app/pages/radio-page/radio-page.component.ts b/projects/composition/src/app/pages/radio-page/radio-page.component.ts
index f70572799..c9411285f 100644
--- a/projects/composition/src/app/pages/radio-page/radio-page.component.ts
+++ b/projects/composition/src/app/pages/radio-page/radio-page.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, inject, OnInit } from '@angular/core';
 import {
   AbstractControl,
   FormsModule,
@@ -88,19 +88,17 @@ export class RadioPageComponent implements OnInit {
 
   componentData = ComponentData;
 
-  // eslint-disable-next-line no-useless-constructor
-  constructor(private _formBuilder: UntypedFormBuilder) {}
+  private readonly _formBuilder = inject(UntypedFormBuilder);
 
   ngOnInit() {
+    const requiredThirdValidators = [
+      Validators.required,
+      (control: AbstractControl): ValidationErrors | null =>
+        this._checkThirdSelected(control)
+    ];
     this.form = this._formBuilder.group({
-      requiredRadio: [
-        '',
-        [
-          Validators.required,
-          (control: AbstractControl): ValidationErrors | null =>
-            this._checkThirdSelected(control)
-        ]
-      ]
+      requiredRadio: ['', requiredThirdValidators],
+      requiredRadioHidden: ['', requiredThirdValidators]
     });
   }
 
diff --git a/projects/composition/src/app/pages/radio-page/radio-page.examples.ts b/projects/composition/src/app/pages/radio-page/radio-page.examples.ts
index 85bc6fde3..c5a0432e6 100644
--- a/projects/composition/src/app/pages/radio-page/radio-page.examples.ts
+++ b/projects/composition/src/app/pages/radio-page/radio-page.examples.ts
@@ -46,6 +46,36 @@ private _checkThirdSelected(control: AbstractControl): ValidationErrors | null {
 }`
   },
 
+  requiredHiddenRadioGroup: {
+    html: `
+<form [formGroup]="form">
+  <cps-radio-group
+    groupLabel="Required radio group with hidden details"
+    formControlName="requiredRadioHidden"
+    [options]="options"
+    hint="This hint stays hidden"
+    [hideDetails]="true">
+  </cps-radio-group>
+</form>`,
+    ts: `
+${radioOptionsTs.trim()}
+
+form!: UntypedFormGroup;
+
+ngOnInit() {
+  this.form = this._formBuilder.group({
+    requiredRadioHidden: [
+      '',
+      [
+        Validators.required,
+        (control: AbstractControl): ValidationErrors | null =>
+          this._checkThirdSelected(control)
+      ]
+    ]
+  });
+}`
+  },
+
   tooltipRadioGroup: {
     html: `
 <cps-radio-group
@@ -105,6 +135,16 @@ partiallyDisabledOptions: CpsRadioOption[] = [
 ];`
   },
 
+  hintRadioGroup: {
+    html: `
+<cps-radio-group
+  groupLabel="Radio group with a hint"
+  [options]="options"
+  hint="Choose the option that best fits your use case">
+</cps-radio-group>`,
+    ts: radioOptionsTs
+  },
+
   twoWayBindingRadioGroup: {
     html: `
 <div class="sync-val-example">
diff --git a/projects/cps-ui-kit/src/lib/components/cps-radio-group/cps-radio-button/cps-radio-button.component.html b/projects/cps-ui-kit/src/lib/components/cps-radio-group/cps-radio-button/cps-radio-button.component.html
index 451efc2f4..abb5bc63a 100644
--- a/projects/cps-ui-kit/src/lib/components/cps-radio-group/cps-radio-button/cps-radio-button.component.html
+++ b/projects/cps-ui-kit/src/lib/components/cps-radio-group/cps-radio-button/cps-radio-button.component.html
@@ -1,6 +1,7 @@
 @if (option.tooltip) {
   <div
     class="cps-radio-group-content-button"
+    data-testid="cps-radio-button"
     [cpsTooltip]="option.tooltip || ''"
     tooltipCloseDelay="0"
     tooltipPosition="bottom">
@@ -13,7 +14,7 @@
       "></ng-container>
   </div>
 } @else {
-  <div class="cps-radio-group-content-button">
+  <div class="cps-radio-group-content-button" data-testid="cps-radio-button">
     <ng-container
       *ngTemplateOutlet="
         optionRadioTemplate;
@@ -30,6 +31,7 @@
       type="radio"
       [id]="inputId"
       [name]="groupName"
+      data-testid="cps-radio-button-input"
       [attr.aria-label]="option.ariaLabel || null"
       [disabled]="option.disabled || groupDisabled"
       [value]="option.value"
@@ -41,12 +43,14 @@
   <div
     #contentRef
     class="content"
+    data-testid="cps-radio-button-content"
     [attr.inert]="!checked || option.disabled || groupDisabled ? '' : null">
     <ng-content></ng-content>
   </div>
   @if (!contentRef.innerHTML.trim() && option.label) {
     <label
       class="cps-radio-group-content-button-label"
+      data-testid="cps-radio-button-label"
       [for]="inputId"
       [style.cursor]="option.disabled || groupDisabled ? 'default' : 'pointer'"
       >{{ option.label }}
diff --git a/projects/cps-ui-kit/src/lib/components/cps-radio-group/cps-radio-group.component.html b/projects/cps-ui-kit/src/lib/components/cps-radio-group/cps-radio-group.component.html
index b6adb869c..e03afb7d4 100644
--- a/projects/cps-ui-kit/src/lib/components/cps-radio-group/cps-radio-group.component.html
+++ b/projects/cps-ui-kit/src/lib/components/cps-radio-group/cps-radio-group.component.html
@@ -1,5 +1,6 @@
 <div
   class="cps-radio-group"
+  data-testid="cps-radio-group"
   role="radiogroup"
   [attr.aria-label]="ariaLabel || groupLabel || null"
   [attr.aria-describedby]="describedBy"
@@ -7,11 +8,12 @@
   [attr.aria-required]="isRequired || null"
   [attr.aria-invalid]="error ? 'true' : null">
   @if (groupLabel) {
-    <div class="cps-radio-group-label">
+    <div class="cps-radio-group-label" data-testid="cps-radio-group-label">
       <span>{{ groupLabel }}</span>
       @if (infoTooltip) {
         <cps-info-circle
           class="cps-radio-group-label-info-circle"
+          data-testid="cps-radio-group-info-circle"
           size="xsmall"
           [tooltipPosition]="infoTooltipPosition"
           [tooltipContentClass]="infoTooltipClass"
@@ -26,6 +28,7 @@
   <div
     #contentRef
     class="cps-radio-group-content"
+    data-testid="cps-radio-group-content"
     [class.cps-radio-group-content-vertical]="vertical"
     [class.cps-radio-group-content-horizontal]="!vertical">
     <ng-content></ng-content>
@@ -34,10 +37,12 @@
   @if (!contentRef.innerHTML.trim()) {
     <div
       class="cps-radio-group-content"
+      data-testid="cps-radio-group-content"
       [class.cps-radio-group-content-vertical]="vertical"
       [class.cps-radio-group-content-horizontal]="!vertical">
-      @for (option of options; track option) {
+      @for (option of options; track option; let i = $index) {
         <cps-radio-button
+          [attr.data-testid]="'cps-radio-group-option-' + i"
           [option]="option"
           [groupName]="groupName"
           [checked]="option.value === value"
@@ -50,7 +55,10 @@
     </div>
   }
   @if (!error && !hideDetails) {
-    <div [id]="hintId" class="cps-radio-hint">
+    <div
+      [id]="hintId"
+      class="cps-radio-hint"
+      data-testid="cps-radio-group-hint">
       {{ hint }}
     </div>
   }
@@ -58,6 +66,7 @@
     <div
       [id]="errorId"
       class="cps-radio-error"
+      data-testid="cps-radio-group-error"
       aria-live="polite"
       aria-atomic="true">
       {{ error }}
diff --git a/projects/cps-ui-kit/src/lib/components/cps-radio-group/cps-radio/cps-radio.component.ts b/projects/cps-ui-kit/src/lib/components/cps-radio-group/cps-radio/cps-radio.component.ts
index d1be7a500..733a40453 100644
--- a/projects/cps-ui-kit/src/lib/components/cps-radio-group/cps-radio/cps-radio.component.ts
+++ b/projects/cps-ui-kit/src/lib/components/cps-radio-group/cps-radio/cps-radio.component.ts
@@ -14,7 +14,8 @@ import { CpsRadioButtonComponent } from '../cps-radio-button/cps-radio-button.co
   selector: 'cps-radio',
   imports: [CpsRadioButtonComponent],
   templateUrl: './cps-radio.component.html',
-  styleUrls: ['./cps-radio.component.scss']
+  styleUrls: ['./cps-radio.component.scss'],
+  host: { 'data-testid': 'cps-radio' }
 })
 export class CpsRadioComponent implements OnInit {
   /**

From 96c89ba79471769c8f6bab4515e7335ecd0fba34 Mon Sep 17 00:00:00 2001
From: Andrei Fateev <fateeand@gmail.com>
Date: Thu, 6 Aug 2026 13:39:22 +0200
Subject: [PATCH 2/2] address feedback

---
 .../components/cps-radio-group.spec.ts        | 26 +++++++++----------
 .../radio-page/radio-page.component.html      |  4 +++
 .../pages/radio-page/radio-page.examples.ts   | 12 +++++++++
 .../cps-radio-group.component.html            |  2 +-
 4 files changed, 30 insertions(+), 14 deletions(-)

diff --git a/playwright/cps-ui-kit/components/cps-radio-group.spec.ts b/playwright/cps-ui-kit/components/cps-radio-group.spec.ts
index 2226d4a1d..01ce32045 100644
--- a/playwright/cps-ui-kit/components/cps-radio-group.spec.ts
+++ b/playwright/cps-ui-kit/components/cps-radio-group.spec.ts
@@ -1,4 +1,12 @@
-import { test, expect } from '@playwright/test';
+import { test, expect, type Page, type Locator } from '@playwright/test';
+
+function example(page: Page, testId: string): Locator {
+  return page.getByTestId(testId);
+}
+
+function radioGroup(page: Page, testId: string): Locator {
+  return example(page, testId).getByRole('radiogroup');
+}
 
 test.describe('cps-radio-group', () => {
   test.beforeEach(async ({ page }) => {
@@ -9,9 +17,7 @@ test.describe('cps-radio-group', () => {
     test('ArrowDown from an enabled radio real-skips a disabled one via native grouping', async ({
       page
     }) => {
-      const group = page.getByRole('radiogroup', {
-        name: 'Radio group with partially disabled options and targeted tooltips'
-      });
+      const group = example(page, 'partially-disabled-radio-group');
       const option2 = group.getByRole('radio', { name: 'Option 2' });
       const option4 = group.getByRole('radio', { name: 'Option 4' });
 
@@ -27,9 +33,7 @@ test.describe('cps-radio-group', () => {
     test('selecting the wrong option shows a real error; selecting the right one clears it', async ({
       page
     }) => {
-      const group = page.getByRole('radiogroup', {
-        name: 'Radio group where 3rd option must be selected'
-      });
+      const group = radioGroup(page, 'required-radio-group');
       const errorEl = group.getByTestId('cps-radio-group-error');
 
       const option1 = group.getByRole('radio', { name: 'Option 1' });
@@ -61,9 +65,7 @@ test.describe('cps-radio-group', () => {
     test('the nested control real-refuses focus until its radio is selected', async ({
       page
     }) => {
-      const group = page.getByRole('radiogroup', {
-        name: 'Radio group with custom content'
-      });
+      const group = example(page, 'custom-content-radio-group');
       const customRadio = group.getByRole('radio', {
         name: 'Custom option with inline selectors'
       });
@@ -88,9 +90,7 @@ test.describe('cps-radio-group', () => {
     test('a hint stays real-absent untouched, and a real error stays real-absent once invalid', async ({
       page
     }) => {
-      const group = page.getByRole('radiogroup', {
-        name: 'Required radio group with hidden details'
-      });
+      const group = radioGroup(page, 'required-hidden-radio-group');
 
       await expect(group.getByTestId('cps-radio-group-hint')).toHaveCount(0);
 
diff --git a/projects/composition/src/app/pages/radio-page/radio-page.component.html b/projects/composition/src/app/pages/radio-page/radio-page.component.html
index 047dc62ba..e709c2f23 100644
--- a/projects/composition/src/app/pages/radio-page/radio-page.component.html
+++ b/projects/composition/src/app/pages/radio-page/radio-page.component.html
@@ -6,6 +6,7 @@
     [tsCode]="examples.requiredRadioGroup.ts">
     <form [formGroup]="form">
       <cps-radio-group
+        data-testid="required-radio-group"
         groupLabel="Radio group where 3rd option must be selected"
         formControlName="requiredRadio"
         [options]="options">
@@ -19,6 +20,7 @@
     [tsCode]="examples.requiredHiddenRadioGroup.ts">
     <form [formGroup]="form">
       <cps-radio-group
+        data-testid="required-hidden-radio-group"
         groupLabel="Required radio group with hidden details"
         formControlName="requiredRadioHidden"
         [options]="options"
@@ -70,6 +72,7 @@
     [htmlCode]="examples.partiallyDisabledRadioGroup.html"
     [tsCode]="examples.partiallyDisabledRadioGroup.ts">
     <cps-radio-group
+      data-testid="partially-disabled-radio-group"
       groupLabel="Radio group with partially disabled options and targeted tooltips"
       [options]="partiallyDisabledOptions">
     </cps-radio-group>
@@ -105,6 +108,7 @@
     [htmlCode]="examples.customContentRadioGroup.html"
     [tsCode]="examples.customContentRadioGroup.ts">
     <cps-radio-group
+      data-testid="custom-content-radio-group"
       groupLabel="Radio group with custom content"
       class="custom-content-example"
       [value]="2"
diff --git a/projects/composition/src/app/pages/radio-page/radio-page.examples.ts b/projects/composition/src/app/pages/radio-page/radio-page.examples.ts
index c5a0432e6..1e181eebc 100644
--- a/projects/composition/src/app/pages/radio-page/radio-page.examples.ts
+++ b/projects/composition/src/app/pages/radio-page/radio-page.examples.ts
@@ -58,6 +58,8 @@ private _checkThirdSelected(control: AbstractControl): ValidationErrors | null {
   </cps-radio-group>
 </form>`,
     ts: `
+private readonly _formBuilder = inject(UntypedFormBuilder);
+
 ${radioOptionsTs.trim()}
 
 form!: UntypedFormGroup;
@@ -73,6 +75,16 @@ ngOnInit() {
       ]
     ]
   });
+}
+
+private _checkThirdSelected(control: AbstractControl): ValidationErrors | null {
+  const val = control.value;
+  if (!val) return null;
+
+  if (val !== 'third') {
+    return { mustSelectThird: 'Only third option must be selected' };
+  }
+  return null;
 }`
   },
 
diff --git a/projects/cps-ui-kit/src/lib/components/cps-radio-group/cps-radio-group.component.html b/projects/cps-ui-kit/src/lib/components/cps-radio-group/cps-radio-group.component.html
index e03afb7d4..ca5696454 100644
--- a/projects/cps-ui-kit/src/lib/components/cps-radio-group/cps-radio-group.component.html
+++ b/projects/cps-ui-kit/src/lib/components/cps-radio-group/cps-radio-group.component.html
@@ -37,7 +37,7 @@
   @if (!contentRef.innerHTML.trim()) {
     <div
       class="cps-radio-group-content"
-      data-testid="cps-radio-group-content"
+      data-testid="cps-radio-group-options"
       [class.cps-radio-group-content-vertical]="vertical"
       [class.cps-radio-group-content-horizontal]="!vertical">
       @for (option of options; track option; let i = $index) {