feat: fix a11y issues in progress linear component

playwright/cps-accessibility.spec.ts

@@ -161,11 +161,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',

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.\nFalls back to \"Loading\" when empty value is provided."
                     }
                 ]
             }

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>

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;
 }

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">

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">

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()"

projects/cps-ui-kit/src/lib/components/cps-progress-linear/cps-progress-linear.component.spec.ts

@@ -95,4 +95,32 @@ 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 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');
+  });
 });

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, 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';
 
@@ -10,7 +20,10 @@ 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'
+  }
 })
 export class CpsProgressLinearComponent {
   /**
@@ -55,11 +68,48 @@ export class CpsProgressLinearComponent {
    */
   radius = input<number | string>(0);
 
-  private readonly document = inject(DOCUMENT);
+  /**
+   * 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('');
+
+  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()));
   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));
+
+  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'
+        );
+      }
+    });
+  }
 }

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">

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">

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">