From 236c2d7f10cbbf00c6d8e45b831ccddde1644caa Mon Sep 17 00:00:00 2001
From: Andrei Fateev <fateeand@gmail.com>
Date: Wed, 10 Jun 2026 18:00:00 +0200
Subject: [PATCH 1/3] feat: fix a11y issues in progress linear component

---
 playwright/cps-accessibility.spec.ts          | 10 ++++-----
 .../src/app/api-data/cps-progress-linear.json |  8 +++++++
 .../progress-linear-page.component.html       | 14 ++++++-------
 .../progress-linear-page.component.scss       |  2 +-
 .../cps-autocomplete.component.html           |  4 ++--
 .../cps-input/cps-input.component.html        |  4 ++--
 .../cps-progress-linear.component.html        |  1 +
 .../cps-progress-linear.component.spec.ts     | 21 +++++++++++++++++++
 .../cps-progress-linear.component.ts          | 19 +++++++++++++----
 .../cps-select/cps-select.component.html      |  4 ++--
 .../cps-tree-autocomplete.component.html      |  4 ++--
 .../cps-tree-select.component.html            |  4 ++--
 12 files changed, 68 insertions(+), 27 deletions(-)

diff --git a/playwright/cps-accessibility.spec.ts b/playwright/cps-accessibility.spec.ts
index 55d8be9ed..dfaa3ac1e 100644
--- a/playwright/cps-accessibility.spec.ts
+++ b/playwright/cps-accessibility.spec.ts
@@ -155,11 +155,11 @@ const components: ComponentEntry[] = [
   //   name: 'Progress circular',
   //   selector: 'cps-progress-circular'
   // },
-  // {
-  //   route: '/progress-linear',
-  //   name: 'Progress linear',
-  //   selector: 'cps-progress-linear'
-  // },
+  {
+    route: '/progress-linear',
+    name: 'Progress linear',
+    selector: 'cps-progress-linear'
+  },
   { route: '/radio-group', name: 'Radio', selector: 'cps-radio-group' },
   {
     route: '/scheduler',
diff --git a/projects/composition/src/app/api-data/cps-progress-linear.json b/projects/composition/src/app/api-data/cps-progress-linear.json
index 0d2c554c3..55cc608b0 100644
--- a/projects/composition/src/app/api-data/cps-progress-linear.json
+++ b/projects/composition/src/app/api-data/cps-progress-linear.json
@@ -52,6 +52,14 @@
                         "type": "string | number",
                         "default": "0",
                         "description": "Border radius of the progress bar, of type number denoting pixels or string."
+                    },
+                    {
+                        "name": "ariaLabel",
+                        "optional": false,
+                        "readonly": false,
+                        "type": "string",
+                        "default": "Loading",
+                        "description": "Accessible label announced by screen readers to describe what is loading."
                     }
                 ]
             }
diff --git a/projects/composition/src/app/pages/progress-linear-page/progress-linear-page.component.html b/projects/composition/src/app/pages/progress-linear-page/progress-linear-page.component.html
index d95d8bcc1..9366a925d 100644
--- a/projects/composition/src/app/pages/progress-linear-page/progress-linear-page.component.html
+++ b/projects/composition/src/app/pages/progress-linear-page/progress-linear-page.component.html
@@ -4,21 +4,21 @@
     <cps-progress-linear></cps-progress-linear>
     <cps-progress-linear
       color="energy"
-      radius="4"
+      radius="0.25rem"
       bgColor="energy-highlighten"
-      height="12px">
+      height="0.75rem">
     </cps-progress-linear>
     <cps-progress-linear
-      height="3"
-      radius="4"
+      height="0.1875rem"
+      radius="0.25rem"
       opacity="0.3"
       bgColor="transparent">
     </cps-progress-linear>
     <cps-progress-linear
       color="grounded"
-      radius="10px"
+      radius="0.625rem"
       bgColor="grounded-highlighten"
-      width="400px"
-      height="12px"></cps-progress-linear>
+      width="25rem"
+      height="0.75rem"></cps-progress-linear>
   </div>
 </app-component-docs-viewer>
diff --git a/projects/composition/src/app/pages/progress-linear-page/progress-linear-page.component.scss b/projects/composition/src/app/pages/progress-linear-page/progress-linear-page.component.scss
index 056d4b431..60eaa669a 100644
--- a/projects/composition/src/app/pages/progress-linear-page/progress-linear-page.component.scss
+++ b/projects/composition/src/app/pages/progress-linear-page/progress-linear-page.component.scss
@@ -1,5 +1,5 @@
 .progr-lin-group {
-  gap: 48px;
+  gap: 3rem;
   display: flex;
   flex-direction: column;
 }
diff --git a/projects/cps-ui-kit/src/lib/components/cps-autocomplete/cps-autocomplete.component.html b/projects/cps-ui-kit/src/lib/components/cps-autocomplete/cps-autocomplete.component.html
index e9201d4fe..2d80187dd 100644
--- a/projects/cps-ui-kit/src/lib/components/cps-autocomplete/cps-autocomplete.component.html
+++ b/projects/cps-ui-kit/src/lib/components/cps-autocomplete/cps-autocomplete.component.html
@@ -295,8 +295,8 @@
     </cps-menu>
     @if (loading || validating) {
       <cps-progress-linear
-        height="3"
-        radius="4"
+        height="0.1875rem"
+        radius="0.25rem"
         opacity="0.3"
         class="autocomplete-progress-bar"
         bgColor="transparent">
diff --git a/projects/cps-ui-kit/src/lib/components/cps-input/cps-input.component.html b/projects/cps-ui-kit/src/lib/components/cps-input/cps-input.component.html
index 2e083ea00..50dbaf677 100644
--- a/projects/cps-ui-kit/src/lib/components/cps-input/cps-input.component.html
+++ b/projects/cps-ui-kit/src/lib/components/cps-input/cps-input.component.html
@@ -141,8 +141,8 @@
     }
     @if (loading) {
       <cps-progress-linear
-        height="3"
-        radius="4"
+        height="0.1875rem"
+        radius="0.25rem"
         opacity="0.5"
         class="cps-input-progress-bar"
         bgColor="transparent">
diff --git a/projects/cps-ui-kit/src/lib/components/cps-progress-linear/cps-progress-linear.component.html b/projects/cps-ui-kit/src/lib/components/cps-progress-linear/cps-progress-linear.component.html
index e2cae6e79..54ab2d2cf 100644
--- a/projects/cps-ui-kit/src/lib/components/cps-progress-linear/cps-progress-linear.component.html
+++ b/projects/cps-ui-kit/src/lib/components/cps-progress-linear/cps-progress-linear.component.html
@@ -1,4 +1,5 @@
 <div
+  aria-hidden="true"
   class="cps-progress-linear"
   [style.max-width]="cvtWidth()"
   [style.height]="cvtHeight()"
diff --git a/projects/cps-ui-kit/src/lib/components/cps-progress-linear/cps-progress-linear.component.spec.ts b/projects/cps-ui-kit/src/lib/components/cps-progress-linear/cps-progress-linear.component.spec.ts
index 4e3aa7704..a11149633 100644
--- a/projects/cps-ui-kit/src/lib/components/cps-progress-linear/cps-progress-linear.component.spec.ts
+++ b/projects/cps-ui-kit/src/lib/components/cps-progress-linear/cps-progress-linear.component.spec.ts
@@ -95,4 +95,25 @@ describe('CpsProgressLinearComponent', () => {
     );
     expect(indicator).toBeTruthy();
   });
+
+  it('should have role="progressbar" on the host element', () => {
+    expect(fixture.nativeElement.getAttribute('role')).toBe('progressbar');
+  });
+
+  it('should have default aria-label "Loading" on the host element', () => {
+    expect(fixture.nativeElement.getAttribute('aria-label')).toBe('Loading');
+  });
+
+  it('should reflect a custom ariaLabel on the host element', () => {
+    fixture.componentRef.setInput('ariaLabel', 'Uploading file');
+    fixture.detectChanges();
+    expect(fixture.nativeElement.getAttribute('aria-label')).toBe(
+      'Uploading file'
+    );
+  });
+
+  it('should mark the inner wrapper div as aria-hidden', () => {
+    const wrapper = fixture.nativeElement.querySelector('.cps-progress-linear');
+    expect(wrapper.getAttribute('aria-hidden')).toBe('true');
+  });
 });
diff --git a/projects/cps-ui-kit/src/lib/components/cps-progress-linear/cps-progress-linear.component.ts b/projects/cps-ui-kit/src/lib/components/cps-progress-linear/cps-progress-linear.component.ts
index 16b1de9f8..8fb2c22b7 100644
--- a/projects/cps-ui-kit/src/lib/components/cps-progress-linear/cps-progress-linear.component.ts
+++ b/projects/cps-ui-kit/src/lib/components/cps-progress-linear/cps-progress-linear.component.ts
@@ -10,7 +10,11 @@ import { convertSize } from '../../utils/internal/size-utils';
 @Component({
   selector: 'cps-progress-linear',
   templateUrl: './cps-progress-linear.component.html',
-  styleUrls: ['./cps-progress-linear.component.scss']
+  styleUrls: ['./cps-progress-linear.component.scss'],
+  host: {
+    role: 'progressbar',
+    '[attr.aria-label]': 'ariaLabel()'
+  }
 })
 export class CpsProgressLinearComponent {
   /**
@@ -55,11 +59,18 @@ export class CpsProgressLinearComponent {
    */
   radius = input<number | string>(0);
 
-  private readonly document = inject(DOCUMENT);
+  /**
+   * Accessible label announced by screen readers to describe what is loading.
+   * @group Props
+   * @default Loading
+   */
+  ariaLabel = input('Loading');
+
+  private readonly _document = inject(DOCUMENT);
 
   cvtWidth = computed(() => convertSize(this.width()));
   cvtHeight = computed(() => convertSize(this.height()));
   cvtRadius = computed(() => convertSize(this.radius()));
-  cssColor = computed(() => getCSSColor(this.color(), this.document));
-  cssBgColor = computed(() => getCSSColor(this.bgColor(), this.document));
+  cssColor = computed(() => getCSSColor(this.color(), this._document));
+  cssBgColor = computed(() => getCSSColor(this.bgColor(), this._document));
 }
diff --git a/projects/cps-ui-kit/src/lib/components/cps-select/cps-select.component.html b/projects/cps-ui-kit/src/lib/components/cps-select/cps-select.component.html
index a0347a0fe..cfa92ebf0 100644
--- a/projects/cps-ui-kit/src/lib/components/cps-select/cps-select.component.html
+++ b/projects/cps-ui-kit/src/lib/components/cps-select/cps-select.component.html
@@ -226,8 +226,8 @@
 
     @if (loading) {
       <cps-progress-linear
-        height="3"
-        radius="4"
+        height="0.1875rem"
+        radius="0.25rem"
         opacity="0.3"
         class="select-progress-bar"
         bgColor="transparent">
diff --git a/projects/cps-ui-kit/src/lib/components/cps-tree-autocomplete/cps-tree-autocomplete.component.html b/projects/cps-ui-kit/src/lib/components/cps-tree-autocomplete/cps-tree-autocomplete.component.html
index c1a437a15..ac6d4c526 100644
--- a/projects/cps-ui-kit/src/lib/components/cps-tree-autocomplete/cps-tree-autocomplete.component.html
+++ b/projects/cps-ui-kit/src/lib/components/cps-tree-autocomplete/cps-tree-autocomplete.component.html
@@ -210,8 +210,8 @@
     </cps-menu>
     @if (loading) {
       <cps-progress-linear
-        height="3"
-        radius="4"
+        height="0.1875rem"
+        radius="0.25rem"
         opacity="0.3"
         class="cps-treeautocomplete-progress-bar"
         bgColor="transparent">
diff --git a/projects/cps-ui-kit/src/lib/components/cps-tree-select/cps-tree-select.component.html b/projects/cps-ui-kit/src/lib/components/cps-tree-select/cps-tree-select.component.html
index f14d13d75..4524438d7 100644
--- a/projects/cps-ui-kit/src/lib/components/cps-tree-select/cps-tree-select.component.html
+++ b/projects/cps-ui-kit/src/lib/components/cps-tree-select/cps-tree-select.component.html
@@ -163,8 +163,8 @@
     </cps-menu>
     @if (loading) {
       <cps-progress-linear
-        height="3"
-        radius="4"
+        height="0.1875rem"
+        radius="0.25rem"
         opacity="0.3"
         class="cps-treeselect-progress-bar"
         bgColor="transparent">

From 41f541758ce3834df8e6aa538515dd6d027547c9 Mon Sep 17 00:00:00 2001
From: Andrei Fateev <fateeand@gmail.com>
Date: Thu, 11 Jun 2026 16:36:53 +0200
Subject: [PATCH 2/3] address feedback

---
 .../src/app/api-data/cps-progress-linear.json    |  2 +-
 .../cps-progress-linear.component.spec.ts        |  7 +++++++
 .../cps-progress-linear.component.ts             | 16 +++++++++++++---
 3 files changed, 21 insertions(+), 4 deletions(-)

diff --git a/projects/composition/src/app/api-data/cps-progress-linear.json b/projects/composition/src/app/api-data/cps-progress-linear.json
index 55cc608b0..d9eccc0bd 100644
--- a/projects/composition/src/app/api-data/cps-progress-linear.json
+++ b/projects/composition/src/app/api-data/cps-progress-linear.json
@@ -59,7 +59,7 @@
                         "readonly": false,
                         "type": "string",
                         "default": "Loading",
-                        "description": "Accessible label announced by screen readers to describe what is loading."
+                        "description": "Accessible label announced by screen readers to describe what is loading.\nFalls back to \"Loading\" when empty value is provided."
                     }
                 ]
             }
diff --git a/projects/cps-ui-kit/src/lib/components/cps-progress-linear/cps-progress-linear.component.spec.ts b/projects/cps-ui-kit/src/lib/components/cps-progress-linear/cps-progress-linear.component.spec.ts
index a11149633..a707d0822 100644
--- a/projects/cps-ui-kit/src/lib/components/cps-progress-linear/cps-progress-linear.component.spec.ts
+++ b/projects/cps-ui-kit/src/lib/components/cps-progress-linear/cps-progress-linear.component.spec.ts
@@ -112,6 +112,13 @@ describe('CpsProgressLinearComponent', () => {
     );
   });
 
+  it('should use a native aria-label attribute as the accessible label', () => {
+    const host: HTMLElement = fixture.nativeElement;
+    host.setAttribute('aria-label', 'Saving changes');
+    fixture.detectChanges();
+    expect(host.getAttribute('aria-label')).toBe('Saving changes');
+  });
+
   it('should mark the inner wrapper div as aria-hidden', () => {
     const wrapper = fixture.nativeElement.querySelector('.cps-progress-linear');
     expect(wrapper.getAttribute('aria-hidden')).toBe('true');
diff --git a/projects/cps-ui-kit/src/lib/components/cps-progress-linear/cps-progress-linear.component.ts b/projects/cps-ui-kit/src/lib/components/cps-progress-linear/cps-progress-linear.component.ts
index 8fb2c22b7..21fbd2f88 100644
--- a/projects/cps-ui-kit/src/lib/components/cps-progress-linear/cps-progress-linear.component.ts
+++ b/projects/cps-ui-kit/src/lib/components/cps-progress-linear/cps-progress-linear.component.ts
@@ -1,5 +1,5 @@
 import { DOCUMENT } from '@angular/common';
-import { Component, computed, inject, input } from '@angular/core';
+import { Component, computed, ElementRef, inject, input } from '@angular/core';
 import { getCSSColor } from '../../utils/colors-utils';
 import { convertSize } from '../../utils/internal/size-utils';
 
@@ -13,7 +13,7 @@ import { convertSize } from '../../utils/internal/size-utils';
   styleUrls: ['./cps-progress-linear.component.scss'],
   host: {
     role: 'progressbar',
-    '[attr.aria-label]': 'ariaLabel()'
+    '[attr.aria-label]': 'resolveAriaLabel()'
   }
 })
 export class CpsProgressLinearComponent {
@@ -61,11 +61,13 @@ export class CpsProgressLinearComponent {
 
   /**
    * Accessible label announced by screen readers to describe what is loading.
+   * Falls back to "Loading" when empty value is provided.
    * @group Props
    * @default Loading
    */
-  ariaLabel = input('Loading');
+  ariaLabel = input('');
 
+  private _elementRef = inject(ElementRef);
   private readonly _document = inject(DOCUMENT);
 
   cvtWidth = computed(() => convertSize(this.width()));
@@ -73,4 +75,12 @@ export class CpsProgressLinearComponent {
   cvtRadius = computed(() => convertSize(this.radius()));
   cssColor = computed(() => getCSSColor(this.color(), this._document));
   cssBgColor = computed(() => getCSSColor(this.bgColor(), this._document));
+
+  resolveAriaLabel(): string {
+    return (
+      this.ariaLabel() ||
+      this._elementRef.nativeElement.getAttribute('aria-label') ||
+      'Loading'
+    );
+  }
 }

From 607722cbf79d56935b4174fff87103672c5f4cf8 Mon Sep 17 00:00:00 2001
From: Andrei Fateev <fateeand@gmail.com>
Date: Thu, 11 Jun 2026 17:59:04 +0200
Subject: [PATCH 3/3] use HostAttributeToken

---
 .../cps-progress-linear.component.ts          | 49 +++++++++++++++----
 1 file changed, 39 insertions(+), 10 deletions(-)

diff --git a/projects/cps-ui-kit/src/lib/components/cps-progress-linear/cps-progress-linear.component.ts b/projects/cps-ui-kit/src/lib/components/cps-progress-linear/cps-progress-linear.component.ts
index 21fbd2f88..e0d785c02 100644
--- a/projects/cps-ui-kit/src/lib/components/cps-progress-linear/cps-progress-linear.component.ts
+++ b/projects/cps-ui-kit/src/lib/components/cps-progress-linear/cps-progress-linear.component.ts
@@ -1,5 +1,15 @@
 import { DOCUMENT } from '@angular/common';
-import { Component, computed, ElementRef, inject, input } from '@angular/core';
+import {
+  Component,
+  ElementRef,
+  HostAttributeToken,
+  Renderer2,
+  afterNextRender,
+  computed,
+  effect,
+  inject,
+  input
+} from '@angular/core';
 import { getCSSColor } from '../../utils/colors-utils';
 import { convertSize } from '../../utils/internal/size-utils';
 
@@ -12,8 +22,7 @@ import { convertSize } from '../../utils/internal/size-utils';
   templateUrl: './cps-progress-linear.component.html',
   styleUrls: ['./cps-progress-linear.component.scss'],
   host: {
-    role: 'progressbar',
-    '[attr.aria-label]': 'resolveAriaLabel()'
+    role: 'progressbar'
   }
 })
 export class CpsProgressLinearComponent {
@@ -67,8 +76,13 @@ export class CpsProgressLinearComponent {
    */
   ariaLabel = input('');
 
-  private _elementRef = inject(ElementRef);
+  private readonly _elementRef = inject(ElementRef);
   private readonly _document = inject(DOCUMENT);
+  private readonly _renderer = inject(Renderer2);
+  private readonly _staticAriaLabel = inject(
+    new HostAttributeToken('aria-label'),
+    { optional: true }
+  );
 
   cvtWidth = computed(() => convertSize(this.width()));
   cvtHeight = computed(() => convertSize(this.height()));
@@ -76,11 +90,26 @@ export class CpsProgressLinearComponent {
   cssColor = computed(() => getCSSColor(this.color(), this._document));
   cssBgColor = computed(() => getCSSColor(this.bgColor(), this._document));
 
-  resolveAriaLabel(): string {
-    return (
-      this.ariaLabel() ||
-      this._elementRef.nativeElement.getAttribute('aria-label') ||
-      'Loading'
-    );
+  constructor() {
+    effect(() => {
+      const label = this.ariaLabel() || this._staticAriaLabel;
+      if (label) {
+        this._renderer.setAttribute(
+          this._elementRef.nativeElement,
+          'aria-label',
+          label
+        );
+      }
+    });
+
+    afterNextRender(() => {
+      if (!this._elementRef.nativeElement.getAttribute('aria-label')) {
+        this._renderer.setAttribute(
+          this._elementRef.nativeElement,
+          'aria-label',
+          'Loading'
+        );
+      }
+    });
   }
 }