feat: fix a11y issues in loader component

playwright/cps-accessibility.spec.ts

@@ -121,7 +121,22 @@ const components: ComponentEntry[] = [
   // { route: '/icon', name: 'Icon', selector: 'cps-icon' },
   { route: '/info-circle', name: 'Info circle', selector: 'cps-info-circle' },
   { route: '/input', name: 'Input', selector: '.example-content cps-input' },
-  // { route: '/loader', name: 'Loader', selector: 'cps-loader' },
+  { route: '/loader', name: 'Loader', selector: '.example-content cps-loader' },
+  {
+    route: '/loader',
+    name: 'Loader fullscreen',
+    selector: '.example-content cps-loader',
+    setup: async (page) => {
+      await page.waitForSelector('.example-content');
+      await page
+        .locator('.example-content cps-button')
+        .filter({ hasText: /Toggle fullscreen loader/i })
+        .click();
+      await page.waitForSelector(
+        '.cps-loader-overlay[style*="position: fixed"]'
+      );
+    }
+  },
   {
     route: '/menu',
     name: 'Menu standard',

projects/composition/src/app/api-data/cps-loader.json

@@ -36,6 +36,30 @@
                         "type": "boolean",
                         "default": "true",
                         "description": "Determines whether to show 'Loading...' label."
+                    },
+                    {
+                        "name": "label",
+                        "optional": false,
+                        "readonly": false,
+                        "type": "string",
+                        "default": "Loading...",
+                        "description": "Text shown visually when showLabel is true."
+                    },
+                    {
+                        "name": "ariaLabel",
+                        "optional": false,
+                        "readonly": false,
+                        "type": "string",
+                        "default": "Loading",
+                        "description": "Text announced by screen readers. Used when showLabel is false or label\nis empty."
+                    },
+                    {
+                        "name": "doneAriaLabel",
+                        "optional": false,
+                        "readonly": false,
+                        "type": "string",
+                        "default": "Loading complete",
+                        "description": "Text announced by screen readers when the loader is destroyed."
                     }
                 ]
             }

projects/composition/src/app/pages/loader-page/loader-page.component.scss

@@ -1,19 +1,20 @@
 $loaders-label-color: var(--cps-color-text-darkest);
 
 .loaders-group {
-  gap: 30px;
+  gap: 1.875rem;
+  margin-left: 0.5rem;
   display: flex;
   flex-direction: column;
 
   &-label {
-    margin-bottom: 8px;
+    margin-bottom: 0.5rem;
     line-height: 2;
     color: $loaders-label-color;
   }
 
   .loader-container {
-    width: 450px;
-    height: 200px;
-    border: 1px solid lightgrey;
+    width: 28.125rem;
+    height: 12.5rem;
+    border: 0.0625rem solid lightgrey;
   }
 }

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

@@ -281,18 +281,28 @@ describe('CpsButtonComponent', () => {
       expect(button.getAttribute('type')).toBe('submit');
     });
 
-    it('should fall back to "button" native type if nativeType set to null', () => {
+    it('should fall back to "button" and warn if nativeType set to null', () => {
+      const warnSpy = jest.spyOn(console, 'warn').mockImplementation(() => {});
       fixture.componentRef.setInput('nativeType', null);
       fixture.detectChanges();
       const button = fixture.nativeElement.querySelector('button');
       expect(button.getAttribute('type')).toBe('button');
+      expect(warnSpy).toHaveBeenCalledWith(
+        expect.stringContaining('Invalid nativeType value')
+      );
+      warnSpy.mockRestore();
     });
 
-    it('should fall back to "button" native type if nativeType set to undefined', () => {
+    it('should fall back to "button" and warn if nativeType set to undefined', () => {
+      const warnSpy = jest.spyOn(console, 'warn').mockImplementation(() => {});
       fixture.componentRef.setInput('nativeType', undefined);
       fixture.detectChanges();
       const button = fixture.nativeElement.querySelector('button');
       expect(button.getAttribute('type')).toBe('button');
+      expect(warnSpy).toHaveBeenCalledWith(
+        expect.stringContaining('Invalid nativeType value')
+      );
+      warnSpy.mockRestore();
     });
 
     it('should fall back to "button" and warn if nativeType is an invalid string', () => {

projects/cps-ui-kit/src/lib/components/cps-loader/cps-loader.component.html

@@ -5,12 +5,15 @@
     position: fullScreen ? 'fixed' : 'relative'
   }">
   <div class="cps-loader-overlay-content">
-    @if (showLabel) {
-      <label class="cps-loader-overlay-content-text" [style.color]="labelColor"
-        >Loading...
-      </label>
+    @if (showLabel && label.trim()) {
+      <span
+        class="cps-loader-overlay-content-text"
+        [style.color]="cvtLabelColor"
+        aria-hidden="true">
+        {{ label }}
+      </span>
     }
-    <div class="cps-loader-overlay-content-circles">
+    <div class="cps-loader-overlay-content-circles" aria-hidden="true">
       <div class="cps-loader-overlay-content-circles-circle cps-sp1">
         <div class="cps-loader-overlay-content-circles-circle cps-sp2">
           <div class="cps-loader-overlay-content-circles-circle cps-sp3"></div>

projects/cps-ui-kit/src/lib/components/cps-loader/cps-loader.component.scss

@@ -23,25 +23,23 @@ $color-inner: var(--cps-color-energy);
       &-text {
         display: block;
         text-align: center;
-        font-size: 20px;
+        font-size: 1.25rem;
         font-family: 'Source Sans Pro', sans-serif;
         font-weight: 600;
-        padding-bottom: 15px;
+        padding-bottom: 0.9375rem;
         animation: cps-loader-text-animation 4s linear infinite;
-        -webkit-user-select: none; /* Safari */
-        -ms-user-select: none; /* IE 10 and IE 11 */
-        user-select: none; /* Standard syntax */
+        user-select: none;
       }
 
       &-circles {
-        height: 85px;
-        width: 90px;
+        height: 5.3125rem;
+        width: 5.625rem;
 
         &-circle {
-          border-left: 5px solid;
+          border-left: 0.3125rem solid;
           border-top-left-radius: 100%;
-          border-top: 5px solid;
-          margin: 5px;
+          border-top: 0.3125rem solid;
+          margin: 0.3125rem;
           animation-name: cps-loader-circles-animation;
           animation-duration: 1000ms;
           animation-timing-function: linear;
@@ -54,20 +52,20 @@ $color-inner: var(--cps-color-energy);
         .cps-sp1 {
           border-left-color: $color-outer;
           border-top-color: $color-outer;
-          width: 40px;
-          height: 40px;
+          width: 2.5rem;
+          height: 2.5rem;
         }
 
         .cps-sp2 {
           border-left-color: $color-middle;
           border-top-color: $color-middle;
-          width: 30px;
-          height: 30px;
+          width: 1.875rem;
+          height: 1.875rem;
         }
 
         .cps-sp3 {
-          width: 20px;
-          height: 20px;
+          width: 1.25rem;
+          height: 1.25rem;
           border-left-color: $color-inner;
           border-top-color: $color-inner;
         }