From 52fd4eb7da5cb6bc29a36dab5b12ff927294bdc4 Mon Sep 17 00:00:00 2001
From: Andrei Fateev <fateeand@gmail.com>
Date: Wed, 5 Aug 2026 14:54:44 +0200
Subject: [PATCH 1/2] test: add Playwright coverage and test ids for
 CpsProgressCircularComponent

---
 .../components/cps-progress-circular.spec.ts  | 38 +++++++++++++++++++
 .../progress-circular-page.component.html     |  1 +
 .../progress-circular-page.examples.ts        |  1 +
 .../cps-progress-circular.component.html      |  1 +
 4 files changed, 41 insertions(+)
 create mode 100644 playwright/cps-ui-kit/components/cps-progress-circular.spec.ts

diff --git a/playwright/cps-ui-kit/components/cps-progress-circular.spec.ts b/playwright/cps-ui-kit/components/cps-progress-circular.spec.ts
new file mode 100644
index 000000000..85fb0a813
--- /dev/null
+++ b/playwright/cps-ui-kit/components/cps-progress-circular.spec.ts
@@ -0,0 +1,38 @@
+import { test, expect } from '@playwright/test';
+
+test.describe('cps-progress-circular', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto('/progress-circular');
+  });
+
+  test.describe('Real CSS custom-property color resolves to an actual color', () => {
+    test('a color name real-resolves through the real stylesheet to its actual RGB value', async ({
+      page
+    }) => {
+      const circle = page
+        .getByRole('progressbar', { name: 'Luxury progress circular' })
+        .getByTestId('cps-progress-circular');
+
+      await expect(circle).toHaveCSS('border-top-color', 'rgb(100, 0, 50)');
+      await expect(circle).toHaveCSS('width', '120px');
+    });
+  });
+
+  test.describe('Real prefers-reduced-motion slows, not stops, the spin animation', () => {
+    test('reduced motion real-slows the animation while keeping it running', async ({
+      page
+    }) => {
+      const circle = page
+        .getByRole('progressbar', { name: 'Luxury progress circular' })
+        .getByTestId('cps-progress-circular');
+
+      await expect(circle).toHaveCSS('animation-duration', '0.8s');
+      await expect(circle).toHaveCSS('animation-iteration-count', 'infinite');
+
+      await page.emulateMedia({ reducedMotion: 'reduce' });
+
+      await expect(circle).toHaveCSS('animation-duration', '2.4s');
+      await expect(circle).toHaveCSS('animation-iteration-count', 'infinite');
+    });
+  });
+});
diff --git a/projects/composition/src/app/pages/progress-circular-page/progress-circular-page.component.html b/projects/composition/src/app/pages/progress-circular-page/progress-circular-page.component.html
index 2d6de447a..c4fc4157f 100644
--- a/projects/composition/src/app/pages/progress-circular-page/progress-circular-page.component.html
+++ b/projects/composition/src/app/pages/progress-circular-page/progress-circular-page.component.html
@@ -13,6 +13,7 @@
     [htmlCode]="examples.variants.html">
     <div class="progr-circ-group">
       <cps-progress-circular
+        ariaLabel="Luxury progress circular"
         color="luxury"
         diameter="7.5rem"
         strokeWidth="0.5rem"></cps-progress-circular>
diff --git a/projects/composition/src/app/pages/progress-circular-page/progress-circular-page.examples.ts b/projects/composition/src/app/pages/progress-circular-page/progress-circular-page.examples.ts
index 7a2c51e64..40bd12783 100644
--- a/projects/composition/src/app/pages/progress-circular-page/progress-circular-page.examples.ts
+++ b/projects/composition/src/app/pages/progress-circular-page/progress-circular-page.examples.ts
@@ -6,6 +6,7 @@ export const progressCircularExamples: Record<
     html: `
 <div style="display: flex; align-items: center; gap: 3rem; overflow: hidden;">
   <cps-progress-circular
+    ariaLabel="Luxury progress circular"
     color="luxury"
     diameter="7.5rem"
     strokeWidth="0.5rem"></cps-progress-circular>
diff --git a/projects/cps-ui-kit/src/lib/components/cps-progress-circular/cps-progress-circular.component.html b/projects/cps-ui-kit/src/lib/components/cps-progress-circular/cps-progress-circular.component.html
index 4a7c11ce5..97fa7ba82 100644
--- a/projects/cps-ui-kit/src/lib/components/cps-progress-circular/cps-progress-circular.component.html
+++ b/projects/cps-ui-kit/src/lib/components/cps-progress-circular/cps-progress-circular.component.html
@@ -1,5 +1,6 @@
 <div
   aria-hidden="true"
   class="cps-progress-circular"
+  data-testid="cps-progress-circular"
   [style.width]="cvtDiameter"
   [style.border]="`${cvtStrokeWidth} solid ${cvtColor}`"></div>

From a15bf04146856b1167f380bade6f677646a652a7 Mon Sep 17 00:00:00 2001
From: Andrei Fateev <fateeand@gmail.com>
Date: Wed, 5 Aug 2026 15:13:52 +0200
Subject: [PATCH 2/2] address feedback

---
 .../components/cps-progress-circular.spec.ts          | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/playwright/cps-ui-kit/components/cps-progress-circular.spec.ts b/playwright/cps-ui-kit/components/cps-progress-circular.spec.ts
index 85fb0a813..5927dabe7 100644
--- a/playwright/cps-ui-kit/components/cps-progress-circular.spec.ts
+++ b/playwright/cps-ui-kit/components/cps-progress-circular.spec.ts
@@ -30,9 +30,16 @@ test.describe('cps-progress-circular', () => {
       await expect(circle).toHaveCSS('animation-iteration-count', 'infinite');
 
       await page.emulateMedia({ reducedMotion: 'reduce' });
+      await page.reload();
+      const reducedCircle = page
+        .getByRole('progressbar', { name: 'Luxury progress circular' })
+        .getByTestId('cps-progress-circular');
 
-      await expect(circle).toHaveCSS('animation-duration', '2.4s');
-      await expect(circle).toHaveCSS('animation-iteration-count', 'infinite');
+      await expect(reducedCircle).toHaveCSS('animation-duration', '2.4s');
+      await expect(reducedCircle).toHaveCSS(
+        'animation-iteration-count',
+        'infinite'
+      );
     });
   });
 });