From 7d1cda6aa5188b223f82e386f8707e00a2410c03 Mon Sep 17 00:00:00 2001
From: fateeand <andrei.fateev@absa.africa>
Date: Fri, 15 May 2026 18:51:44 +0200
Subject: [PATCH 01/15] initial implementation

---
 playwright/cps-accessibility.spec.ts          |  18 +-
 .../select-page/select-page.component.scss    |   4 +-
 .../cps-autocomplete.component.html           |   7 +-
 .../cps-autocomplete.component.ts             |  25 +-
 .../cps-select/cps-select.component.html      | 121 ++++++--
 .../cps-select/cps-select.component.scss      | 125 +++++---
 .../cps-select/cps-select.component.ts        | 293 ++++++++++++++++--
 7 files changed, 462 insertions(+), 131 deletions(-)

diff --git a/playwright/cps-accessibility.spec.ts b/playwright/cps-accessibility.spec.ts
index 0fb58f96..a91e14a5 100644
--- a/playwright/cps-accessibility.spec.ts
+++ b/playwright/cps-accessibility.spec.ts
@@ -148,15 +148,15 @@ const components: ComponentEntry[] = [
   // },
   { route: '/radio-group', name: 'Radio', selector: 'cps-radio-group' },
   // { route: '/scheduler', name: 'Scheduler', selector: 'cps-scheduler' },
-  // {
-  //   route: '/select',
-  //   name: 'Select',
-  //   selector: ['cps-select', '.cps-select-options-menu'],
-  //   setup: async (page) => {
-  //     await page.waitForSelector('cps-select');
-  //     await page.locator('cps-select').first().click();
-  //   }
-  // },
+  {
+    route: '/select',
+    name: 'Select',
+    selector: ['cps-select', '.cps-select-options-menu'],
+    setup: async (page) => {
+      await page.waitForSelector('cps-select');
+      await page.locator('cps-select').first().click();
+    }
+  },
   {
     route: '/sidebar-menu',
     name: 'Sidebar menu',
diff --git a/projects/composition/src/app/pages/select-page/select-page.component.scss b/projects/composition/src/app/pages/select-page/select-page.component.scss
index 6f1be084..18606114 100644
--- a/projects/composition/src/app/pages/select-page/select-page.component.scss
+++ b/projects/composition/src/app/pages/select-page/select-page.component.scss
@@ -1,5 +1,5 @@
 .selects-group {
-  gap: 24px;
+  gap: 1.5rem;
   display: flex;
   flex-direction: column;
 }
@@ -8,6 +8,6 @@
   display: flex;
   align-items: center;
   .sync-val {
-    margin-left: 24px;
+    margin-left: 1.5rem;
   }
 }
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 b60bb0d7..6ea2d13d 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
@@ -40,6 +40,7 @@
       <div class="cps-autocomplete-box-area">
         @if (prefixIcon) {
           <cps-icon
+            aria-hidden="true"
             [icon]="prefixIcon"
             [style.color]="disabled ? 'var(--cps-text-muted)' : null"
             [size]="prefixIconSize"
@@ -163,7 +164,10 @@
                   (!multiple || !value?.length) &&
                   (multiple || isEmptyValue())
               }">
-              <cps-icon icon="delete" size="small"></cps-icon>
+              <cps-icon
+                icon="delete"
+                size="small"
+                aria-hidden="true"></cps-icon>
             </span>
           }
           @if (showChevron && options.length) {
@@ -178,6 +182,7 @@
               "
               [tabindex]="disabled ? -1 : 0">
               <cps-icon
+                aria-hidden="true"
                 icon="chevron-down"
                 size="small"
                 [color]="disabled ? 'text-light' : 'text-dark'"></cps-icon>
diff --git a/projects/cps-ui-kit/src/lib/components/cps-autocomplete/cps-autocomplete.component.ts b/projects/cps-ui-kit/src/lib/components/cps-autocomplete/cps-autocomplete.component.ts
index 8e7414be..19c0071e 100644
--- a/projects/cps-ui-kit/src/lib/components/cps-autocomplete/cps-autocomplete.component.ts
+++ b/projects/cps-ui-kit/src/lib/components/cps-autocomplete/cps-autocomplete.component.ts
@@ -686,10 +686,11 @@ export class CpsAutocompleteComponent
     event?.stopPropagation();
     event?.preventDefault();
 
-    if (
+    const hadValue =
       (!this.multiple && !this.isEmptyValue()) ||
-      (this.multiple && this.value?.length > 0)
-    ) {
+      (this.multiple && this.value?.length > 0);
+
+    if (hadValue) {
       if (this.openOnClear) {
         this._toggleOptions(true);
       }
@@ -698,9 +699,11 @@ export class CpsAutocompleteComponent
     }
     this.clearInput();
     this._dehighlightOption();
-    setTimeout(() => {
-      this.focusInput();
-    }, 0);
+    if (hadValue) {
+      setTimeout(() => {
+        this.focusInput();
+      }, 0);
+    }
   }
 
   // eslint-disable-next-line @typescript-eslint/no-empty-function
@@ -747,7 +750,6 @@ export class CpsAutocompleteComponent
     }
     this._confirmInput(this.inputText || '', false);
     this._closeAndClear();
-    this.onBlur();
   }
 
   onBoxClick() {
@@ -1151,9 +1153,12 @@ export class CpsAutocompleteComponent
 
     searchVal = searchVal.toLowerCase();
     if (!searchVal) {
-      if (this.multiple) return;
-      // Only reset the value if the inputText was changed by the user
-      if (this.inputText !== this._getValueLabel()) {
+      if (this.multiple) {
+        this._closeAndClear();
+        return;
+      }
+      // Only reset the value if the user actively edited the input to empty
+      if (this.activeSingle && this.inputText !== this._getValueLabel()) {
         this.updateValue(this._getEmptyValue());
       }
       this.cdRef.detectChanges();
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 e2294228..5267928c 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
@@ -1,12 +1,7 @@
 <div
   [ngStyle]="{ width: cvtWidth }"
   class="cps-select"
-  tabindex="0"
-  [ngClass]="{ disabled: disabled, error: error, active: isOpened }"
-  #selectContainer
-  (keydown)="onKeyDown($event)"
-  (focus)="onFocus()"
-  (blur)="onBlur()">
+  [ngClass]="{ disabled: disabled, error: error }">
   @if (label) {
     <div class="cps-select-label">
       <label>{{ label }}</label>
@@ -25,16 +20,32 @@
   }
   <div
     class="cps-select-container"
-    [class.focused]="isOpened"
+    tabindex="0"
+    role="combobox"
+    aria-haspopup="listbox"
+    [attr.aria-expanded]="isOpened"
+    [attr.aria-controls]="optionsListId"
+    [attr.aria-activedescendant]="activeDescendantId"
+    [attr.aria-required]="isRequired || null"
+    [attr.aria-invalid]="error ? 'true' : null"
+    [attr.aria-label]="computedLabel"
+    [attr.aria-disabled]="disabled || null"
     [ngClass]="{
       'persistent-clear': persistentClear,
       borderless: appearance === 'borderless',
-      underlined: appearance === 'underlined'
-    }">
-    <div class="cps-select-box" #selectBox (click)="onBoxClick()">
+      underlined: appearance === 'underlined',
+      active: isOpened,
+      focused: isActive
+    }"
+    #selectContainer
+    (keydown)="onContainerKeyDown($event)"
+    (focus)="onFocus()"
+    (blur)="onBlur()">
+    <div class="cps-select-box" #selectBox (mousedown)="onBoxClick()">
       <div class="cps-select-box-left">
         @if (prefixIcon) {
           <cps-icon
+            aria-hidden="true"
             [icon]="prefixIcon"
             [style.color]="disabled ? '#9a9595' : null"
             [size]="prefixIconSize"
@@ -61,8 +72,8 @@
               >
             }
             @if (multiple && !chips) {
-              <div class="text-group">
-                <span class="text-group-item">
+              <div class="text-group" role="list" aria-label="Selected options">
+                <span class="text-group-item" role="listitem">
                   {{
                     value
                       | combineLabels
@@ -75,9 +86,14 @@
               </div>
             }
             @if (multiple && chips) {
-              <div class="chips-group">
+              <div
+                class="chips-group"
+                role="list"
+                aria-label="Selected options">
                 @for (val of value; track val) {
                   <cps-chip
+                    role="listitem"
+                    closeButtonAriaLabel="Remove"
                     [disabled]="disabled"
                     [closable]="closableChips"
                     (closed)="select(val, true)"
@@ -97,6 +113,13 @@
       <span class="cps-select-box-icons">
         @if (clearable && !disabled) {
           <span
+            role="button"
+            aria-label="Clear selection"
+            [tabindex]="disabled ? -1 : 0"
+            (click)="clear($event)"
+            (mousedown)="$event.preventDefault()"
+            (keydown.enter)="clear($event)"
+            (keydown.space)="clear($event)"
             [style.visibility]="
               persistentClear ||
               (!persistentClear &&
@@ -105,15 +128,20 @@
                 : 'hidden'
             "
             class="cps-select-box-clear-icon">
-            <cps-icon
-              icon="delete"
-              size="small"
-              (click)="clear($event)"></cps-icon>
+            <cps-icon icon="delete" size="small" aria-hidden="true"></cps-icon>
           </span>
         }
         @if (showChevron) {
-          <span class="cps-select-box-chevron">
+          <span
+            class="cps-select-box-chevron"
+            role="button"
+            [attr.aria-label]="isOpened ? 'Collapse options' : 'Expand options'"
+            [tabindex]="disabled ? -1 : 0"
+            (mousedown)="onChevronClick($event)"
+            (keydown.enter)="onChevronClick($event)"
+            (keydown.space)="onChevronClick($event)">
             <cps-icon
+              aria-hidden="true"
               icon="chevron-down"
               size="small"
               [color]="disabled ? 'text-light' : 'text-dark'"></cps-icon>
@@ -125,20 +153,34 @@
     <cps-menu
       #optionsMenu
       [withArrow]="false"
-      (beforeMenuHidden)="onBeforeOptionsHidden()"
+      (beforeMenuHidden)="onBeforeOptionsHidden($event)"
       hideTransitionOptions="0s linear"
       [containerClass]="'cps-select-options-menu ' + optionsClass">
       <div
         #optionsList
+        [id]="optionsListId"
+        role="listbox"
+        tabindex="-1"
+        aria-readonly="false"
+        aria-disabled="false"
+        aria-orientation="vertical"
+        [attr.aria-multiselectable]="!!multiple"
         class="cps-select-options"
-        [ngStyle]="{
-          width: selectBoxWidth + 'px'
-        }">
+        [style.width.rem]="selectBoxWidthRem">
         @if (!virtualScroll) {
           @if (multiple && selectAll && options.length > 1) {
             <div
               class="cps-select-options-option select-all-option"
+              [id]="selectAllOptionId"
+              role="option"
+              tabindex="-1"
+              aria-disabled="false"
+              [attr.aria-setsize]="optionsAriaSetSize"
+              [attr.aria-posinset]="1"
+              [attr.aria-selected]="value?.length === options.length"
               [class.allselected]="value?.length === options.length"
+              [class.highlighten]="optionHighlightedIndex === 0"
+              (mousedown)="$event.preventDefault()"
               (click)="toggleAll()">
               <span class="cps-select-options-option-left">
                 @if (multiple) {
@@ -148,12 +190,13 @@
               </span>
             </div>
           }
-          @for (item of options; track item) {
+          @for (item of options; track item; let itemIdx = $index) {
             <ng-container
               *ngTemplateOutlet="
                 itemTemplate;
                 context: {
-                  item: item
+                  item: item,
+                  itemIdx: itemIdx
                 }
               "></ng-container>
           }
@@ -161,17 +204,19 @@
         @if (virtualScroll) {
           <p-virtualscroller
             #virtualList
+            [tabindex]="-1"
             [items]="options"
             [delay]="0"
-            [scrollHeight]="virtualListHeight + 'px'"
+            [scrollHeight]="virtualListHeightRem + 'rem'"
             [options]="{ numToleratedItems: numToleratedItems }"
-            [itemSize]="virtualScrollItemSize">
-            <ng-template pTemplate="item" let-item>
+            [itemSize]="virtualScrollItemSizePx">
+            <ng-template pTemplate="item" let-item let-options="options">
               <ng-container
                 *ngTemplateOutlet="
                   itemTemplate;
                   context: {
-                    item: item
+                    item: item,
+                    itemIdx: options.index
                   }
                 "></ng-container>
             </ng-template>
@@ -194,14 +239,29 @@
     <div class="cps-select-hint">{{ hint }}</div>
   }
   @if (error && !hideDetails) {
-    <div class="cps-select-error">{{ error }}</div>
+    <div class="cps-select-error" role="alert" aria-live="assertive">
+      {{ error }}
+    </div>
   }
 </div>
 
-<ng-template #itemTemplate let-item="item">
+<ng-template #itemTemplate let-item="item" let-itemIdx="itemIdx">
   <div
     class="cps-select-options-option"
+    [id]="getOptionId(item, itemIdx)"
+    role="option"
+    tabindex="-1"
+    aria-disabled="false"
+    [attr.aria-setsize]="optionsAriaSetSize"
+    [attr.aria-posinset]="getOptionAriaPosInSet(itemIdx)"
+    [attr.aria-selected]="
+      item | checkOptionSelected: value : multiple : returnObject : optionValue
+    "
+    (mousedown)="$event.preventDefault()"
     (click)="onOptionClick(item)"
+    [class.highlighten]="
+      itemIdx === optionHighlightedIndex - (isSelectAllVisible ? 1 : 0)
+    "
     [class.selected]="
       item | checkOptionSelected: value : multiple : returnObject : optionValue
     ">
@@ -222,6 +282,7 @@
       {{ item[optionInfo] }}
       @if (item[optionIcon]) {
         <cps-icon
+          aria-hidden="true"
           [icon]="item[optionIcon]"
           [color]="item[optionIconColor] || 'text-light'"
           class="cps-select-options-option-right-icon">
diff --git a/projects/cps-ui-kit/src/lib/components/cps-select/cps-select.component.scss b/projects/cps-ui-kit/src/lib/components/cps-select/cps-select.component.scss
index d2f607b7..3591ef41 100644
--- a/projects/cps-ui-kit/src/lib/components/cps-select/cps-select.component.scss
+++ b/projects/cps-ui-kit/src/lib/components/cps-select/cps-select.component.scss
@@ -1,3 +1,5 @@
+@use '../../../../styles/mixins' as *;
+
 $color-calm: var(--cps-color-calm);
 $color-error: var(--cps-state-error);
 $error-background: #fef3f2;
@@ -31,10 +33,12 @@ $hover-transition-duration: 0.2s;
 
     .cps-select-container {
       position: relative;
+      outline: none;
+
       .select-progress-bar {
         position: absolute;
-        bottom: 1px;
-        padding: 0 1px;
+        bottom: 0.0625rem;
+        padding: 0 0.0625rem;
       }
 
       &.borderless,
@@ -47,22 +51,33 @@ $hover-transition-duration: 0.2s;
       }
       &.underlined {
         .cps-select-box {
-          border-bottom: 1px solid $select-border-color !important;
+          border-bottom: 0.0625rem solid $select-border-color !important;
         }
       }
-    }
 
-    &.active {
-      .cps-select-box {
-        border: 1px solid $color-calm;
-        .cps-select-box-left {
-          .prefix-icon {
-            color: $color-calm;
+      &.focused {
+        .cps-select-box {
+          border: 0.0625rem solid $color-calm;
+          .cps-select-box-left {
+            .prefix-icon {
+              color: $color-calm;
+            }
           }
         }
-        .cps-select-box-chevron {
-          top: 22px;
-          transform: rotate(180deg);
+      }
+
+      &.active {
+        .cps-select-box {
+          border: 0.0625rem solid $color-calm;
+          .cps-select-box-left {
+            .prefix-icon {
+              color: $color-calm;
+            }
+          }
+          .cps-select-box-chevron {
+            top: 1.375rem;
+            transform: rotate(180deg);
+          }
         }
       }
     }
@@ -75,17 +90,18 @@ $hover-transition-duration: 0.2s;
       font-size: 0.875rem;
       font-weight: 600;
       .cps-select-label-info-circle {
-        margin-left: 8px;
+        margin-left: 0.5rem;
         pointer-events: all;
       }
     }
 
     .persistent-clear,
     .cps-select-container.focused,
+    .cps-select-container.active,
     .cps-select-container:hover {
       .cps-select-box {
         .cps-select-box-icons {
-          .cps-select-box-clear-icon {
+          .cps-select-box-clear-icon:not(:focus):not(:hover) {
             cps-icon {
               opacity: 0.5;
             }
@@ -97,17 +113,17 @@ $hover-transition-duration: 0.2s;
     .cps-select-box {
       overflow: hidden;
       justify-content: space-between;
-      min-height: 38px;
+      min-height: 2.375rem;
       width: 100%;
       cursor: pointer;
       background: white;
       font-size: 1rem;
       outline: none;
-      padding: 0 12px;
-      border-radius: 4px;
+      padding: 0 0.75rem;
+      border-radius: 0.25rem;
       align-items: center;
       display: flex;
-      border: 1px solid $select-border-color;
+      border: 0.0625rem solid $select-border-color;
       transition-duration: $hover-transition-duration;
 
       &-placeholder {
@@ -116,19 +132,19 @@ $hover-transition-duration: 0.2s;
       }
 
       &-items {
-        margin-top: 3px;
-        margin-bottom: 3px;
+        margin-top: 0.1875rem;
+        margin-bottom: 0.1875rem;
         .text-group,
         .single-item {
           color: $select-option-value-color;
-          padding-top: 3px;
-          padding-bottom: 3px;
+          padding-top: 0.1875rem;
+          padding-bottom: 0.1875rem;
         }
         .chips-group {
           cps-chip {
-            padding-bottom: 3px;
-            padding-top: 3px;
-            padding-right: 4px;
+            padding-bottom: 0.1875rem;
+            padding-top: 0.1875rem;
+            padding-right: 0.25rem;
           }
         }
         .text-group-item {
@@ -146,7 +162,7 @@ $hover-transition-duration: 0.2s;
       }
 
       &:hover {
-        border: 1px solid $color-calm;
+        border: 0.0625rem solid $color-calm;
         .cps-select-box-left {
           .prefix-icon {
             color: $color-calm;
@@ -160,19 +176,36 @@ $hover-transition-duration: 0.2s;
         .cps-select-box-clear-icon {
           display: flex;
           color: $color-error;
-          margin-left: 8px;
+          margin-left: 0.5rem;
+          cursor: pointer;
+          &:focus {
+            outline: none;
+          }
+          &:hover,
+          &:focus {
+            cps-icon {
+              opacity: 1;
+            }
+          }
+          &:focus-visible {
+            @include focus-ring(0.125rem, 0.25rem, 50%);
+          }
           cps-icon {
             opacity: 0;
             transition-duration: $hover-transition-duration;
-            &:hover {
-              opacity: 1 !important;
-            }
           }
         }
         .cps-select-box-chevron {
           display: flex;
-          margin-left: 8px;
+          margin-left: 0.5rem;
           transition-duration: $hover-transition-duration;
+          cursor: pointer;
+          &:focus {
+            outline: none;
+          }
+          &:focus-visible {
+            @include focus-ring();
+          }
         }
       }
     }
@@ -223,11 +256,11 @@ $hover-transition-duration: 0.2s;
 .cps-select-options {
   background: white;
   overflow-x: hidden;
-  max-height: 242px;
+  max-height: 15.125rem;
   overflow-y: auto;
 
   .cps-select-options-option {
-    padding: 12px;
+    padding: 0.75rem;
     justify-content: space-between;
     display: flex;
     cursor: pointer;
@@ -243,7 +276,7 @@ $hover-transition-duration: 0.2s;
     &-left {
       display: flex;
       align-items: center;
-      margin-right: 8px;
+      margin-right: 0.5rem;
     }
 
     &-right {
@@ -251,15 +284,15 @@ $hover-transition-duration: 0.2s;
       display: flex;
       align-items: center;
       &-icon {
-        margin-left: 8px;
+        margin-left: 0.5rem;
       }
     }
 
     &-check {
       background-color: transparent;
       border: 0;
-      width: 16px;
-      height: 16px;
+      width: 1rem;
+      height: 1rem;
       cursor: pointer;
       display: inline-block;
       vertical-align: middle;
@@ -269,21 +302,21 @@ $hover-transition-duration: 0.2s;
       transition:
         border-color 90ms cubic-bezier(0, 0, 0.2, 0.1),
         background-color 90ms cubic-bezier(0, 0, 0.2, 0.1);
-      margin-right: 8px;
+      margin-right: 0.5rem;
       opacity: 0;
       &::after {
         color: $color-calm;
-        top: 4px;
-        left: 1px;
-        width: 8px;
-        height: 3px;
-        border-left: 2px solid currentColor;
+        top: 0.25rem;
+        left: 0.0625rem;
+        width: 0.5rem;
+        height: 0.1875rem;
+        border-left: 0.125rem solid currentColor;
         transform: rotate(-45deg);
         opacity: 1;
         box-sizing: content-box;
         position: absolute;
         content: '';
-        border-bottom: 2px solid currentColor;
+        border-bottom: 0.125rem solid currentColor;
         transition: opacity 90ms cubic-bezier(0, 0, 0.2, 0.1);
       }
     }
@@ -309,7 +342,7 @@ $hover-transition-duration: 0.2s;
   }
 
   .select-all-option {
-    border-bottom: 1px solid lightgrey;
+    border-bottom: 0.0625rem solid lightgrey;
     font-weight: 600;
   }
 
diff --git a/projects/cps-ui-kit/src/lib/components/cps-select/cps-select.component.ts b/projects/cps-ui-kit/src/lib/components/cps-select/cps-select.component.ts
index 887762de..cec14e2c 100644
--- a/projects/cps-ui-kit/src/lib/components/cps-select/cps-select.component.ts
+++ b/projects/cps-ui-kit/src/lib/components/cps-select/cps-select.component.ts
@@ -1,20 +1,33 @@
-import { CommonModule } from '@angular/common';
+import { CommonModule, DOCUMENT, isPlatformBrowser } from '@angular/common';
 import {
   AfterViewInit,
   Component,
   ElementRef,
   EventEmitter,
+  Inject,
   Input,
+  OnChanges,
   OnDestroy,
   OnInit,
   Optional,
   Output,
+  PLATFORM_ID,
   Self,
-  ViewChild
+  ViewChild,
+  type SimpleChanges
 } from '@angular/core';
-import { ControlValueAccessor, FormsModule, NgControl } from '@angular/forms';
+import {
+  ControlValueAccessor,
+  FormsModule,
+  NgControl,
+  Validators
+} from '@angular/forms';
 import { Subscription } from 'rxjs';
 import { convertSize } from '../../utils/internal/size-utils';
+import {
+  generateUniqueId,
+  getComputedLabel
+} from '../../utils/internal/accessibility-utils';
 import {
   CpsIconComponent,
   iconSizeType,
@@ -28,7 +41,10 @@ import { CombineLabelsPipe } from '../../pipes/internal/combine-labels.pipe';
 import { CheckOptionSelectedPipe } from '../../pipes/internal/check-option-selected.pipe';
 import { isEqual } from 'lodash-es';
 import { CpsTooltipPosition } from '../../directives/cps-tooltip/cps-tooltip.directive';
-import { CpsMenuComponent } from '../cps-menu/cps-menu.component';
+import {
+  CpsMenuComponent,
+  CpsMenuHideReason
+} from '../cps-menu/cps-menu.component';
 import { Scroller, ScrollerModule } from 'primeng/scroller';
 
 /**
@@ -37,6 +53,10 @@ import { Scroller, ScrollerModule } from 'primeng/scroller';
  */
 export type CpsSelectAppearanceType = 'outlined' | 'underlined' | 'borderless';
 
+const DEFAULT_VIRTUAL_SCROLL_ITEM_SIZE_PX = 44;
+const VIRTUAL_SCROLL_ITEM_SIZE_REM = 2.75;
+const VIRTUAL_SCROLL_MAX_VISIBLE_ITEMS = 5.5;
+
 /**
  * CpsSelectComponent is used to select items from a collection.
  * @group Components
@@ -61,7 +81,7 @@ export type CpsSelectAppearanceType = 'outlined' | 'underlined' | 'borderless';
   styleUrls: ['./cps-select.component.scss']
 })
 export class CpsSelectComponent
-  implements ControlValueAccessor, OnInit, AfterViewInit, OnDestroy
+  implements ControlValueAccessor, OnInit, OnChanges, AfterViewInit, OnDestroy
 {
   /**
    * Label of the select component.
@@ -69,6 +89,12 @@ export class CpsSelectComponent
    */
   @Input() label = '';
 
+  /**
+   * Aria label for the select component, used for accessibility, it takes precedence over label.
+   * @group Props
+   */
+  @Input() ariaLabel = '';
+
   /**
    * Placeholder text for the select component.
    * @group Props
@@ -199,7 +225,7 @@ export class CpsSelectComponent
    * Size of icon before input value.
    * @group Props
    */
-  @Input() prefixIconSize: iconSizeType = '18px';
+  @Input() prefixIconSize: iconSizeType = '1.125rem';
 
   /**
    * When enabled, a loading bar is displayed.
@@ -323,27 +349,51 @@ export class CpsSelectComponent
   error = '';
   cvtWidth = '';
   isOpened = false;
+  isActive = false;
   optionHighlightedIndex = -1;
 
-  virtualListHeight = 242;
-  virtualScrollItemSize = 44;
+  virtualScrollItemSizePx = DEFAULT_VIRTUAL_SCROLL_ITEM_SIZE_PX;
+  virtualListHeightRem =
+    VIRTUAL_SCROLL_ITEM_SIZE_REM * VIRTUAL_SCROLL_MAX_VISIBLE_ITEMS;
 
-  selectBoxWidth = 0;
+  selectBoxWidthRem = 0;
   resizeObserver: ResizeObserver;
 
-  constructor(@Self() @Optional() private _control: NgControl) {
+  private _rootFontSizePx = 16;
+
+  readonly optionsListId = generateUniqueId('cps-select-options-list');
+  readonly selectAllOptionId = generateUniqueId('cps-select-option-select-all');
+  private readonly _optionIdPrefix = generateUniqueId('cps-select-option');
+  private _optionIds = new WeakMap<object, string>();
+
+  constructor(
+    @Self() @Optional() private _control: NgControl,
+    @Inject(DOCUMENT) private document: Document,
+    @Inject(PLATFORM_ID) private platformId: object
+  ) {
     if (this._control) {
       this._control.valueAccessor = this;
     }
     this.resizeObserver = new ResizeObserver((entries) => {
       entries.forEach((entry) => {
         if (entry?.target)
-          this.selectBoxWidth = (entry.target as any).offsetWidth;
+          this.selectBoxWidthRem = this._pxToRem(
+            (entry.target as any).offsetWidth
+          );
       });
     });
   }
 
   ngOnInit() {
+    if (isPlatformBrowser(this.platformId)) {
+      this._rootFontSizePx = parseFloat(
+        getComputedStyle(this.document.documentElement).fontSize || '16'
+      );
+    }
+    this.virtualScrollItemSizePx =
+      this._rootFontSizePx * VIRTUAL_SCROLL_ITEM_SIZE_REM;
+    this.virtualListHeightRem =
+      VIRTUAL_SCROLL_ITEM_SIZE_REM * VIRTUAL_SCROLL_MAX_VISIBLE_ITEMS;
     this.cvtWidth = convertSize(this.width);
     if (this.multiple && !this._value) {
       this._value = [];
@@ -355,7 +405,26 @@ export class CpsSelectComponent
       }
     );
 
-    this._recalcVirtualListHeight();
+    this.recalcVirtualListHeight();
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes.options) {
+      this._optionIds = new WeakMap<object, string>();
+      this.options.forEach((opt, index) => {
+        if (opt && typeof opt === 'object') {
+          this._optionIds.set(opt, this._buildOptionId(index));
+        }
+      });
+      this.recalcVirtualListHeight();
+    }
+    if (changes.label || changes.ariaLabel) {
+      if (!this.label?.trim() && !this.ariaLabel?.trim()) {
+        console.error(
+          'CpsSelectComponent: unlabeled select component must have an ariaLabel for accessibility.'
+        );
+      }
+    }
   }
 
   ngAfterViewInit(): void {
@@ -410,13 +479,12 @@ export class CpsSelectComponent
     });
   }
 
-  private _recalcVirtualListHeight() {
+  recalcVirtualListHeight() {
     if (!this.virtualScroll) return;
     const currentLen = this.options?.length || 0;
-    this.virtualListHeight = Math.min(
-      this.virtualScrollItemSize * currentLen,
-      242
-    );
+    this.virtualListHeightRem =
+      VIRTUAL_SCROLL_ITEM_SIZE_REM *
+      Math.min(currentLen, VIRTUAL_SCROLL_MAX_VISIBLE_ITEMS);
   }
 
   select(option: any, byValue: boolean): void {
@@ -533,29 +601,50 @@ export class CpsSelectComponent
     }
   }
 
-  onBeforeOptionsHidden() {
+  onBeforeOptionsHidden(reason: CpsMenuHideReason): void {
+    if ([CpsMenuHideReason.SCROLL, CpsMenuHideReason.RESIZE].includes(reason)) {
+      this._toggleOptions(false);
+      return;
+    }
     this._toggleOptions(false);
     this._dehighlightOption();
   }
 
   onBoxClick() {
-    this._toggleOptions();
+    if (!this.isOpened) {
+      this.selectContainer?.nativeElement?.focus();
+      this._toggleOptions(true);
+    }
     this._dehighlightOption();
   }
 
-  onKeyDown(event: any) {
+  onChevronClick(event: any) {
+    event.stopPropagation();
     event.preventDefault();
-    const code = event.keyCode;
-    // escape
-    if (code === 27) {
+    if (this.isOpened) {
       this._toggleOptions(false);
-      this._dehighlightOption();
+    } else {
+      this.selectContainer?.nativeElement?.focus();
+      this._toggleOptions(true);
     }
-    // enter
-    else if (code === 13) {
+    this._dehighlightOption();
+  }
+
+  onContainerKeyDown(event: any) {
+    const code = event.keyCode;
+    // enter or space
+    if (code === 13 || code === 32) {
+      event.preventDefault();
+      if (!this.isOpened) {
+        this._toggleOptions(true);
+        return;
+      }
       let idx = this.optionHighlightedIndex;
-      if (idx < 0) return;
-      if (this.multiple && this.selectAll && !this.virtualScroll) {
+      if (idx < 0) {
+        this._toggleOptions(false);
+        return;
+      }
+      if (this.isSelectAllVisible) {
         if (idx === 0) {
           this.toggleAll();
           return;
@@ -566,8 +655,16 @@ export class CpsSelectComponent
     }
     // vertical arrows
     else if ([38, 40].includes(code)) {
-      // Arrows navigation doesn't work with virtual scroll
-      if (!this.virtualScroll) this._navigateOptionsByArrows(code === 38);
+      event.preventDefault();
+      if (!this.isOpened) {
+        this._toggleOptions(true);
+        return;
+      }
+      if (this.virtualScroll) {
+        this._navigateVirtualOptionsByArrows(code === 38);
+      } else {
+        this._navigateOptionsByArrows(code === 38);
+      }
     }
   }
 
@@ -634,10 +731,11 @@ export class CpsSelectComponent
   clear(event?: any): void {
     event?.stopPropagation();
 
-    if (
+    const hadValue =
       (!this.multiple && !this.isEmptyValue()) ||
-      (this.multiple && this.value?.length > 0)
-    ) {
+      (this.multiple && this.value?.length > 0);
+
+    if (hadValue) {
       if (this.openOnClear) {
         this._toggleOptions(true);
       }
@@ -645,17 +743,30 @@ export class CpsSelectComponent
       this.updateValue(val);
     }
     this._dehighlightOption();
+    if (hadValue) {
+      setTimeout(() => {
+        this.selectContainer?.nativeElement?.focus();
+      }, 0);
+    }
   }
 
   // eslint-disable-next-line @typescript-eslint/no-empty-function
   setDisabledState(_disabled: boolean) {}
 
   onBlur() {
+    this.isActive = false;
+    if (this.isOpened) {
+      this._toggleOptions(false);
+      this._dehighlightOption();
+    }
     this._checkErrors();
     this.blurred.emit();
   }
 
   onFocus() {
+    if (!this.disabled) {
+      this.isActive = true;
+    }
     this._control?.control?.markAsTouched();
     this.focused.emit();
   }
@@ -665,6 +776,66 @@ export class CpsSelectComponent
     this._toggleOptions(true);
   }
 
+  get isRequired(): boolean {
+    return this._control?.control?.hasValidator(Validators.required) ?? false;
+  }
+
+  get computedLabel(): string | null {
+    return getComputedLabel({
+      label: this.ariaLabel || this.label,
+      error: this.error,
+      hideDetails: this.hideDetails
+    });
+  }
+
+  get isSelectAllVisible(): boolean {
+    return (
+      !this.virtualScroll &&
+      this.multiple &&
+      this.selectAll &&
+      this.options.length > 1
+    );
+  }
+
+  get optionsAriaSetSize(): number {
+    return this.options.length + (this.isSelectAllVisible ? 1 : 0);
+  }
+
+  get activeDescendantId(): string | null {
+    if (!this.isOpened || this.optionHighlightedIndex < 0) {
+      return null;
+    }
+    return this._getHighlightedOptionId();
+  }
+
+  getOptionAriaPosInSet(itemIndex: number): number {
+    return itemIndex + 1 + (this.isSelectAllVisible ? 1 : 0);
+  }
+
+  getOptionId(option: any, index: number): string {
+    if (option && typeof option === 'object') {
+      return this._optionIds.get(option) || this._buildOptionId(index);
+    }
+    return this._buildOptionId(index);
+  }
+
+  private _buildOptionId(index: number): string {
+    return `${this._optionIdPrefix}-${index}`;
+  }
+
+  private _getHighlightedOptionId(): string | null {
+    if (this.isSelectAllVisible && this.optionHighlightedIndex === 0) {
+      return this.selectAllOptionId;
+    }
+    const optionIndex =
+      this.optionHighlightedIndex - (this.isSelectAllVisible ? 1 : 0);
+    const activeOption = this.options[optionIndex];
+    if (!activeOption) {
+      return null;
+    }
+    return this.getOptionId(activeOption, optionIndex);
+  }
+
   isEmptyValue(): boolean {
     return (
       this.value === null ||
@@ -673,4 +844,60 @@ export class CpsSelectComponent
       Number.isNaN(this.value)
     );
   }
+
+  private _navigateVirtualOptionsByArrows(up: boolean) {
+    if (!this.isOpened) return;
+
+    const len = this.options.length;
+    if (len < 1) return;
+
+    this.optionHighlightedIndex = this._nextHighlightIndex(up, len);
+    this._scrollVirtualListToIndex(this.optionHighlightedIndex);
+  }
+
+  private _nextHighlightIndex(up: boolean, len: number): number {
+    if (up) {
+      return this.optionHighlightedIndex < 1
+        ? len - 1
+        : this.optionHighlightedIndex - 1;
+    }
+    return [-1, len - 1].includes(this.optionHighlightedIndex)
+      ? 0
+      : this.optionHighlightedIndex + 1;
+  }
+
+  private _scrollVirtualListToIndex(index: number) {
+    const scrollerEl = this.optionsList?.nativeElement?.querySelector(
+      '.p-virtualscroller'
+    ) as HTMLElement | null;
+    if (!scrollerEl) {
+      this.virtualList?.scrollToIndex(index);
+      return;
+    }
+
+    const itemTop = index * this.virtualScrollItemSizePx;
+    const itemBottom = itemTop + this.virtualScrollItemSizePx;
+
+    const viewportTop = scrollerEl.scrollTop;
+    const viewportBottom = viewportTop + scrollerEl.clientHeight;
+
+    let nextTop = viewportTop;
+    if (itemTop < viewportTop) {
+      nextTop = itemTop;
+    } else if (itemBottom > viewportBottom) {
+      nextTop = itemBottom - scrollerEl.clientHeight;
+    }
+
+    if (nextTop === viewportTop) return;
+
+    const maxTop = Math.max(
+      0,
+      scrollerEl.scrollHeight - scrollerEl.clientHeight
+    );
+    scrollerEl.scrollTop = Math.min(Math.max(0, nextTop), maxTop);
+  }
+
+  private _pxToRem(px: number): number {
+    return px / this._rootFontSizePx;
+  }
 }

From 443d12cd3adf8ed39dddf911dc3fbca6655cf163 Mon Sep 17 00:00:00 2001
From: fateeand <andrei.fateev@absa.africa>
Date: Mon, 18 May 2026 10:24:45 +0200
Subject: [PATCH 02/15] add ut

---
 .../cps-autocomplete.component.spec.ts        |   8 +-
 .../cps-select/cps-select.component.spec.ts   | 561 ++++++++++++++++++
 2 files changed, 565 insertions(+), 4 deletions(-)
 create mode 100644 projects/cps-ui-kit/src/lib/components/cps-select/cps-select.component.spec.ts

diff --git a/projects/cps-ui-kit/src/lib/components/cps-autocomplete/cps-autocomplete.component.spec.ts b/projects/cps-ui-kit/src/lib/components/cps-autocomplete/cps-autocomplete.component.spec.ts
index 5aa23e3c..cf8b8ef3 100644
--- a/projects/cps-ui-kit/src/lib/components/cps-autocomplete/cps-autocomplete.component.spec.ts
+++ b/projects/cps-ui-kit/src/lib/components/cps-autocomplete/cps-autocomplete.component.spec.ts
@@ -173,24 +173,24 @@ describe('CpsAutocompleteComponent', () => {
 
   it('should allow options menu to close with ESCAPE key when validating', () => {
     fixture.componentRef.setInput('validating', true);
-    const onBlurStub = jest.spyOn(component, 'onBlur');
+    jest.spyOn(component, 'clearInput');
     fixture.detectChanges();
     const result = component.onBeforeOptionsHidden(
       CpsMenuHideReason.KEYDOWN_ESCAPE
     );
     expect(result).toBe(undefined);
-    expect(onBlurStub).toHaveBeenCalledTimes(1);
+    expect(component.clearInput).toHaveBeenCalled();
   });
 
   it('should allow options menu to close with TAB key when validating', () => {
     fixture.componentRef.setInput('validating', true);
-    const onBlurStub = jest.spyOn(component, 'onBlur');
+    jest.spyOn(component, 'clearInput');
     fixture.detectChanges();
     const result = component.onBeforeOptionsHidden(
       CpsMenuHideReason.KEYDOWN_TAB
     );
     expect(result).toBe(undefined);
-    expect(onBlurStub).toHaveBeenCalledTimes(1);
+    expect(component.clearInput).toHaveBeenCalled();
   });
 
   it('should display loading indicator when validating', () => {
diff --git a/projects/cps-ui-kit/src/lib/components/cps-select/cps-select.component.spec.ts b/projects/cps-ui-kit/src/lib/components/cps-select/cps-select.component.spec.ts
new file mode 100644
index 00000000..b1955a7f
--- /dev/null
+++ b/projects/cps-ui-kit/src/lib/components/cps-select/cps-select.component.spec.ts
@@ -0,0 +1,561 @@
+import { NO_ERRORS_SCHEMA } from '@angular/core';
+import {
+  ComponentFixture,
+  TestBed,
+  fakeAsync,
+  tick
+} from '@angular/core/testing';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { By } from '@angular/platform-browser';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { CheckOptionSelectedPipe } from '../../pipes/internal/check-option-selected.pipe';
+import { CombineLabelsPipe } from '../../pipes/internal/combine-labels.pipe';
+import { LabelByValuePipe } from '../../pipes/internal/label-by-value.pipe';
+import { CpsMenuHideReason } from '../cps-menu/cps-menu.component';
+import { CpsSelectComponent } from './cps-select.component';
+
+const OPTIONS = [
+  { label: 'Option 1', value: 'opt1' },
+  { label: 'Option 2', value: 'opt2' },
+  { label: 'Option 3', value: 'opt3' }
+];
+
+describe('CpsSelectComponent', () => {
+  let component: CpsSelectComponent;
+  let fixture: ComponentFixture<CpsSelectComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [
+        FormsModule,
+        ReactiveFormsModule,
+        CpsSelectComponent,
+        NoopAnimationsModule
+      ],
+      providers: [LabelByValuePipe, CombineLabelsPipe, CheckOptionSelectedPipe],
+      schemas: [NO_ERRORS_SCHEMA]
+    }).compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(CpsSelectComponent);
+    component = fixture.componentInstance;
+    fixture.componentRef.setInput('ariaLabel', 'Test select');
+    fixture.componentRef.setInput('options', OPTIONS);
+    fixture.detectChanges();
+  });
+
+  it('should create the component', () => {
+    expect(component).toBeTruthy();
+  });
+
+  describe('Display', () => {
+    it('should display the label when provided', () => {
+      fixture.componentRef.setInput('label', 'Test Label');
+      fixture.detectChanges();
+      const label = fixture.debugElement.query(
+        By.css('.cps-select-label label')
+      );
+      expect(label.nativeElement.textContent).toBe('Test Label');
+    });
+
+    it('should not render the label element when label is empty', () => {
+      fixture.componentRef.setInput('label', '');
+      fixture.detectChanges();
+      const label = fixture.debugElement.query(By.css('.cps-select-label'));
+      expect(label).toBeNull();
+    });
+
+    it('should display placeholder when no value is selected', () => {
+      fixture.componentRef.setInput('placeholder', 'Pick one');
+      component.writeValue(undefined);
+      fixture.detectChanges();
+      const placeholder = fixture.debugElement.query(
+        By.css('.cps-select-box-placeholder')
+      );
+      expect(placeholder.nativeElement.textContent.trim()).toBe('Pick one');
+    });
+
+    it('should display single selected option label', () => {
+      component.writeValue(OPTIONS[1]);
+      fixture.detectChanges();
+      const singleItem = fixture.debugElement.query(By.css('.single-item'));
+      expect(singleItem.nativeElement.textContent.trim()).toBe('Option 2');
+    });
+
+    it('should display multiple selected options as chips', () => {
+      fixture.componentRef.setInput('multiple', true);
+      fixture.componentRef.setInput('chips', true);
+      component.writeValue([OPTIONS[0], OPTIONS[2]]);
+      fixture.changeDetectorRef.markForCheck();
+      fixture.detectChanges();
+      const chips = fixture.debugElement.queryAll(By.css('cps-chip'));
+      expect(chips.length).toBe(2);
+    });
+
+    it('should display hint when provided', () => {
+      fixture.componentRef.setInput('hint', 'Hint text');
+      fixture.detectChanges();
+      const hint = fixture.debugElement.query(By.css('.cps-select-hint'));
+      expect(hint.nativeElement.textContent.trim()).toBe('Hint text');
+    });
+
+    it('should display info tooltip icon when infoTooltip is provided', () => {
+      fixture.componentRef.setInput('label', 'My Label');
+      fixture.componentRef.setInput('infoTooltip', 'More info');
+      fixture.detectChanges();
+      const info = fixture.debugElement.query(
+        By.css('.cps-select-label-info-circle')
+      );
+      expect(info).toBeTruthy();
+    });
+
+    it('should apply underlined appearance class', () => {
+      fixture.componentRef.setInput('appearance', 'underlined');
+      fixture.detectChanges();
+      const container = fixture.debugElement.query(
+        By.css('.cps-select-container.underlined')
+      );
+      expect(container).toBeTruthy();
+    });
+
+    it('should apply borderless appearance class', () => {
+      fixture.componentRef.setInput('appearance', 'borderless');
+      fixture.detectChanges();
+      const container = fixture.debugElement.query(
+        By.css('.cps-select-container.borderless')
+      );
+      expect(container).toBeTruthy();
+    });
+
+    it('should apply disabled class when disabled', () => {
+      fixture.componentRef.setInput('disabled', true);
+      fixture.detectChanges();
+      const wrapper = fixture.debugElement.query(
+        By.css('.cps-select.disabled')
+      );
+      expect(wrapper).toBeTruthy();
+    });
+  });
+
+  describe('Value Handling', () => {
+    it('should write value via writeValue', () => {
+      component.writeValue(OPTIONS[0]);
+      expect(component.value).toEqual(OPTIONS[0]);
+    });
+
+    it('should initialise multiple value as empty array', () => {
+      fixture.componentRef.setInput('multiple', true);
+      component.ngOnInit();
+      expect(Array.isArray(component.value)).toBe(true);
+    });
+
+    it('should emit valueChanged when value is updated', () => {
+      jest.spyOn(component.valueChanged, 'emit');
+      component.select(OPTIONS[0], false);
+      expect(component.valueChanged.emit).toHaveBeenCalledWith(OPTIONS[0]);
+    });
+
+    it('should call onChange when value is updated', () => {
+      const onChange = jest.fn();
+      component.registerOnChange(onChange);
+      component.select(OPTIONS[1], false);
+      expect(onChange).toHaveBeenCalledWith(OPTIONS[1]);
+    });
+
+    it('should add item to multiple value on select', () => {
+      fixture.componentRef.setInput('multiple', true);
+      component.writeValue([]);
+      component.select(OPTIONS[0], false);
+      expect(component.value).toContainEqual(OPTIONS[0]);
+    });
+
+    it('should remove item from multiple value on re-select', () => {
+      fixture.componentRef.setInput('multiple', true);
+      component.writeValue([OPTIONS[0], OPTIONS[1]]);
+      component.select(OPTIONS[0], false);
+      expect(component.value).not.toContainEqual(OPTIONS[0]);
+      expect(component.value).toContainEqual(OPTIONS[1]);
+    });
+
+    it('isEmptyValue should return true for undefined', () => {
+      component.writeValue(undefined);
+      expect(component.isEmptyValue()).toBe(true);
+    });
+
+    it('isEmptyValue should return true for null', () => {
+      component.writeValue(null);
+      expect(component.isEmptyValue()).toBe(true);
+    });
+
+    it('isEmptyValue should return false for a valid object', () => {
+      component.writeValue(OPTIONS[0]);
+      expect(component.isEmptyValue()).toBe(false);
+    });
+  });
+
+  describe('ControlValueAccessor', () => {
+    it('should register onChange callback', () => {
+      const fn = jest.fn();
+      component.registerOnChange(fn);
+      component.writeValue(OPTIONS[0]);
+      expect(fn).toHaveBeenCalledWith(OPTIONS[0]);
+    });
+
+    it('should register onTouched callback', () => {
+      const fn = jest.fn();
+      component.registerOnTouched(fn);
+      expect(component.onTouched).toBe(fn);
+    });
+  });
+
+  describe('Dropdown Open / Close', () => {
+    it('should open dropdown on box click', () => {
+      const box = fixture.debugElement.query(By.css('.cps-select-box'));
+      box.nativeElement.dispatchEvent(new Event('mousedown'));
+      fixture.detectChanges();
+      expect(component.isOpened).toBe(true);
+    });
+
+    it('should not open dropdown when disabled', () => {
+      fixture.componentRef.setInput('disabled', true);
+      fixture.detectChanges();
+      const box = fixture.debugElement.query(By.css('.cps-select-box'));
+      box.nativeElement.dispatchEvent(new Event('mousedown'));
+      fixture.detectChanges();
+      expect(component.isOpened).toBe(false);
+    });
+
+    it('should close dropdown on second box click when already open', () => {
+      component.onBoxClick();
+      expect(component.isOpened).toBe(true);
+      component.onBoxClick();
+      expect(component.isOpened).toBe(true);
+    });
+
+    it('should toggle dropdown via chevron click', () => {
+      const event = new MouseEvent('mousedown');
+      jest.spyOn(event, 'stopPropagation');
+      jest.spyOn(event, 'preventDefault');
+
+      component.onChevronClick(event);
+      expect(component.isOpened).toBe(true);
+
+      component.onChevronClick(event);
+      expect(component.isOpened).toBe(false);
+    });
+
+    it('should close dropdown on blur', () => {
+      component.onBoxClick();
+      expect(component.isOpened).toBe(true);
+
+      component.onBlur();
+      expect(component.isOpened).toBe(false);
+    });
+
+    it('should set isActive true on focus', () => {
+      component.onFocus();
+      expect(component.isActive).toBe(true);
+    });
+
+    it('should set isActive false on blur', () => {
+      component.onFocus();
+      component.onBlur();
+      expect(component.isActive).toBe(false);
+    });
+
+    it('should not set isActive when disabled', () => {
+      fixture.componentRef.setInput('disabled', true);
+      fixture.detectChanges();
+      component.onFocus();
+      expect(component.isActive).toBe(false);
+    });
+
+    it('should emit focused on focus', () => {
+      jest.spyOn(component.focused, 'emit');
+      component.onFocus();
+      expect(component.focused.emit).toHaveBeenCalled();
+    });
+
+    it('should emit blurred on blur', () => {
+      jest.spyOn(component.blurred, 'emit');
+      component.onBlur();
+      expect(component.blurred.emit).toHaveBeenCalled();
+    });
+  });
+
+  describe('Keyboard Navigation', () => {
+    function keydown(code: number): KeyboardEvent {
+      const event = new KeyboardEvent('keydown', {
+        keyCode: code,
+        bubbles: true
+      } as any);
+      jest.spyOn(event, 'preventDefault');
+      return event;
+    }
+
+    it('should open dropdown on Enter when closed', () => {
+      const event = keydown(13);
+      component.onContainerKeyDown(event);
+      expect(component.isOpened).toBe(true);
+    });
+
+    it('should close dropdown on Enter when open with no highlighted option', () => {
+      component.onBoxClick();
+      expect(component.isOpened).toBe(true);
+      const event = keydown(13);
+      component.onContainerKeyDown(event);
+      expect(component.isOpened).toBe(false);
+    });
+
+    it('should open dropdown on Space when closed', () => {
+      const event = keydown(32);
+      component.onContainerKeyDown(event);
+      expect(component.isOpened).toBe(true);
+    });
+
+    it('should open dropdown on ArrowDown when closed', () => {
+      const event = keydown(40);
+      component.onContainerKeyDown(event);
+      expect(component.isOpened).toBe(true);
+    });
+
+    it('should open dropdown on ArrowUp when closed', () => {
+      const event = keydown(38);
+      component.onContainerKeyDown(event);
+      expect(component.isOpened).toBe(true);
+    });
+
+    it('should prevent default on Enter/Space', () => {
+      const event = keydown(13);
+      component.onContainerKeyDown(event);
+      expect(event.preventDefault).toHaveBeenCalled();
+    });
+
+    it('should not open dropdown on unrelated key', () => {
+      const event = keydown(9); // Tab
+      component.onContainerKeyDown(event);
+      expect(component.isOpened).toBe(false);
+    });
+  });
+
+  describe('Clear', () => {
+    beforeEach(() => {
+      fixture.componentRef.setInput('clearable', true);
+      fixture.detectChanges();
+    });
+
+    it('should clear single value when clear is called with a value', fakeAsync(() => {
+      component.writeValue(OPTIONS[0]);
+      fixture.componentRef.setInput('openOnClear', false);
+      component.clear();
+      tick();
+      expect(component.isEmptyValue()).toBe(true);
+    }));
+
+    it('should clear multiple value when clear is called', fakeAsync(() => {
+      fixture.componentRef.setInput('multiple', true);
+      component.writeValue([OPTIONS[0], OPTIONS[1]]);
+      fixture.componentRef.setInput('openOnClear', false);
+      component.clear();
+      tick();
+      expect(component.value).toEqual([]);
+    }));
+
+    it('should emit valueChanged on clear', () => {
+      jest.spyOn(component.valueChanged, 'emit');
+      component.writeValue(OPTIONS[0]);
+      fixture.componentRef.setInput('openOnClear', false);
+      component.clear();
+      expect(component.valueChanged.emit).toHaveBeenCalled();
+    });
+
+    it('should not clear or refocus when value is already empty', fakeAsync(() => {
+      jest.spyOn(component.valueChanged, 'emit');
+      component.writeValue(undefined);
+      component.clear();
+      tick();
+      expect(component.valueChanged.emit).not.toHaveBeenCalled();
+    }));
+
+    it('should open dropdown on clear when openOnClear is true', fakeAsync(() => {
+      component.writeValue(OPTIONS[0]);
+      fixture.componentRef.setInput('openOnClear', true);
+      component.clear();
+      tick();
+      expect(component.isOpened).toBe(true);
+    }));
+
+    it('should show clear icon when value is set', () => {
+      component.writeValue(OPTIONS[0]);
+      fixture.detectChanges();
+      const clearIcon = fixture.debugElement.query(
+        By.css('.cps-select-box-clear-icon')
+      );
+      expect(clearIcon.nativeElement.style.visibility).toBe('visible');
+    });
+
+    it('should hide clear icon when no value', () => {
+      component.writeValue(undefined);
+      fixture.detectChanges();
+      const clearIcon = fixture.debugElement.query(
+        By.css('.cps-select-box-clear-icon')
+      );
+      expect(clearIcon.nativeElement.style.visibility).toBe('hidden');
+    });
+  });
+
+  describe('Select All', () => {
+    beforeEach(() => {
+      fixture.componentRef.setInput('multiple', true);
+      fixture.componentRef.setInput('selectAll', true);
+      component.writeValue([]);
+      fixture.changeDetectorRef.markForCheck();
+      fixture.detectChanges();
+    });
+
+    it('should select all options when toggleAll is called with empty value', () => {
+      component.toggleAll();
+      expect(component.value.length).toBe(OPTIONS.length);
+    });
+
+    it('should deselect all options when toggleAll is called with all selected', () => {
+      component.writeValue([...OPTIONS]);
+      component.toggleAll();
+      expect(component.value.length).toBe(0);
+    });
+
+    it('isSelectAllVisible should be true for multiple with selectAll and >1 options', () => {
+      expect(component.isSelectAllVisible).toBe(true);
+    });
+
+    it('isSelectAllVisible should be false for single mode', () => {
+      fixture.componentRef.setInput('multiple', false);
+      fixture.detectChanges();
+      expect(component.isSelectAllVisible).toBe(false);
+    });
+
+    it('isSelectAllVisible should be false when virtualScroll is enabled', () => {
+      fixture.componentRef.setInput('virtualScroll', true);
+      fixture.detectChanges();
+      expect(component.isSelectAllVisible).toBe(false);
+    });
+  });
+
+  describe('onBeforeOptionsHidden', () => {
+    it('should close dropdown on SCROLL', () => {
+      component.onBoxClick();
+      component.onBeforeOptionsHidden(CpsMenuHideReason.SCROLL);
+      expect(component.isOpened).toBe(false);
+    });
+
+    it('should close dropdown on RESIZE', () => {
+      component.onBoxClick();
+      component.onBeforeOptionsHidden(CpsMenuHideReason.RESIZE);
+      expect(component.isOpened).toBe(false);
+    });
+
+    it('should close dropdown on CLICK_OUTSIDE', () => {
+      component.onBoxClick();
+      component.onBeforeOptionsHidden(CpsMenuHideReason.CLICK_OUTSIDE);
+      expect(component.isOpened).toBe(false);
+    });
+
+    it('should reset highlighted index on CLICK_OUTSIDE', () => {
+      component.onBoxClick();
+      component.optionHighlightedIndex = 1;
+      component.onBeforeOptionsHidden(CpsMenuHideReason.CLICK_OUTSIDE);
+      expect(component.optionHighlightedIndex).toBe(-1);
+    });
+  });
+
+  describe('Accessibility', () => {
+    it('should set aria-label from ariaLabel input', () => {
+      fixture.componentRef.setInput('ariaLabel', 'My Select');
+      fixture.detectChanges();
+      const container = fixture.debugElement.query(
+        By.css('.cps-select-container')
+      );
+      expect(container.nativeElement.getAttribute('aria-label')).toContain(
+        'My Select'
+      );
+    });
+
+    it('should set aria-label from label when ariaLabel is not provided', () => {
+      fixture.componentRef.setInput('ariaLabel', '');
+      fixture.componentRef.setInput('label', 'Country');
+      fixture.detectChanges();
+      const container = fixture.debugElement.query(
+        By.css('.cps-select-container')
+      );
+      expect(container.nativeElement.getAttribute('aria-label')).toContain(
+        'Country'
+      );
+    });
+
+    it('should prefer ariaLabel over label', () => {
+      fixture.componentRef.setInput('label', 'Label');
+      fixture.componentRef.setInput('ariaLabel', 'Override');
+      fixture.detectChanges();
+      const container = fixture.debugElement.query(
+        By.css('.cps-select-container')
+      );
+      expect(container.nativeElement.getAttribute('aria-label')).toContain(
+        'Override'
+      );
+    });
+
+    it('should log error when neither label nor ariaLabel is provided', () => {
+      jest.spyOn(console, 'error').mockImplementation(() => {});
+      fixture.componentRef.setInput('label', '');
+      fixture.componentRef.setInput('ariaLabel', '');
+      fixture.detectChanges();
+      expect(console.error).toHaveBeenCalledWith(
+        expect.stringContaining('ariaLabel')
+      );
+    });
+
+    it('should set aria-expanded to false when closed', () => {
+      const container = fixture.debugElement.query(
+        By.css('.cps-select-container')
+      );
+      expect(container.nativeElement.getAttribute('aria-expanded')).toBe(
+        'false'
+      );
+    });
+
+    it('should set aria-expanded to true when open', () => {
+      component.onBoxClick();
+      fixture.detectChanges();
+      const container = fixture.debugElement.query(
+        By.css('.cps-select-container')
+      );
+      expect(container.nativeElement.getAttribute('aria-expanded')).toBe(
+        'true'
+      );
+    });
+
+    it('should set aria-disabled when disabled', () => {
+      fixture.componentRef.setInput('disabled', true);
+      fixture.detectChanges();
+      const container = fixture.debugElement.query(
+        By.css('.cps-select-container')
+      );
+      expect(container.nativeElement.getAttribute('aria-disabled')).toBe(
+        'true'
+      );
+    });
+
+    it('clear button should have role="button" and aria-label', () => {
+      fixture.componentRef.setInput('clearable', true);
+      fixture.detectChanges();
+      const clearBtn = fixture.debugElement.query(
+        By.css('.cps-select-box-clear-icon')
+      );
+      expect(clearBtn.nativeElement.getAttribute('role')).toBe('button');
+      expect(clearBtn.nativeElement.getAttribute('aria-label')).toBe(
+        'Clear selection'
+      );
+    });
+  });
+});

From f58e6ad8a4580f73419c22e079eb671889dfb861 Mon Sep 17 00:00:00 2001
From: fateeand <andrei.fateev@absa.africa>
Date: Mon, 18 May 2026 10:34:45 +0200
Subject: [PATCH 03/15] gen api

---
 projects/composition/src/app/api-data/cps-select.json | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/projects/composition/src/app/api-data/cps-select.json b/projects/composition/src/app/api-data/cps-select.json
index 76456135..23213c99 100644
--- a/projects/composition/src/app/api-data/cps-select.json
+++ b/projects/composition/src/app/api-data/cps-select.json
@@ -13,6 +13,14 @@
                         "default": "",
                         "description": "Label of the select component."
                     },
+                    {
+                        "name": "ariaLabel",
+                        "optional": false,
+                        "readonly": false,
+                        "type": "string",
+                        "default": "",
+                        "description": "Aria label for the select component, used for accessibility, it takes precedence over label."
+                    },
                     {
                         "name": "placeholder",
                         "optional": false,
@@ -186,7 +194,7 @@
                         "optional": false,
                         "readonly": false,
                         "type": "iconSizeType",
-                        "default": "18px",
+                        "default": "1.125rem",
                         "description": "Size of icon before input value."
                     },
                     {

From 783b886d8b59babb5d0e8626acad4c5287130c38 Mon Sep 17 00:00:00 2001
From: fateeand <andrei.fateev@absa.africa>
Date: Mon, 18 May 2026 10:40:18 +0200
Subject: [PATCH 04/15] update width in onchanges

---
 .../components/cps-autocomplete/cps-autocomplete.component.ts  | 3 +++
 .../src/lib/components/cps-select/cps-select.component.ts      | 3 +++
 2 files changed, 6 insertions(+)

diff --git a/projects/cps-ui-kit/src/lib/components/cps-autocomplete/cps-autocomplete.component.ts b/projects/cps-ui-kit/src/lib/components/cps-autocomplete/cps-autocomplete.component.ts
index 19c0071e..30d02e27 100644
--- a/projects/cps-ui-kit/src/lib/components/cps-autocomplete/cps-autocomplete.component.ts
+++ b/projects/cps-ui-kit/src/lib/components/cps-autocomplete/cps-autocomplete.component.ts
@@ -512,6 +512,9 @@ export class CpsAutocompleteComponent
   }
 
   ngOnChanges(changes: SimpleChanges): void {
+    if (changes.width) {
+      this.cvtWidth = convertSize(this.width);
+    }
     if (changes.options) {
       this.filteredOptions = this.options;
       this.recalcVirtualListHeight();
diff --git a/projects/cps-ui-kit/src/lib/components/cps-select/cps-select.component.ts b/projects/cps-ui-kit/src/lib/components/cps-select/cps-select.component.ts
index cec14e2c..3ff55812 100644
--- a/projects/cps-ui-kit/src/lib/components/cps-select/cps-select.component.ts
+++ b/projects/cps-ui-kit/src/lib/components/cps-select/cps-select.component.ts
@@ -409,6 +409,9 @@ export class CpsSelectComponent
   }
 
   ngOnChanges(changes: SimpleChanges): void {
+    if (changes.width) {
+      this.cvtWidth = convertSize(this.width);
+    }
     if (changes.options) {
       this._optionIds = new WeakMap<object, string>();
       this.options.forEach((opt, index) => {

From 2b7b5295de2fd10d32345a5e1eb4cc55c8801be5 Mon Sep 17 00:00:00 2001
From: fateeand <andrei.fateev@absa.africa>
Date: Mon, 18 May 2026 13:33:09 +0200
Subject: [PATCH 05/15] fix a11y violations

---
 .../cps-chip/cps-chip.component.scss          | 14 ++++++++---
 .../cps-select/cps-select.component.scss      | 25 +++++++++++++------
 2 files changed, 28 insertions(+), 11 deletions(-)

diff --git a/projects/cps-ui-kit/src/lib/components/cps-chip/cps-chip.component.scss b/projects/cps-ui-kit/src/lib/components/cps-chip/cps-chip.component.scss
index 3a427faf..58ed12cb 100644
--- a/projects/cps-ui-kit/src/lib/components/cps-chip/cps-chip.component.scss
+++ b/projects/cps-ui-kit/src/lib/components/cps-chip/cps-chip.component.scss
@@ -18,16 +18,17 @@ $color-text-mild: var(--cps-color-text-mild);
     background-color: $color-bg-dark;
     border-radius: 0.875rem;
     line-height: 1rem;
-    padding: 0.25rem 0.75rem;
+    padding-left: 0.75rem;
+    padding-right: 0.375rem;
     cursor: default;
     &-close-icon {
-      margin-left: 0.375rem;
+      padding: 0.375rem;
       cursor: pointer;
       &:focus {
         outline: none;
       }
       &:focus-visible {
-        @include focus-ring(0.125rem, 0.25rem, 50%);
+        @include focus-ring(-0.125rem, -0.25rem, 50%);
       }
       &:hover {
         ::ng-deep .cps-icon {
@@ -36,11 +37,16 @@ $color-text-mild: var(--cps-color-text-mild);
       }
     }
     &-label {
+      margin-top: 0.25rem;
+      margin-bottom: 0.25rem;
       font-size: 0.875rem;
       color: $color-text-darkest;
       font-family: 'Source Sans Pro', sans-serif;
       font-style: normal;
       font-weight: 400;
+      &:not(:has(+ .cps-chip-close-icon)) {
+        margin-right: 0.375rem;
+      }
     }
 
     &.cps-chip-disabled {
@@ -66,7 +72,7 @@ $color-text-mild: var(--cps-color-text-mild);
 
     &.cps-chip--icon-after {
       .cps-chip-icon {
-        margin-left: 0.375rem;
+        margin-right: 0.375rem;
         order: 1;
       }
     }
diff --git a/projects/cps-ui-kit/src/lib/components/cps-select/cps-select.component.scss b/projects/cps-ui-kit/src/lib/components/cps-select/cps-select.component.scss
index 3591ef41..5c2399ac 100644
--- a/projects/cps-ui-kit/src/lib/components/cps-select/cps-select.component.scss
+++ b/projects/cps-ui-kit/src/lib/components/cps-select/cps-select.component.scss
@@ -13,7 +13,8 @@ $option-hover-background: var(--cps-color-highlight-hover);
 $selected-option-background: var(--cps-color-highlight-selected);
 $option-highlight-background: var(--cps-color-highlight-active);
 $option-highlight-selected-background: var(--cps-color-highlight-selected-dark);
-$select-option-info-color: var(--cps-color-text-light);
+$select-option-info-color: var(--cps-color-text-medium);
+$select-selected-option-info-color: var(--cps-color-text-dark);
 $select-option-value-color: var(--cps-color-text-dark);
 $select-prefix-icon-color: var(--cps-color-text-dark);
 $select-border-color: var(--cps-color-line-light);
@@ -76,7 +77,9 @@ $hover-transition-duration: 0.2s;
           }
           .cps-select-box-chevron {
             top: 1.375rem;
-            transform: rotate(180deg);
+            cps-icon {
+              transform: rotate(180deg);
+            }
           }
         }
       }
@@ -119,7 +122,8 @@ $hover-transition-duration: 0.2s;
       background: white;
       font-size: 1rem;
       outline: none;
-      padding: 0 0.75rem;
+      padding-left: 0.75rem;
+      padding-right: 0.5rem;
       border-radius: 0.25rem;
       align-items: center;
       display: flex;
@@ -175,8 +179,9 @@ $hover-transition-duration: 0.2s;
 
         .cps-select-box-clear-icon {
           display: flex;
+          padding: 0.25rem;
           color: $color-error;
-          margin-left: 0.5rem;
+          margin-left: 0.25rem;
           cursor: pointer;
           &:focus {
             outline: none;
@@ -188,7 +193,7 @@ $hover-transition-duration: 0.2s;
             }
           }
           &:focus-visible {
-            @include focus-ring(0.125rem, 0.25rem, 50%);
+            @include focus-ring(-0.125rem, -0.25rem, 50%);
           }
           cps-icon {
             opacity: 0;
@@ -197,14 +202,17 @@ $hover-transition-duration: 0.2s;
         }
         .cps-select-box-chevron {
           display: flex;
-          margin-left: 0.5rem;
+          padding: 0.25rem;
           transition-duration: $hover-transition-duration;
           cursor: pointer;
+          cps-icon {
+            transition: transform $hover-transition-duration;
+          }
           &:focus {
             outline: none;
           }
           &:focus-visible {
-            @include focus-ring();
+            @include focus-ring(-0.125rem, -0.25rem, 0.375rem);
           }
         }
       }
@@ -332,6 +340,9 @@ $hover-transition-duration: 0.2s;
     }
     &.selected {
       background: $selected-option-background;
+      .cps-select-options-option-right {
+        color: $select-selected-option-info-color;
+      }
     }
     &.highlighten {
       background: $option-highlight-background;

From 93d1a86417da77bc8bbba9d902a9de8beedf3b6f Mon Sep 17 00:00:00 2001
From: fateeand <andrei.fateev@absa.africa>
Date: Mon, 18 May 2026 14:12:04 +0200
Subject: [PATCH 06/15] add aria labels

---
 .../autocomplete-page.component.html              |  2 +-
 .../autocomplete-page.examples.ts                 |  2 +-
 .../pages/radio-page/radio-page.component.html    |  4 ++++
 .../pages/select-page/select-page.component.html  |  4 ++--
 .../cps-autocomplete.component.ts                 | 10 ++++------
 .../cps-button-toggle.component.ts                | 10 ++++------
 .../components/cps-button/cps-button.component.ts | 15 ++++++---------
 .../cps-checkbox/cps-checkbox.component.ts        | 15 ++++++---------
 .../cps-paginator/cps-paginator.component.html    |  1 +
 .../cps-radio-group/cps-radio-group.component.ts  | 15 ++++++---------
 .../cps-scheduler/cps-scheduler.component.html    | 15 +++++++++++++++
 .../components/cps-select/cps-select.component.ts | 10 ++++------
 .../cps-tab-group/cps-tab/cps-tab.component.ts    | 15 ++++++---------
 .../table-column-filter.component.html            |  2 ++
 .../components/cps-table/cps-table.component.html |  1 +
 .../cps-tree-table/cps-tree-table.component.html  |  1 +
 16 files changed, 64 insertions(+), 58 deletions(-)

diff --git a/projects/composition/src/app/pages/autocomplete-page/autocomplete-page.component.html b/projects/composition/src/app/pages/autocomplete-page/autocomplete-page.component.html
index 6bc8b53a..d367bc28 100644
--- a/projects/composition/src/app/pages/autocomplete-page/autocomplete-page.component.html
+++ b/projects/composition/src/app/pages/autocomplete-page/autocomplete-page.component.html
@@ -160,7 +160,7 @@
           optionValue="val"
           optionInfo="ticker"
           placeholder="Enter a company"
-          hint="This autocomplete has a fixed width of 500px"
+          hint="This autocomplete has a fixed width of 31.25rem"
           [clearable]="true"
           [multiple]="true"
           [closableChips]="false"
diff --git a/projects/composition/src/app/pages/autocomplete-page/autocomplete-page.examples.ts b/projects/composition/src/app/pages/autocomplete-page/autocomplete-page.examples.ts
index 0803205e..96e6f66b 100644
--- a/projects/composition/src/app/pages/autocomplete-page/autocomplete-page.examples.ts
+++ b/projects/composition/src/app/pages/autocomplete-page/autocomplete-page.examples.ts
@@ -181,7 +181,7 @@ onMultiInputChanged(val: string): void {
   optionValue="val"
   optionInfo="ticker"
   placeholder="Enter a company"
-  hint="This autocomplete has a fixed width of 500px"
+  hint="This autocomplete has a fixed width of 31.25rem"
   [clearable]="true"
   [multiple]="true"
   [closableChips]="false"
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 9f118feb..ad0b037c 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
@@ -52,6 +52,7 @@
         <div class="inline-radio-form">
           <span>On the</span>
           <cps-select
+            ariaLabel="Select day"
             [options]="dayOptions"
             optionLabel="name"
             [hideDetails]="true"
@@ -59,6 +60,7 @@
           </cps-select>
           <span>of every</span>
           <cps-select
+            ariaLabel="Select month"
             [options]="monthOptions"
             optionLabel="name"
             [hideDetails]="true"
@@ -66,6 +68,7 @@
           </cps-select>
           <span>month(s) at</span>
           <cps-select
+            ariaLabel="Select hour"
             [options]="hourOptions"
             optionLabel="name"
             [hideDetails]="true"
@@ -73,6 +76,7 @@
           </cps-select>
           <span>:</span>
           <cps-select
+            ariaLabel="Select minute"
             [options]="minuteOptions"
             optionLabel="name"
             [hideDetails]="true"
diff --git a/projects/composition/src/app/pages/select-page/select-page.component.html b/projects/composition/src/app/pages/select-page/select-page.component.html
index 27238106..88dd5325 100644
--- a/projects/composition/src/app/pages/select-page/select-page.component.html
+++ b/projects/composition/src/app/pages/select-page/select-page.component.html
@@ -85,7 +85,7 @@
       </cps-select>
       <div class="sync-val-example">
         <cps-select
-          width="500"
+          width="31.25rem"
           label="Multiple select with two-way binding and keeping initial items order"
           [returnObject]="false"
           [options]="syncOptions"
@@ -94,7 +94,7 @@
           optionValue="val"
           optionInfo="ticker"
           placeholder="Select a company"
-          hint="This select has a fixed width of 500px"
+          hint="This select has a fixed width of 31.25rem"
           [clearable]="true"
           [multiple]="true"
           [closableChips]="false"
diff --git a/projects/cps-ui-kit/src/lib/components/cps-autocomplete/cps-autocomplete.component.ts b/projects/cps-ui-kit/src/lib/components/cps-autocomplete/cps-autocomplete.component.ts
index 30d02e27..49912d5c 100644
--- a/projects/cps-ui-kit/src/lib/components/cps-autocomplete/cps-autocomplete.component.ts
+++ b/projects/cps-ui-kit/src/lib/components/cps-autocomplete/cps-autocomplete.component.ts
@@ -528,12 +528,10 @@ export class CpsAutocompleteComponent
     ) {
       this._toggleOptions(true);
     }
-    if (changes.label || changes.ariaLabel) {
-      if (!this.label?.trim() && !this.ariaLabel?.trim()) {
-        console.error(
-          'CpsAutocompleteComponent: unlabeled autocomplete component must have an ariaLabel for accessibility.'
-        );
-      }
+    if (!this.label?.trim() && !this.ariaLabel?.trim()) {
+      console.error(
+        'CpsAutocompleteComponent: unlabeled autocomplete component must have an ariaLabel for accessibility.'
+      );
     }
   }
 
diff --git a/projects/cps-ui-kit/src/lib/components/cps-button-toggle/cps-button-toggle.component.ts b/projects/cps-ui-kit/src/lib/components/cps-button-toggle/cps-button-toggle.component.ts
index 1e967a46..733ac0aa 100644
--- a/projects/cps-ui-kit/src/lib/components/cps-button-toggle/cps-button-toggle.component.ts
+++ b/projects/cps-ui-kit/src/lib/components/cps-button-toggle/cps-button-toggle.component.ts
@@ -193,12 +193,10 @@ export class CpsButtonToggleComponent
   }
 
   ngOnChanges(changes: SimpleChanges): void {
-    if (changes.label || changes.ariaLabel) {
-      if (!this.label?.trim() && !this.ariaLabel?.trim()) {
-        console.error(
-          'CpsButtonToggleComponent: unlabeled button toggle component must have an ariaLabel for accessibility.'
-        );
-      }
+    if (!this.label?.trim() && !this.ariaLabel?.trim()) {
+      console.error(
+        'CpsButtonToggleComponent: unlabeled button toggle component must have an ariaLabel for accessibility.'
+      );
     }
     if (changes.options) {
       const hasInaccessibleOption = this.options.some(
diff --git a/projects/cps-ui-kit/src/lib/components/cps-button/cps-button.component.ts b/projects/cps-ui-kit/src/lib/components/cps-button/cps-button.component.ts
index c7e6988c..fa35db68 100644
--- a/projects/cps-ui-kit/src/lib/components/cps-button/cps-button.component.ts
+++ b/projects/cps-ui-kit/src/lib/components/cps-button/cps-button.component.ts
@@ -6,8 +6,7 @@ import {
   Inject,
   Input,
   OnChanges,
-  Output,
-  type SimpleChanges
+  Output
 } from '@angular/core';
 import { getCSSColor } from '../../utils/colors-utils';
 import { CpsIconComponent, IconType } from '../cps-icon/cps-icon.component';
@@ -126,7 +125,7 @@ export class CpsButtonComponent implements OnChanges {
   // eslint-disable-next-line no-useless-constructor
   constructor(@Inject(DOCUMENT) private document: Document) {}
 
-  ngOnChanges(changes: SimpleChanges): void {
+  ngOnChanges(): void {
     this.buttonColor = getCSSColor(this.color, this.document);
     this.borderRadius = convertSize(this.borderRadius);
     this.textColor =
@@ -136,12 +135,10 @@ export class CpsButtonComponent implements OnChanges {
     if (this.disabled || this.loading) {
       this.enterActive = false;
     }
-    if (changes.label || changes.ariaLabel) {
-      if (!this.label?.trim() && !this.ariaLabel?.trim()) {
-        console.error(
-          'CpsButtonComponent: icon-only or unlabeled button must have an ariaLabel for accessibility.'
-        );
-      }
+    if (!this.label?.trim() && !this.ariaLabel?.trim()) {
+      console.error(
+        'CpsButtonComponent: icon-only or unlabeled button must have an ariaLabel for accessibility.'
+      );
     }
     this.setClasses();
   }
diff --git a/projects/cps-ui-kit/src/lib/components/cps-checkbox/cps-checkbox.component.ts b/projects/cps-ui-kit/src/lib/components/cps-checkbox/cps-checkbox.component.ts
index adef42a6..6003e73f 100644
--- a/projects/cps-ui-kit/src/lib/components/cps-checkbox/cps-checkbox.component.ts
+++ b/projects/cps-ui-kit/src/lib/components/cps-checkbox/cps-checkbox.component.ts
@@ -9,8 +9,7 @@ import {
   OnInit,
   Optional,
   Output,
-  Self,
-  type SimpleChanges
+  Self
 } from '@angular/core';
 import { ControlValueAccessor, NgControl } from '@angular/forms';
 import { CpsInfoCircleComponent } from '../cps-info-circle/cps-info-circle.component';
@@ -128,13 +127,11 @@ export class CpsCheckboxComponent
     this.iconColor = getCSSColor(this.iconColor, this.document);
   }
 
-  ngOnChanges(changes: SimpleChanges): void {
-    if (changes.label || changes.ariaLabel) {
-      if (!this.label?.trim() && !this.ariaLabel?.trim()) {
-        console.error(
-          'CpsCheckboxComponent: icon-only or unlabeled checkbox must have an ariaLabel for accessibility.'
-        );
-      }
+  ngOnChanges(): void {
+    if (!this.label?.trim() && !this.ariaLabel?.trim()) {
+      console.error(
+        'CpsCheckboxComponent: icon-only or unlabeled checkbox must have an ariaLabel for accessibility.'
+      );
     }
   }
 
diff --git a/projects/cps-ui-kit/src/lib/components/cps-paginator/cps-paginator.component.html b/projects/cps-ui-kit/src/lib/components/cps-paginator/cps-paginator.component.html
index 287f5d79..c4246319 100644
--- a/projects/cps-ui-kit/src/lib/components/cps-paginator/cps-paginator.component.html
+++ b/projects/cps-ui-kit/src/lib/components/cps-paginator/cps-paginator.component.html
@@ -16,6 +16,7 @@
   <div class="cps-paginator-itms-per-page">
     <span class="cps-paginator-items-per-page-title">Items per page: </span>
     <cps-select
+      ariaLabel="Set items per page"
       [options]="rowOptions"
       [hideDetails]="true"
       [(ngModel)]="rows"
diff --git a/projects/cps-ui-kit/src/lib/components/cps-radio-group/cps-radio-group.component.ts b/projects/cps-ui-kit/src/lib/components/cps-radio-group/cps-radio-group.component.ts
index 04964ce1..181228a3 100644
--- a/projects/cps-ui-kit/src/lib/components/cps-radio-group/cps-radio-group.component.ts
+++ b/projects/cps-ui-kit/src/lib/components/cps-radio-group/cps-radio-group.component.ts
@@ -10,8 +10,7 @@ import {
   OnInit,
   Optional,
   Output,
-  Self,
-  type SimpleChanges
+  Self
 } from '@angular/core';
 import { ControlValueAccessor, NgControl, Validators } from '@angular/forms';
 import { CpsInfoCircleComponent } from '../cps-info-circle/cps-info-circle.component';
@@ -185,13 +184,11 @@ export class CpsRadioGroupComponent
     );
   }
 
-  ngOnChanges(changes: SimpleChanges): void {
-    if (changes.groupLabel || changes.ariaLabel) {
-      if (!this.groupLabel?.trim() && !this.ariaLabel?.trim()) {
-        console.error(
-          'CpsRadioGroupComponent: unlabeled radio group component must have an ariaLabel for accessibility.'
-        );
-      }
+  ngOnChanges(): void {
+    if (!this.groupLabel?.trim() && !this.ariaLabel?.trim()) {
+      console.error(
+        'CpsRadioGroupComponent: unlabeled radio group component must have an ariaLabel for accessibility.'
+      );
     }
   }
 
diff --git a/projects/cps-ui-kit/src/lib/components/cps-scheduler/cps-scheduler.component.html b/projects/cps-ui-kit/src/lib/components/cps-scheduler/cps-scheduler.component.html
index 8927e33f..c65adac0 100644
--- a/projects/cps-ui-kit/src/lib/components/cps-scheduler/cps-scheduler.component.html
+++ b/projects/cps-ui-kit/src/lib/components/cps-scheduler/cps-scheduler.component.html
@@ -23,6 +23,7 @@
         <div class="cps-scheduler-tab-pane-row">
           Every
           <cps-select
+            ariaLabel="Select minutes frequency"
             width="70px"
             [disabled]="disabled"
             [returnObject]="false"
@@ -43,6 +44,7 @@
         <div class="cps-scheduler-tab-pane-row">
           Every
           <cps-select
+            ariaLabel="Select hours frequency"
             width="70px"
             [disabled]="disabled"
             [returnObject]="false"
@@ -55,6 +57,7 @@
           </cps-select>
           hour(s) on minute
           <cps-select
+            ariaLabel="Select on which minute"
             width="70px"
             [disabled]="disabled"
             [returnObject]="false"
@@ -91,6 +94,7 @@
               ">
               Every
               <cps-select
+                ariaLabel="Select days frequency"
                 width="70px"
                 data-testid="daily-every-days-input"
                 [disabled]="disabled || state.daily.subTab !== 'everyDays'"
@@ -234,6 +238,7 @@
               ">
               On the
               <cps-select
+                ariaLabel="Select day of month"
                 width="120px"
                 data-testid="monthly-day-select"
                 [disabled]="disabled || state.monthly.subTab !== 'specificDay'"
@@ -246,6 +251,7 @@
               </cps-select>
               of every
               <cps-select
+                ariaLabel="Select months frequency"
                 width="70px"
                 data-testid="monthly-months-input"
                 [disabled]="disabled || state.monthly.subTab !== 'specificDay'"
@@ -293,6 +299,7 @@
               ">
               On the
               <cps-select
+                ariaLabel="Select weekday occurrence"
                 width="106px"
                 data-testid="monthly-week-select"
                 [disabled]="
@@ -306,6 +313,7 @@
                 class="cps-scheduler-select-control">
               </cps-select>
               <cps-select
+                ariaLabel="Select weekday"
                 width="130px"
                 data-testid="monthly-weekday-select"
                 [disabled]="
@@ -320,6 +328,7 @@
               </cps-select>
               of every
               <cps-select
+                ariaLabel="Select months frequency"
                 width="90px"
                 [disabled]="
                   disabled || state.monthly.subTab !== 'specificWeekDay'
@@ -334,6 +343,7 @@
               </cps-select>
               month(s) starting in
               <cps-select
+                ariaLabel="Select starting month"
                 width="120px"
                 [disabled]="
                   disabled || state.monthly.subTab !== 'specificWeekDay'
@@ -389,6 +399,7 @@
               ">
               Every
               <cps-select
+                ariaLabel="Select month"
                 width="120px"
                 [disabled]="
                   disabled || state.yearly.subTab !== 'specificMonthDay'
@@ -403,6 +414,7 @@
               </cps-select>
               on the
               <cps-select
+                ariaLabel="Select day of month"
                 width="120px"
                 data-testid="yearly-day-select"
                 [disabled]="
@@ -456,6 +468,7 @@
               ">
               On the
               <cps-select
+                ariaLabel="Select weekday occurrence"
                 width="106px"
                 data-testid="yearly-week-select"
                 [disabled]="
@@ -469,6 +482,7 @@
                 class="cps-scheduler-select-control">
               </cps-select>
               <cps-select
+                ariaLabel="Select weekday"
                 width="120px"
                 data-testid="yearly-weekday-select"
                 [disabled]="
@@ -483,6 +497,7 @@
               </cps-select>
               of
               <cps-select
+                ariaLabel="Select month"
                 width="120px"
                 [disabled]="
                   disabled || state.yearly.subTab !== 'specificMonthWeek'
diff --git a/projects/cps-ui-kit/src/lib/components/cps-select/cps-select.component.ts b/projects/cps-ui-kit/src/lib/components/cps-select/cps-select.component.ts
index 3ff55812..cb168c8a 100644
--- a/projects/cps-ui-kit/src/lib/components/cps-select/cps-select.component.ts
+++ b/projects/cps-ui-kit/src/lib/components/cps-select/cps-select.component.ts
@@ -421,12 +421,10 @@ export class CpsSelectComponent
       });
       this.recalcVirtualListHeight();
     }
-    if (changes.label || changes.ariaLabel) {
-      if (!this.label?.trim() && !this.ariaLabel?.trim()) {
-        console.error(
-          'CpsSelectComponent: unlabeled select component must have an ariaLabel for accessibility.'
-        );
-      }
+    if (!this.label?.trim() && !this.ariaLabel?.trim()) {
+      console.error(
+        'CpsSelectComponent: unlabeled select component must have an ariaLabel for accessibility.'
+      );
     }
   }
 
diff --git a/projects/cps-ui-kit/src/lib/components/cps-tab-group/cps-tab/cps-tab.component.ts b/projects/cps-ui-kit/src/lib/components/cps-tab-group/cps-tab/cps-tab.component.ts
index e62aad95..bcddf2de 100644
--- a/projects/cps-ui-kit/src/lib/components/cps-tab-group/cps-tab/cps-tab.component.ts
+++ b/projects/cps-ui-kit/src/lib/components/cps-tab-group/cps-tab/cps-tab.component.ts
@@ -5,8 +5,7 @@ import {
   Input,
   OnChanges,
   TemplateRef,
-  ViewChild,
-  type SimpleChanges
+  ViewChild
 } from '@angular/core';
 
 /**
@@ -84,13 +83,11 @@ export class CpsTabComponent implements OnChanges {
 
   active = false;
 
-  ngOnChanges(changes: SimpleChanges): void {
-    if (changes.label || changes.ariaLabel) {
-      if (!this.label?.trim() && !this.ariaLabel?.trim()) {
-        console.error(
-          'CpsTabComponent: unlabeled tab component must have an ariaLabel for accessibility.'
-        );
-      }
+  ngOnChanges(): void {
+    if (!this.label?.trim() && !this.ariaLabel?.trim()) {
+      console.error(
+        'CpsTabComponent: unlabeled tab component must have an ariaLabel for accessibility.'
+      );
     }
   }
 }
diff --git a/projects/cps-ui-kit/src/lib/components/cps-table/components/internal/table-column-filter/table-column-filter.component.html b/projects/cps-ui-kit/src/lib/components/cps-table/components/internal/table-column-filter/table-column-filter.component.html
index 88d62d39..98a7d116 100644
--- a/projects/cps-ui-kit/src/lib/components/cps-table/components/internal/table-column-filter/table-column-filter.component.html
+++ b/projects/cps-ui-kit/src/lib/components/cps-table/components/internal/table-column-filter/table-column-filter.component.html
@@ -21,6 +21,7 @@
       @if (isShowOperator) {
         <div class="cps-table-col-filter-menu-content-operator">
           <cps-select
+            ariaLabel="Select operator"
             [hideDetails]="true"
             [disabled]="!fieldConstraints || fieldConstraints.length < 2"
             [returnObject]="false"
@@ -38,6 +39,7 @@
           <div class="cps-table-col-filter-menu-content-constraint">
             @if (showMatchModes && currentMatchModes) {
               <cps-select
+                ariaLabel="Select match mode"
                 class="cps-table-col-filter-match-mode-select"
                 [hideDetails]="true"
                 [returnObject]="false"
diff --git a/projects/cps-ui-kit/src/lib/components/cps-table/cps-table.component.html b/projects/cps-ui-kit/src/lib/components/cps-table/cps-table.component.html
index 77387b8c..8f3c7e29 100644
--- a/projects/cps-ui-kit/src/lib/components/cps-table/cps-table.component.html
+++ b/projects/cps-ui-kit/src/lib/components/cps-table/cps-table.component.html
@@ -429,6 +429,7 @@
         >Rows per page:
       </span>
       <cps-select
+        ariaLabel="Set rows per page"
         [options]="rowOptions"
         [hideDetails]="true"
         [(ngModel)]="rows"
diff --git a/projects/cps-ui-kit/src/lib/components/cps-tree-table/cps-tree-table.component.html b/projects/cps-ui-kit/src/lib/components/cps-tree-table/cps-tree-table.component.html
index cf84bd9f..472fdbf9 100644
--- a/projects/cps-ui-kit/src/lib/components/cps-tree-table/cps-tree-table.component.html
+++ b/projects/cps-ui-kit/src/lib/components/cps-tree-table/cps-tree-table.component.html
@@ -404,6 +404,7 @@
         >Rows per page:
       </span>
       <cps-select
+        ariaLabel="Set rows per page"
         [options]="rowOptions"
         [hideDetails]="true"
         [(ngModel)]="rows"

From 3559fce67e5ea0c847ea831ea3734b40e09382ad Mon Sep 17 00:00:00 2001
From: fateeand <andrei.fateev@absa.africa>
Date: Mon, 18 May 2026 15:13:40 +0200
Subject: [PATCH 07/15] address feedback from copilot

---
 .../lib/components/cps-chip/cps-chip.component.scss  | 12 +++++++++++-
 .../components/cps-select/cps-select.component.ts    |  1 +
 2 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/projects/cps-ui-kit/src/lib/components/cps-chip/cps-chip.component.scss b/projects/cps-ui-kit/src/lib/components/cps-chip/cps-chip.component.scss
index 58ed12cb..63591f16 100644
--- a/projects/cps-ui-kit/src/lib/components/cps-chip/cps-chip.component.scss
+++ b/projects/cps-ui-kit/src/lib/components/cps-chip/cps-chip.component.scss
@@ -72,8 +72,18 @@ $color-text-mild: var(--cps-color-text-mild);
 
     &.cps-chip--icon-after {
       .cps-chip-icon {
-        margin-right: 0.375rem;
+        margin-left: 0.375rem;
         order: 1;
+
+        &:not(:has(~ .cps-chip-close-icon)) {
+          margin-right: 0.375rem;
+        }
+      }
+      .cps-chip-close-icon {
+        order: 2;
+      }
+      .cps-chip-label {
+        margin-right: 0;
       }
     }
   }
diff --git a/projects/cps-ui-kit/src/lib/components/cps-select/cps-select.component.ts b/projects/cps-ui-kit/src/lib/components/cps-select/cps-select.component.ts
index cb168c8a..31cdeab7 100644
--- a/projects/cps-ui-kit/src/lib/components/cps-select/cps-select.component.ts
+++ b/projects/cps-ui-kit/src/lib/components/cps-select/cps-select.component.ts
@@ -731,6 +731,7 @@ export class CpsSelectComponent
 
   clear(event?: any): void {
     event?.stopPropagation();
+    event?.preventDefault();
 
     const hadValue =
       (!this.multiple && !this.isEmptyValue()) ||

From 57216e2086f03eba91d3408e390835c5565d57e4 Mon Sep 17 00:00:00 2001
From: fateeand <andrei.fateev@absa.africa>
Date: Tue, 19 May 2026 14:37:23 +0200
Subject: [PATCH 08/15] use root font size service

---
 .../cps-select/cps-select.component.spec.ts   | 15 ++++++++++++-
 .../cps-select/cps-select.component.ts        | 22 +++++++------------
 2 files changed, 22 insertions(+), 15 deletions(-)

diff --git a/projects/cps-ui-kit/src/lib/components/cps-select/cps-select.component.spec.ts b/projects/cps-ui-kit/src/lib/components/cps-select/cps-select.component.spec.ts
index b1955a7f..9aa6b936 100644
--- a/projects/cps-ui-kit/src/lib/components/cps-select/cps-select.component.spec.ts
+++ b/projects/cps-ui-kit/src/lib/components/cps-select/cps-select.component.spec.ts
@@ -11,9 +11,14 @@ import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { CheckOptionSelectedPipe } from '../../pipes/internal/check-option-selected.pipe';
 import { CombineLabelsPipe } from '../../pipes/internal/combine-labels.pipe';
 import { LabelByValuePipe } from '../../pipes/internal/label-by-value.pipe';
+import { CPS_ROOT_FONT_SIZE_SERVICE } from '../../services/cps-root-font-size/cps-root-font-size.service';
 import { CpsMenuHideReason } from '../cps-menu/cps-menu.component';
 import { CpsSelectComponent } from './cps-select.component';
 
+const mockRootFontSizeService = {
+  fontSize: () => 16
+};
+
 const OPTIONS = [
   { label: 'Option 1', value: 'opt1' },
   { label: 'Option 2', value: 'opt2' },
@@ -32,7 +37,15 @@ describe('CpsSelectComponent', () => {
         CpsSelectComponent,
         NoopAnimationsModule
       ],
-      providers: [LabelByValuePipe, CombineLabelsPipe, CheckOptionSelectedPipe],
+      providers: [
+        LabelByValuePipe,
+        CombineLabelsPipe,
+        CheckOptionSelectedPipe,
+        {
+          provide: CPS_ROOT_FONT_SIZE_SERVICE,
+          useValue: mockRootFontSizeService
+        }
+      ],
       schemas: [NO_ERRORS_SCHEMA]
     }).compileComponents();
   });
diff --git a/projects/cps-ui-kit/src/lib/components/cps-select/cps-select.component.ts b/projects/cps-ui-kit/src/lib/components/cps-select/cps-select.component.ts
index 31cdeab7..8b2b3627 100644
--- a/projects/cps-ui-kit/src/lib/components/cps-select/cps-select.component.ts
+++ b/projects/cps-ui-kit/src/lib/components/cps-select/cps-select.component.ts
@@ -1,17 +1,16 @@
-import { CommonModule, DOCUMENT, isPlatformBrowser } from '@angular/common';
+import { CommonModule } from '@angular/common';
 import {
   AfterViewInit,
   Component,
   ElementRef,
   EventEmitter,
-  Inject,
+  inject,
   Input,
   OnChanges,
   OnDestroy,
   OnInit,
   Optional,
   Output,
-  PLATFORM_ID,
   Self,
   ViewChild,
   type SimpleChanges
@@ -41,6 +40,7 @@ import { CombineLabelsPipe } from '../../pipes/internal/combine-labels.pipe';
 import { CheckOptionSelectedPipe } from '../../pipes/internal/check-option-selected.pipe';
 import { isEqual } from 'lodash-es';
 import { CpsTooltipPosition } from '../../directives/cps-tooltip/cps-tooltip.directive';
+import { CPS_ROOT_FONT_SIZE_SERVICE } from '../../services/cps-root-font-size/cps-root-font-size.service';
 import {
   CpsMenuComponent,
   CpsMenuHideReason
@@ -359,18 +359,17 @@ export class CpsSelectComponent
   selectBoxWidthRem = 0;
   resizeObserver: ResizeObserver;
 
-  private _rootFontSizePx = 16;
+  private readonly _cpsRootFontSizeService = inject(CPS_ROOT_FONT_SIZE_SERVICE);
+  private get _rootFontSizePx(): number {
+    return this._cpsRootFontSizeService?.fontSize() ?? 16;
+  }
 
   readonly optionsListId = generateUniqueId('cps-select-options-list');
   readonly selectAllOptionId = generateUniqueId('cps-select-option-select-all');
   private readonly _optionIdPrefix = generateUniqueId('cps-select-option');
   private _optionIds = new WeakMap<object, string>();
 
-  constructor(
-    @Self() @Optional() private _control: NgControl,
-    @Inject(DOCUMENT) private document: Document,
-    @Inject(PLATFORM_ID) private platformId: object
-  ) {
+  constructor(@Self() @Optional() private _control: NgControl) {
     if (this._control) {
       this._control.valueAccessor = this;
     }
@@ -385,11 +384,6 @@ export class CpsSelectComponent
   }
 
   ngOnInit() {
-    if (isPlatformBrowser(this.platformId)) {
-      this._rootFontSizePx = parseFloat(
-        getComputedStyle(this.document.documentElement).fontSize || '16'
-      );
-    }
     this.virtualScrollItemSizePx =
       this._rootFontSizePx * VIRTUAL_SCROLL_ITEM_SIZE_REM;
     this.virtualListHeightRem =

From 9b9e703b3bab0fdfb4324fd194444b70bc36fe03 Mon Sep 17 00:00:00 2001
From: fateeand <andrei.fateev@absa.africa>
Date: Tue, 19 May 2026 14:46:09 +0200
Subject: [PATCH 09/15] address feedback

---
 .../cps-select/cps-select.component.ts        | 54 ++++++-------------
 1 file changed, 16 insertions(+), 38 deletions(-)

diff --git a/projects/cps-ui-kit/src/lib/components/cps-select/cps-select.component.ts b/projects/cps-ui-kit/src/lib/components/cps-select/cps-select.component.ts
index 8b2b3627..4859abf7 100644
--- a/projects/cps-ui-kit/src/lib/components/cps-select/cps-select.component.ts
+++ b/projects/cps-ui-kit/src/lib/components/cps-select/cps-select.component.ts
@@ -535,24 +535,11 @@ export class CpsSelectComponent
     }
   }
 
-  private _getHTMLOptions() {
-    return (this.optionsList.nativeElement.querySelectorAll(
-      '.cps-select-options-option'
-    ) || []) as any;
-  }
-
-  private _dehighlightOption(el?: HTMLElement) {
-    if (el) el.classList.remove('highlighten');
-    else {
-      if (this.optionHighlightedIndex < 0) return;
-      const optionItems = this._getHTMLOptions();
-      optionItems[this.optionHighlightedIndex].classList.remove('highlighten');
-      this.optionHighlightedIndex = -1;
-    }
+  private _dehighlightOption() {
+    this.optionHighlightedIndex = -1;
   }
 
   private _highlightOption(el: HTMLElement) {
-    el.classList.add('highlighten');
     const parent = el.parentElement;
     if (!parent) return;
     const parentRect = parent.getBoundingClientRect();
@@ -568,31 +555,22 @@ export class CpsSelectComponent
   private _navigateOptionsByArrows(up: boolean) {
     if (!this.isOpened) return;
 
-    const optionItems = this._getHTMLOptions();
-    const len = optionItems.length;
-    if (len < 1) return;
+    if (this.optionsAriaSetSize < 1) return;
 
-    if (len === 1) {
-      this.optionHighlightedIndex = 0;
-      this._highlightOption(optionItems[0]);
-      return;
-    }
+    this.optionHighlightedIndex = this._nextHighlightIndex(
+      up,
+      this.optionsAriaSetSize
+    );
 
-    if (up) {
-      this._dehighlightOption(optionItems[this.optionHighlightedIndex]);
-      this.optionHighlightedIndex =
-        this.optionHighlightedIndex < 1
-          ? len - 1
-          : this.optionHighlightedIndex - 1;
-      this._highlightOption(optionItems[this.optionHighlightedIndex]);
-    } else {
-      this._dehighlightOption(optionItems[this.optionHighlightedIndex]);
-      this.optionHighlightedIndex = [-1, len - 1].includes(
-        this.optionHighlightedIndex
-      )
-        ? 0
-        : this.optionHighlightedIndex + 1;
-      this._highlightOption(optionItems[this.optionHighlightedIndex]);
+    const activeId = this._getHighlightedOptionId();
+    if (!activeId) return;
+
+    const activeOption = this.optionsList?.nativeElement?.querySelector(
+      `#${activeId}`
+    ) as HTMLElement | null;
+
+    if (activeOption) {
+      this._highlightOption(activeOption);
     }
   }
 

From 8f7116ea0de18690992418d99551e419d6459ea9 Mon Sep 17 00:00:00 2001
From: fateeand <andrei.fateev@absa.africa>
Date: Wed, 20 May 2026 11:04:33 +0200
Subject: [PATCH 10/15] sync highlight to selected value

---
 .../cps-autocomplete.component.html           | 19 +++-----
 .../cps-autocomplete.component.ts             | 46 +++++++++++--------
 .../cps-select/cps-select.component.html      | 16 +++----
 .../cps-select/cps-select.component.spec.ts   | 14 +++---
 .../cps-select/cps-select.component.ts        | 44 +++++++++++-------
 5 files changed, 76 insertions(+), 63 deletions(-)

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 6ea2d13d..955454f7 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
@@ -47,9 +47,7 @@
             class="prefix-icon">
           </cps-icon>
         }
-        @if (
-          (!multiple && !isEmptyValue()) || (value?.length > 0 && multiple)
-        ) {
+        @if (hasSelectedValue()) {
           <div class="cps-autocomplete-box-items">
             @if (!multiple) {
               <span class="single-item">
@@ -160,9 +158,7 @@
               class="cps-autocomplete-box-clear-icon"
               [ngClass]="{
                 'cps-autocomplete-box-clear-icon-hidden':
-                  !persistentClear &&
-                  (!multiple || !value?.length) &&
-                  (multiple || isEmptyValue())
+                  !persistentClear && !hasSelectedValue()
               }">
               <cps-icon
                 icon="delete"
@@ -245,7 +241,9 @@
             [attr.aria-posinset]="1"
             [attr.aria-selected]="value?.length === options.length"
             [class.allselected]="value?.length === options.length"
-            [class.highlighten]="optionHighlightedIndex === 0"
+            [class.highlighten]="
+              isArrowNavigating && optionHighlightedIndex === 0
+            "
             (mousedown)="$event.preventDefault()"
             (click)="toggleAll()">
             <span class="cps-autocomplete-options-option-left">
@@ -336,11 +334,7 @@
     [attr.aria-required]="isRequired || null"
     [ngClass]="inputClass"
     [ngStyle]="inputStyle"
-    [placeholder]="
-      (!multiple && isEmptyValue()) || (value?.length < 1 && multiple)
-        ? placeholder
-        : ''
-    "
+    [placeholder]="!hasSelectedValue() ? placeholder : ''"
     (input)="filterOptions($event)"
     (keydown)="onInputKeyDown($event)"
     [(ngModel)]="inputText"
@@ -360,6 +354,7 @@
     (mousedown)="$event.preventDefault()"
     (click)="onOptionClick(item)"
     [class.highlighten]="
+      isArrowNavigating &&
       itemIndex === optionHighlightedIndex - (isSelectAllVisible ? 1 : 0)
     "
     [attr.aria-selected]="
diff --git a/projects/cps-ui-kit/src/lib/components/cps-autocomplete/cps-autocomplete.component.ts b/projects/cps-ui-kit/src/lib/components/cps-autocomplete/cps-autocomplete.component.ts
index 49912d5c..0e25f501 100644
--- a/projects/cps-ui-kit/src/lib/components/cps-autocomplete/cps-autocomplete.component.ts
+++ b/projects/cps-ui-kit/src/lib/components/cps-autocomplete/cps-autocomplete.component.ts
@@ -427,6 +427,7 @@ export class CpsAutocompleteComponent
   backspaceClickedOnce = false;
   activeSingle = false;
   optionHighlightedIndex = -1;
+  isArrowNavigating = false;
 
   virtualScrollItemSizePx = DEFAULT_VIRTUAL_SCROLL_ITEM_SIZE_PX;
   virtualListHeightRem =
@@ -687,9 +688,7 @@ export class CpsAutocompleteComponent
     event?.stopPropagation();
     event?.preventDefault();
 
-    const hadValue =
-      (!this.multiple && !this.isEmptyValue()) ||
-      (this.multiple && this.value?.length > 0);
+    const hadValue = this.hasSelectedValue();
 
     if (hadValue) {
       if (this.openOnClear) {
@@ -849,12 +848,14 @@ export class CpsAutocompleteComponent
       Math.min(currentLen, VIRTUAL_SCROLL_MAX_VISIBLE_ITEMS);
   }
 
-  isEmptyValue(): boolean {
+  hasSelectedValue(): boolean {
+    if (this.multiple) {
+      return this.value?.length > 0;
+    }
     return (
-      this.value === null ||
-      this.value === undefined ||
-      (typeof this.value === 'string' && this.value.trim() === '') ||
-      Number.isNaN(this.value)
+      this.value != null &&
+      !(typeof this.value === 'string' && this.value.trim() === '') &&
+      !Number.isNaN(this.value)
     );
   }
 
@@ -950,6 +951,7 @@ export class CpsAutocompleteComponent
     setTimeout(() => {
       if (this.isOpened && this.filteredOptions.length > 0) {
         this.recalcVirtualListHeight();
+        this._syncHighlightToValue();
 
         const selected =
           this.optionsList.nativeElement.querySelector('.selected');
@@ -959,15 +961,8 @@ export class CpsAutocompleteComponent
             block: 'nearest',
             inline: 'center'
           });
-        } else if (this.virtualScroll && !this.isEmptyValue()) {
-          let v: any;
-          if (this.multiple) {
-            if (this.value.length > 0) {
-              v = this.value[0];
-            }
-          } else v = this.value;
-          const idx = this.filteredOptions.findIndex((o) => isEqual(o, v));
-          if (idx >= 0) this.virtualList.scrollToIndex(idx);
+        } else if (this.virtualScroll && this.optionHighlightedIndex >= 0) {
+          this._scrollVirtualListToIndex(this.optionHighlightedIndex);
         }
       }
     });
@@ -1014,7 +1009,7 @@ export class CpsAutocompleteComponent
   }
 
   private _getValueLabel() {
-    return !this.isEmptyValue()
+    return this.hasSelectedValue()
       ? this.returnObject
         ? this.value[this.optionLabel]
         : this._labelByValue.transform(
@@ -1034,6 +1029,19 @@ export class CpsAutocompleteComponent
 
   private _dehighlightOption() {
     this.optionHighlightedIndex = -1;
+    this.isArrowNavigating = false;
+  }
+
+  private _syncHighlightToValue(): void {
+    if (!this.hasSelectedValue()) return;
+
+    const firstSelected = this.multiple ? this.value[0] : this.value;
+    const idx = this.filteredOptions.findIndex((o) =>
+      isEqual(this.returnObject ? o : o[this.optionValue], firstSelected)
+    );
+    if (idx < 0) return;
+
+    this.optionHighlightedIndex = idx + (this.isSelectAllVisible ? 1 : 0);
   }
 
   private _getHighlightedOptionId(): string | null {
@@ -1073,6 +1081,7 @@ export class CpsAutocompleteComponent
 
     if (this.optionsAriaSetSize < 1) return;
 
+    this.isArrowNavigating = true;
     this.optionHighlightedIndex = this._nextHighlightIndex(
       up,
       this.optionsAriaSetSize
@@ -1096,6 +1105,7 @@ export class CpsAutocompleteComponent
     const len = this.filteredOptions.length;
     if (len < 1) return;
 
+    this.isArrowNavigating = true;
     this.optionHighlightedIndex = this._nextHighlightIndex(up, len);
     this._syncVirtualHighlightedOptionIntoView();
   }
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 5267928c..9e912ba1 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
@@ -52,14 +52,11 @@
             class="prefix-icon">
           </cps-icon>
         }
-        @if ((!multiple && isEmptyValue()) || (value?.length < 1 && multiple)) {
+        @if (!hasSelectedValue()) {
           <div class="cps-select-box-placeholder">
             {{ placeholder }}
           </div>
-        }
-        @if (
-          (!multiple && !isEmptyValue()) || (value?.length > 0 && multiple)
-        ) {
+        } @else {
           <div class="cps-select-box-items">
             @if (!multiple) {
               <span class="single-item">
@@ -121,9 +118,7 @@
             (keydown.enter)="clear($event)"
             (keydown.space)="clear($event)"
             [style.visibility]="
-              persistentClear ||
-              (!persistentClear &&
-                ((multiple && value?.length) || (!multiple && !isEmptyValue())))
+              persistentClear || (!persistentClear && hasSelectedValue())
                 ? 'visible'
                 : 'hidden'
             "
@@ -179,7 +174,9 @@
               [attr.aria-posinset]="1"
               [attr.aria-selected]="value?.length === options.length"
               [class.allselected]="value?.length === options.length"
-              [class.highlighten]="optionHighlightedIndex === 0"
+              [class.highlighten]="
+                isArrowNavigating && optionHighlightedIndex === 0
+              "
               (mousedown)="$event.preventDefault()"
               (click)="toggleAll()">
               <span class="cps-select-options-option-left">
@@ -260,6 +257,7 @@
     (mousedown)="$event.preventDefault()"
     (click)="onOptionClick(item)"
     [class.highlighten]="
+      isArrowNavigating &&
       itemIdx === optionHighlightedIndex - (isSelectAllVisible ? 1 : 0)
     "
     [class.selected]="
diff --git a/projects/cps-ui-kit/src/lib/components/cps-select/cps-select.component.spec.ts b/projects/cps-ui-kit/src/lib/components/cps-select/cps-select.component.spec.ts
index 9aa6b936..f6bf1faf 100644
--- a/projects/cps-ui-kit/src/lib/components/cps-select/cps-select.component.spec.ts
+++ b/projects/cps-ui-kit/src/lib/components/cps-select/cps-select.component.spec.ts
@@ -191,19 +191,19 @@ describe('CpsSelectComponent', () => {
       expect(component.value).toContainEqual(OPTIONS[1]);
     });
 
-    it('isEmptyValue should return true for undefined', () => {
+    it('hasSelectedValue should return false for undefined', () => {
       component.writeValue(undefined);
-      expect(component.isEmptyValue()).toBe(true);
+      expect(component.hasSelectedValue()).toBe(false);
     });
 
-    it('isEmptyValue should return true for null', () => {
+    it('hasSelectedValue should return false for null', () => {
       component.writeValue(null);
-      expect(component.isEmptyValue()).toBe(true);
+      expect(component.hasSelectedValue()).toBe(false);
     });
 
-    it('isEmptyValue should return false for a valid object', () => {
+    it('hasSelectedValue should return true for a valid object', () => {
       component.writeValue(OPTIONS[0]);
-      expect(component.isEmptyValue()).toBe(false);
+      expect(component.hasSelectedValue()).toBe(true);
     });
   });
 
@@ -363,7 +363,7 @@ describe('CpsSelectComponent', () => {
       fixture.componentRef.setInput('openOnClear', false);
       component.clear();
       tick();
-      expect(component.isEmptyValue()).toBe(true);
+      expect(component.hasSelectedValue()).toBe(false);
     }));
 
     it('should clear multiple value when clear is called', fakeAsync(() => {
diff --git a/projects/cps-ui-kit/src/lib/components/cps-select/cps-select.component.ts b/projects/cps-ui-kit/src/lib/components/cps-select/cps-select.component.ts
index 4859abf7..5d266846 100644
--- a/projects/cps-ui-kit/src/lib/components/cps-select/cps-select.component.ts
+++ b/projects/cps-ui-kit/src/lib/components/cps-select/cps-select.component.ts
@@ -351,6 +351,7 @@ export class CpsSelectComponent
   isOpened = false;
   isActive = false;
   optionHighlightedIndex = -1;
+  isArrowNavigating = false;
 
   virtualScrollItemSizePx = DEFAULT_VIRTUAL_SCROLL_ITEM_SIZE_PX;
   virtualListHeightRem =
@@ -452,6 +453,7 @@ export class CpsSelectComponent
 
     setTimeout(() => {
       if (this.isOpened && this.options.length > 0) {
+        this._syncHighlightToValue();
         const selected =
           this.optionsList.nativeElement.querySelector('.selected');
         if (selected) {
@@ -460,15 +462,8 @@ export class CpsSelectComponent
             block: 'nearest',
             inline: 'center'
           });
-        } else if (this.virtualScroll && !this.isEmptyValue()) {
-          let v: any;
-          if (this.multiple) {
-            if (this.value.length > 0) {
-              v = this.value[0];
-            }
-          } else v = this.value;
-          const idx = this.options.findIndex((o) => isEqual(o, v));
-          if (idx >= 0) this.virtualList.scrollToIndex(idx);
+        } else if (this.virtualScroll && this.optionHighlightedIndex >= 0) {
+          this._scrollVirtualListToIndex(this.optionHighlightedIndex);
         }
       }
     });
@@ -537,6 +532,19 @@ export class CpsSelectComponent
 
   private _dehighlightOption() {
     this.optionHighlightedIndex = -1;
+    this.isArrowNavigating = false;
+  }
+
+  private _syncHighlightToValue(): void {
+    if (!this.hasSelectedValue()) return;
+
+    const firstSelected = this.multiple ? this.value[0] : this.value;
+    const idx = this.options.findIndex((o) =>
+      isEqual(this.returnObject ? o : o[this.optionValue], firstSelected)
+    );
+    if (idx < 0) return;
+
+    this.optionHighlightedIndex = idx + (this.isSelectAllVisible ? 1 : 0);
   }
 
   private _highlightOption(el: HTMLElement) {
@@ -557,6 +565,7 @@ export class CpsSelectComponent
 
     if (this.optionsAriaSetSize < 1) return;
 
+    this.isArrowNavigating = true;
     this.optionHighlightedIndex = this._nextHighlightIndex(
       up,
       this.optionsAriaSetSize
@@ -705,9 +714,7 @@ export class CpsSelectComponent
     event?.stopPropagation();
     event?.preventDefault();
 
-    const hadValue =
-      (!this.multiple && !this.isEmptyValue()) ||
-      (this.multiple && this.value?.length > 0);
+    const hadValue = this.hasSelectedValue();
 
     if (hadValue) {
       if (this.openOnClear) {
@@ -810,12 +817,14 @@ export class CpsSelectComponent
     return this.getOptionId(activeOption, optionIndex);
   }
 
-  isEmptyValue(): boolean {
+  hasSelectedValue(): boolean {
+    if (this.multiple) {
+      return this.value?.length > 0;
+    }
     return (
-      this.value === null ||
-      this.value === undefined ||
-      (typeof this.value === 'string' && this.value.trim() === '') ||
-      Number.isNaN(this.value)
+      this.value != null &&
+      !(typeof this.value === 'string' && this.value.trim() === '') &&
+      !Number.isNaN(this.value)
     );
   }
 
@@ -825,6 +834,7 @@ export class CpsSelectComponent
     const len = this.options.length;
     if (len < 1) return;
 
+    this.isArrowNavigating = true;
     this.optionHighlightedIndex = this._nextHighlightIndex(up, len);
     this._scrollVirtualListToIndex(this.optionHighlightedIndex);
   }

From 1555e2d3bb47bbd3eb6a7bcfd06cdb4b76604532 Mon Sep 17 00:00:00 2001
From: fateeand <andrei.fateev@absa.africa>
Date: Wed, 20 May 2026 11:53:04 +0200
Subject: [PATCH 11/15] exclude disabled components from tab order

---
 .../src/lib/components/cps-select/cps-select.component.html     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

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 9e912ba1..39e0b81e 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
@@ -20,7 +20,7 @@
   }
   <div
     class="cps-select-container"
-    tabindex="0"
+    [tabindex]="disabled ? -1 : 0"
     role="combobox"
     aria-haspopup="listbox"
     [attr.aria-expanded]="isOpened"

From 660d5e8c80de6489cba68adcff4c7ac86c666f0f Mon Sep 17 00:00:00 2001
From: fateeand <andrei.fateev@absa.africa>
Date: Wed, 20 May 2026 17:46:01 +0200
Subject: [PATCH 12/15] prevent autocomplete from losing focus on clearing
 value

---
 .../cps-autocomplete.component.scss           |  1 +
 .../cps-autocomplete.component.ts             | 27 +++++++++++++------
 2 files changed, 20 insertions(+), 8 deletions(-)

diff --git a/projects/cps-ui-kit/src/lib/components/cps-autocomplete/cps-autocomplete.component.scss b/projects/cps-ui-kit/src/lib/components/cps-autocomplete/cps-autocomplete.component.scss
index bd38ecd0..664aae00 100644
--- a/projects/cps-ui-kit/src/lib/components/cps-autocomplete/cps-autocomplete.component.scss
+++ b/projects/cps-ui-kit/src/lib/components/cps-autocomplete/cps-autocomplete.component.scss
@@ -141,6 +141,7 @@ $hover-transition-duration: 0.2s;
         outline: none;
         font-family: inherit;
         &::placeholder {
+          user-select: none;
           color: $autocomplete-placeholder-color;
           font-style: italic;
           opacity: 1; /* Firefox */
diff --git a/projects/cps-ui-kit/src/lib/components/cps-autocomplete/cps-autocomplete.component.ts b/projects/cps-ui-kit/src/lib/components/cps-autocomplete/cps-autocomplete.component.ts
index 0e25f501..d6134dff 100644
--- a/projects/cps-ui-kit/src/lib/components/cps-autocomplete/cps-autocomplete.component.ts
+++ b/projects/cps-ui-kit/src/lib/components/cps-autocomplete/cps-autocomplete.component.ts
@@ -753,14 +753,18 @@ export class CpsAutocompleteComponent
   }
 
   onBoxClick() {
+    const wasOpened = this.isOpened;
     if (!this.multiple) {
       this.activeSingle = true;
       if (!this.inputText) this.inputText = this._getValueLabel();
-      if (!this.isOpened) this.filteredOptions = this.options;
+      if (!wasOpened) this.filteredOptions = this.options;
     }
     this._dehighlightOption();
     setTimeout(() => {
-      this.focus();
+      this.focusInput();
+      if (!wasOpened) {
+        this._toggleOptions(true);
+      }
     });
   }
 
@@ -832,7 +836,7 @@ export class CpsAutocompleteComponent
   }
 
   focusInput() {
-    this.autocompleteContainer?.nativeElement?.querySelector('input')?.focus();
+    this.autocompleteInput?.nativeElement?.focus();
   }
 
   focus() {
@@ -1168,12 +1172,19 @@ export class CpsAutocompleteComponent
         this._closeAndClear();
         return;
       }
-      // Only reset the value if the user actively edited the input to empty
-      if (this.activeSingle && this.inputText !== this._getValueLabel()) {
-        this.updateValue(this._getEmptyValue());
+      const shouldUpdateValue =
+        this.activeSingle && this.inputText !== this._getValueLabel();
+      this.clearInput();
+      this._dehighlightOption();
+      if (shouldUpdateValue) {
+        setTimeout(() => {
+          this.updateValue(this._getEmptyValue());
+          if (needFocusInput) {
+            this.cdRef.detectChanges();
+            this.focusInput();
+          }
+        }, 0);
       }
-      this.cdRef.detectChanges();
-      this._closeAndClear();
       return;
     }
 

From 941b3b78804a4182cd3e510f2ee416d21eabe6b7 Mon Sep 17 00:00:00 2001
From: fateeand <andrei.fateev@absa.africa>
Date: Thu, 21 May 2026 16:27:58 +0200
Subject: [PATCH 13/15] fix uts

---
 .../cps-button-toggle.component.spec.ts       | 38 ++++++++++++-------
 1 file changed, 24 insertions(+), 14 deletions(-)

diff --git a/projects/cps-ui-kit/src/lib/components/cps-button-toggle/cps-button-toggle.component.spec.ts b/projects/cps-ui-kit/src/lib/components/cps-button-toggle/cps-button-toggle.component.spec.ts
index 5abe137d..2c3858f1 100644
--- a/projects/cps-ui-kit/src/lib/components/cps-button-toggle/cps-button-toggle.component.spec.ts
+++ b/projects/cps-ui-kit/src/lib/components/cps-button-toggle/cps-button-toggle.component.spec.ts
@@ -35,6 +35,7 @@ describe('CpsButtonToggleComponent', () => {
 
     fixture = TestBed.createComponent(CpsButtonToggleComponent);
     component = fixture.componentInstance;
+    fixture.componentRef.setInput('ariaLabel', 'Toggle group');
     fixture.componentRef.setInput('options', OPTIONS);
     fixture.detectChanges();
   });
@@ -49,19 +50,22 @@ describe('CpsButtonToggleComponent', () => {
 
   describe('default values', () => {
     it('should have correct default input values', () => {
-      expect(component.label).toBe('');
-      expect(component.ariaLabel).toBe('');
-      expect(component.multiple).toBe(false);
-      expect(component.disabled).toBe(false);
-      expect(component.mandatory).toBe(true);
-      expect(component.equalWidths).toBe(true);
-      expect(component.optionTooltipPosition).toBe('bottom');
-      expect(component.infoTooltip).toBe('');
-      expect(component.infoTooltipClass).toBe('cps-tooltip-content');
-      expect(component.infoTooltipMaxWidth).toBe('100%');
-      expect(component.infoTooltipPersistent).toBe(false);
-      expect(component.infoTooltipPosition).toBe('top');
-      expect(component.value).toBeUndefined();
+      const defaultComponent = TestBed.createComponent(
+        CpsButtonToggleComponent
+      ).componentInstance;
+      expect(defaultComponent.label).toBe('');
+      expect(defaultComponent.ariaLabel).toBe('');
+      expect(defaultComponent.multiple).toBe(false);
+      expect(defaultComponent.disabled).toBe(false);
+      expect(defaultComponent.mandatory).toBe(true);
+      expect(defaultComponent.equalWidths).toBe(true);
+      expect(defaultComponent.optionTooltipPosition).toBe('bottom');
+      expect(defaultComponent.infoTooltip).toBe('');
+      expect(defaultComponent.infoTooltipClass).toBe('cps-tooltip-content');
+      expect(defaultComponent.infoTooltipMaxWidth).toBe('100%');
+      expect(defaultComponent.infoTooltipPersistent).toBe(false);
+      expect(defaultComponent.infoTooltipPosition).toBe('top');
+      expect(defaultComponent.value).toBeUndefined();
     });
   });
 
@@ -106,6 +110,7 @@ describe('CpsButtonToggleComponent', () => {
 
     it('should fall back to label for role=group aria-label when ariaLabel is empty', () => {
       fixture.componentRef.setInput('label', 'My Label');
+      fixture.componentRef.setInput('ariaLabel', '');
       fixture.detectChanges();
       const group = fixture.nativeElement.querySelector('[role="group"]');
       expect(group.getAttribute('aria-label')).toBe('My Label');
@@ -245,6 +250,7 @@ describe('CpsButtonToggleComponent', () => {
 
     it('should initialize value to [] when multiple is true and no value is set', () => {
       const newFixture = TestBed.createComponent(CpsButtonToggleComponent);
+      newFixture.componentRef.setInput('ariaLabel', 'Toggle group');
       newFixture.componentRef.setInput('multiple', true);
       newFixture.componentRef.setInput('options', OPTIONS);
       newFixture.detectChanges();
@@ -283,9 +289,10 @@ describe('CpsButtonToggleComponent', () => {
       const consoleSpy = jest
         .spyOn(console, 'error')
         .mockImplementation(() => {});
+      component.ariaLabel = '';
       component.ngOnChanges({
         label: new SimpleChange('My Label', '', false),
-        ariaLabel: new SimpleChange('', '', false)
+        ariaLabel: new SimpleChange('Toggle group', '', false)
       });
       expect(consoleSpy).toHaveBeenCalledWith(
         expect.stringContaining('ariaLabel')
@@ -297,6 +304,7 @@ describe('CpsButtonToggleComponent', () => {
       const consoleSpy = jest
         .spyOn(console, 'error')
         .mockImplementation(() => {});
+      component.ariaLabel = '';
       fixture.componentRef.setInput('label', 'My Label');
       fixture.detectChanges();
       expect(consoleSpy).not.toHaveBeenCalled();
@@ -332,6 +340,7 @@ describe('CpsButtonToggleComponent', () => {
       const consoleSpy = jest
         .spyOn(console, 'error')
         .mockImplementation(() => {});
+      component.label = 'Toggle';
       const goodOptions = [{ value: 'x', label: 'X' }];
       component.options = goodOptions;
       component.ngOnChanges({
@@ -345,6 +354,7 @@ describe('CpsButtonToggleComponent', () => {
       const consoleSpy = jest
         .spyOn(console, 'error')
         .mockImplementation(() => {});
+      component.label = 'Toggle';
       const ariaOptions = [{ value: 'x', ariaLabel: 'X' }];
       component.options = ariaOptions;
       component.ngOnChanges({

From 023b2b0682cb154daea6518fa8181b50f20efee4 Mon Sep 17 00:00:00 2001
From: fateeand <andrei.fateev@absa.africa>
Date: Thu, 21 May 2026 16:43:33 +0200
Subject: [PATCH 14/15] integrate root font size service

---
 .../cps-autocomplete.component.ts             |  3 +-
 .../cps-select/cps-select.component.html      |  4 +--
 .../cps-select/cps-select.component.ts        | 29 ++++++++-----------
 .../cps-tooltip/cps-tooltip.directive.ts      |  2 +-
 .../cps-dialog/cps-dialog.component.ts        |  2 +-
 5 files changed, 18 insertions(+), 22 deletions(-)

diff --git a/projects/cps-ui-kit/src/lib/components/cps-autocomplete/cps-autocomplete.component.ts b/projects/cps-ui-kit/src/lib/components/cps-autocomplete/cps-autocomplete.component.ts
index 9194fb7a..24b3ab7c 100644
--- a/projects/cps-ui-kit/src/lib/components/cps-autocomplete/cps-autocomplete.component.ts
+++ b/projects/cps-ui-kit/src/lib/components/cps-autocomplete/cps-autocomplete.component.ts
@@ -431,7 +431,7 @@ export class CpsAutocompleteComponent
 
   readonly virtualScrollItemSizePx = computed(
     () =>
-      (this._cpsRootFontSizeService?.fontSize() ?? 16) *
+      (this._cpsRootFontSizeService?.fontSize() || 16) *
       VIRTUAL_SCROLL_ITEM_SIZE_REM
   );
 
@@ -479,6 +479,7 @@ export class CpsAutocompleteComponent
   ngOnInit() {
     this.virtualListHeightRem =
       VIRTUAL_SCROLL_ITEM_SIZE_REM * VIRTUAL_SCROLL_MAX_VISIBLE_ITEMS;
+    this.cvtWidth = convertSize(this.width);
     if (this.multiple && !this._value) {
       this._value = [];
     }
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 39e0b81e..a67c9f09 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
@@ -161,7 +161,7 @@
         aria-orientation="vertical"
         [attr.aria-multiselectable]="!!multiple"
         class="cps-select-options"
-        [style.width.rem]="selectBoxWidthRem">
+        [style.width.px]="selectBoxWidthPx">
         @if (!virtualScroll) {
           @if (multiple && selectAll && options.length > 1) {
             <div
@@ -206,7 +206,7 @@
             [delay]="0"
             [scrollHeight]="virtualListHeightRem + 'rem'"
             [options]="{ numToleratedItems: numToleratedItems }"
-            [itemSize]="virtualScrollItemSizePx">
+            [itemSize]="virtualScrollItemSizePx()">
             <ng-template pTemplate="item" let-item let-options="options">
               <ng-container
                 *ngTemplateOutlet="
diff --git a/projects/cps-ui-kit/src/lib/components/cps-select/cps-select.component.ts b/projects/cps-ui-kit/src/lib/components/cps-select/cps-select.component.ts
index 5d266846..9cdbbf05 100644
--- a/projects/cps-ui-kit/src/lib/components/cps-select/cps-select.component.ts
+++ b/projects/cps-ui-kit/src/lib/components/cps-select/cps-select.component.ts
@@ -2,6 +2,7 @@ import { CommonModule } from '@angular/common';
 import {
   AfterViewInit,
   Component,
+  computed,
   ElementRef,
   EventEmitter,
   inject,
@@ -53,7 +54,6 @@ import { Scroller, ScrollerModule } from 'primeng/scroller';
  */
 export type CpsSelectAppearanceType = 'outlined' | 'underlined' | 'borderless';
 
-const DEFAULT_VIRTUAL_SCROLL_ITEM_SIZE_PX = 44;
 const VIRTUAL_SCROLL_ITEM_SIZE_REM = 2.75;
 const VIRTUAL_SCROLL_MAX_VISIBLE_ITEMS = 5.5;
 
@@ -353,17 +353,19 @@ export class CpsSelectComponent
   optionHighlightedIndex = -1;
   isArrowNavigating = false;
 
-  virtualScrollItemSizePx = DEFAULT_VIRTUAL_SCROLL_ITEM_SIZE_PX;
+  readonly virtualScrollItemSizePx = computed(
+    () =>
+      (this._cpsRootFontSizeService?.fontSize() || 16) *
+      VIRTUAL_SCROLL_ITEM_SIZE_REM
+  );
+
   virtualListHeightRem =
     VIRTUAL_SCROLL_ITEM_SIZE_REM * VIRTUAL_SCROLL_MAX_VISIBLE_ITEMS;
 
-  selectBoxWidthRem = 0;
+  selectBoxWidthPx = 0;
   resizeObserver: ResizeObserver;
 
   private readonly _cpsRootFontSizeService = inject(CPS_ROOT_FONT_SIZE_SERVICE);
-  private get _rootFontSizePx(): number {
-    return this._cpsRootFontSizeService?.fontSize() ?? 16;
-  }
 
   readonly optionsListId = generateUniqueId('cps-select-options-list');
   readonly selectAllOptionId = generateUniqueId('cps-select-option-select-all');
@@ -377,16 +379,12 @@ export class CpsSelectComponent
     this.resizeObserver = new ResizeObserver((entries) => {
       entries.forEach((entry) => {
         if (entry?.target)
-          this.selectBoxWidthRem = this._pxToRem(
-            (entry.target as any).offsetWidth
-          );
+          this.selectBoxWidthPx = (entry.target as any).offsetWidth;
       });
     });
   }
 
   ngOnInit() {
-    this.virtualScrollItemSizePx =
-      this._rootFontSizePx * VIRTUAL_SCROLL_ITEM_SIZE_REM;
     this.virtualListHeightRem =
       VIRTUAL_SCROLL_ITEM_SIZE_REM * VIRTUAL_SCROLL_MAX_VISIBLE_ITEMS;
     this.cvtWidth = convertSize(this.width);
@@ -475,6 +473,7 @@ export class CpsSelectComponent
     this.virtualListHeightRem =
       VIRTUAL_SCROLL_ITEM_SIZE_REM *
       Math.min(currentLen, VIRTUAL_SCROLL_MAX_VISIBLE_ITEMS);
+    this.virtualList?.setSpacerSize();
   }
 
   select(option: any, byValue: boolean): void {
@@ -859,8 +858,8 @@ export class CpsSelectComponent
       return;
     }
 
-    const itemTop = index * this.virtualScrollItemSizePx;
-    const itemBottom = itemTop + this.virtualScrollItemSizePx;
+    const itemTop = index * this.virtualScrollItemSizePx();
+    const itemBottom = itemTop + this.virtualScrollItemSizePx();
 
     const viewportTop = scrollerEl.scrollTop;
     const viewportBottom = viewportTop + scrollerEl.clientHeight;
@@ -880,8 +879,4 @@ export class CpsSelectComponent
     );
     scrollerEl.scrollTop = Math.min(Math.max(0, nextTop), maxTop);
   }
-
-  private _pxToRem(px: number): number {
-    return px / this._rootFontSizePx;
-  }
 }
diff --git a/projects/cps-ui-kit/src/lib/directives/cps-tooltip/cps-tooltip.directive.ts b/projects/cps-ui-kit/src/lib/directives/cps-tooltip/cps-tooltip.directive.ts
index ac3e3834..0e11bf32 100644
--- a/projects/cps-ui-kit/src/lib/directives/cps-tooltip/cps-tooltip.directive.ts
+++ b/projects/cps-ui-kit/src/lib/directives/cps-tooltip/cps-tooltip.directive.ts
@@ -121,7 +121,7 @@ export class CpsTooltipDirective implements OnDestroy {
 
   private readonly _cpsRootFontSizeService = inject(CPS_ROOT_FONT_SIZE_SERVICE);
   private get _rootFontSizePx(): number {
-    return this._cpsRootFontSizeService?.fontSize() ?? 16;
+    return this._cpsRootFontSizeService?.fontSize() || 16;
   }
 
   private _elementRef = inject(ElementRef<HTMLElement>);
diff --git a/projects/cps-ui-kit/src/lib/services/cps-dialog/internal/components/cps-dialog/cps-dialog.component.ts b/projects/cps-ui-kit/src/lib/services/cps-dialog/internal/components/cps-dialog/cps-dialog.component.ts
index 21644770..6ab640a5 100644
--- a/projects/cps-ui-kit/src/lib/services/cps-dialog/internal/components/cps-dialog/cps-dialog.component.ts
+++ b/projects/cps-ui-kit/src/lib/services/cps-dialog/internal/components/cps-dialog/cps-dialog.component.ts
@@ -145,7 +145,7 @@ export class CpsDialogComponent implements OnInit, AfterViewInit, OnDestroy {
   private readonly _cpsFocusService = inject(CPS_FOCUS_SERVICE);
   private readonly _cpsRootFontSizeService = inject(CPS_ROOT_FONT_SIZE_SERVICE);
   private get _rootFontSizePx(): number {
-    return this._cpsRootFontSizeService?.fontSize() ?? 16;
+    return this._cpsRootFontSizeService?.fontSize() || 16;
   }
 
   get ariaLabel(): string | null {

From af6bda265e43e4d2053e743cec60972a01ec4324 Mon Sep 17 00:00:00 2001
From: fateeand <andrei.fateev@absa.africa>
Date: Thu, 21 May 2026 17:29:51 +0200
Subject: [PATCH 15/15] add focus ring

---
 .../lib/components/cps-select/cps-select.component.scss   | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/projects/cps-ui-kit/src/lib/components/cps-select/cps-select.component.scss b/projects/cps-ui-kit/src/lib/components/cps-select/cps-select.component.scss
index 5c2399ac..7b8ab99a 100644
--- a/projects/cps-ui-kit/src/lib/components/cps-select/cps-select.component.scss
+++ b/projects/cps-ui-kit/src/lib/components/cps-select/cps-select.component.scss
@@ -83,6 +83,14 @@ $hover-transition-duration: 0.2s;
           }
         }
       }
+
+      &:focus-visible {
+        @include focus-ring(0, -0.0625rem, 0.25rem);
+        &::before,
+        &::after {
+          pointer-events: none;
+        }
+      }
     }
 
     .cps-select-label {