From a390e0dde683c7512c9d5782fabe3223dc2117f3 Mon Sep 17 00:00:00 2001
From: fateeand <andrei.fateev@absa.africa>
Date: Thu, 4 Jun 2026 17:47:18 +0200
Subject: [PATCH 1/4] first iteration

---
 playwright/cps-accessibility.spec.ts          |  2 +-
 .../switch-page/switch-page.component.html    |  2 +-
 .../switch-page/switch-page.component.scss    |  4 +--
 .../cps-checkbox/cps-checkbox.component.html  |  1 +
 .../cps-checkbox/cps-checkbox.component.ts    | 11 +++---
 .../cps-switch/cps-switch.component.html      |  7 ++--
 .../cps-switch/cps-switch.component.ts        | 34 +++++++++++++++----
 7 files changed, 44 insertions(+), 17 deletions(-)

diff --git a/playwright/cps-accessibility.spec.ts b/playwright/cps-accessibility.spec.ts
index 9f00a9eb4..630505f59 100644
--- a/playwright/cps-accessibility.spec.ts
+++ b/playwright/cps-accessibility.spec.ts
@@ -188,7 +188,7 @@ const components: ComponentEntry[] = [
     name: 'Sidebar menu',
     selector: 'cps-sidebar-menu'
   },
-  // { route: '/switch', name: 'Switch', selector: 'cps-switch' },
+  { route: '/switch', name: 'Switch', selector: 'cps-switch' },
   {
     route: '/tab-group',
     name: 'Tabs',
diff --git a/projects/composition/src/app/pages/switch-page/switch-page.component.html b/projects/composition/src/app/pages/switch-page/switch-page.component.html
index ec27ca5d8..312d4c072 100644
--- a/projects/composition/src/app/pages/switch-page/switch-page.component.html
+++ b/projects/composition/src/app/pages/switch-page/switch-page.component.html
@@ -7,7 +7,7 @@
       infoTooltip="Provide any information here">
     </cps-switch>
     <cps-switch label="Basic switch" [value]="true"></cps-switch>
-    <cps-switch [value]="true"></cps-switch>
+    <cps-switch ariaLabel="Unlabeled switch" [value]="true"></cps-switch>
     <cps-switch
       label="Disabled switch checked"
       [disabled]="true"
diff --git a/projects/composition/src/app/pages/switch-page/switch-page.component.scss b/projects/composition/src/app/pages/switch-page/switch-page.component.scss
index 3fae70805..e3ee78c14 100644
--- a/projects/composition/src/app/pages/switch-page/switch-page.component.scss
+++ b/projects/composition/src/app/pages/switch-page/switch-page.component.scss
@@ -1,11 +1,11 @@
 .switches-group {
-  gap: 32px;
+  gap: 2rem;
   display: flex;
   flex-direction: column;
 }
 
 .sync-val-example {
   .sync-val {
-    margin-top: 16px;
+    margin-top: 1rem;
   }
 }
diff --git a/projects/cps-ui-kit/src/lib/components/cps-checkbox/cps-checkbox.component.html b/projects/cps-ui-kit/src/lib/components/cps-checkbox/cps-checkbox.component.html
index 168b981f7..a16d88012 100644
--- a/projects/cps-ui-kit/src/lib/components/cps-checkbox/cps-checkbox.component.html
+++ b/projects/cps-ui-kit/src/lib/components/cps-checkbox/cps-checkbox.component.html
@@ -1,6 +1,7 @@
 <div class="cps-checkbox-container">
   <label class="cps-checkbox" [class.cps-checkbox-disabled]="disabled">
     <input
+      #checkboxInput
       type="checkbox"
       class="cps-checkbox-input"
       [disabled]="disabled"
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 7a2d847ef..9071d1605 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,7 +9,8 @@ import {
   OnInit,
   Optional,
   Output,
-  Self
+  Self,
+  ViewChild
 } from '@angular/core';
 import { ControlValueAccessor, NgControl } from '@angular/forms';
 import { CpsInfoCircleComponent } from '../cps-info-circle/cps-info-circle.component';
@@ -114,10 +115,12 @@ export class CpsCheckboxComponent
 
   private _value = false;
 
+  @ViewChild('checkboxInput')
+  checkboxInput!: ElementRef;
+
   constructor(
     @Self() @Optional() private _control: NgControl,
-    @Inject(DOCUMENT) private document: Document,
-    private _elementRef: ElementRef<HTMLElement>
+    @Inject(DOCUMENT) private document: Document
   ) {
     if (this._control) {
       this._control.valueAccessor = this;
@@ -175,6 +178,6 @@ export class CpsCheckboxComponent
   setDisabledState(_disabled: boolean) {}
 
   focus() {
-    this._elementRef?.nativeElement?.querySelector('input')?.focus();
+    this.checkboxInput?.nativeElement?.focus();
   }
 }
diff --git a/projects/cps-ui-kit/src/lib/components/cps-switch/cps-switch.component.html b/projects/cps-ui-kit/src/lib/components/cps-switch/cps-switch.component.html
index 909eefa8d..c9c94b7ca 100644
--- a/projects/cps-ui-kit/src/lib/components/cps-switch/cps-switch.component.html
+++ b/projects/cps-ui-kit/src/lib/components/cps-switch/cps-switch.component.html
@@ -1,11 +1,14 @@
 <div class="cps-switch-container">
   <label class="cps-switch">
     <input
+      #switchInput
       type="checkbox"
+      role="switch"
       [disabled]="disabled"
       [checked]="value"
-      (change)="updateValueEvent($event)" />
-    <span class="cps-switch-slider"></span>
+      (change)="updateValueEvent($event)"
+      [attr.aria-label]="ariaLabel || label || null" />
+    <span class="cps-switch-slider" aria-hidden="true"></span>
   </label>
   @if (label) {
     <span
diff --git a/projects/cps-ui-kit/src/lib/components/cps-switch/cps-switch.component.ts b/projects/cps-ui-kit/src/lib/components/cps-switch/cps-switch.component.ts
index d25cbddcf..5948e3dce 100644
--- a/projects/cps-ui-kit/src/lib/components/cps-switch/cps-switch.component.ts
+++ b/projects/cps-ui-kit/src/lib/components/cps-switch/cps-switch.component.ts
@@ -4,13 +4,17 @@ import {
   ElementRef,
   EventEmitter,
   Input,
+  OnChanges,
+  OnInit,
   Optional,
   Output,
-  Self
+  Self,
+  ViewChild
 } from '@angular/core';
 import { ControlValueAccessor, NgControl } from '@angular/forms';
 import { CpsInfoCircleComponent } from '../cps-info-circle/cps-info-circle.component';
 import { CpsTooltipPosition } from '../../directives/cps-tooltip/cps-tooltip.directive';
+import { logMissingAriaLabelError } from '../../utils/internal/accessibility-utils';
 
 /**
  * CpsSwitchComponent is a component used to toggle a boolean value.
@@ -22,13 +26,21 @@ import { CpsTooltipPosition } from '../../directives/cps-tooltip/cps-tooltip.dir
   templateUrl: './cps-switch.component.html',
   styleUrls: ['./cps-switch.component.scss']
 })
-export class CpsSwitchComponent implements ControlValueAccessor {
+export class CpsSwitchComponent
+  implements OnInit, OnChanges, ControlValueAccessor
+{
   /**
    * Label of the component.
    * @group Props
    */
   @Input() label = '';
 
+  /**
+   * Aria label for the component, used for accessibility, it takes precedence over label.
+   * @group Props
+   */
+  @Input() ariaLabel = '';
+
   /**
    * Determines whether the component is disabled.
    * @group Props
@@ -88,15 +100,23 @@ export class CpsSwitchComponent implements ControlValueAccessor {
 
   private _value = false;
 
-  constructor(
-    @Self() @Optional() private _control: NgControl,
-    private _elementRef: ElementRef<HTMLElement>
-  ) {
+  @ViewChild('switchInput')
+  switchInput!: ElementRef;
+
+  constructor(@Self() @Optional() private _control: NgControl) {
     if (this._control) {
       this._control.valueAccessor = this;
     }
   }
 
+  ngOnInit(): void {
+    logMissingAriaLabelError('CpsSwitchComponent', this.label, this.ariaLabel);
+  }
+
+  ngOnChanges(): void {
+    logMissingAriaLabelError('CpsSwitchComponent', this.label, this.ariaLabel);
+  }
+
   // eslint-disable-next-line @typescript-eslint/no-empty-function
   onChange = (_event: any) => {};
 
@@ -131,6 +151,6 @@ export class CpsSwitchComponent implements ControlValueAccessor {
   setDisabledState(_disabled: boolean) {}
 
   focus() {
-    this._elementRef?.nativeElement?.querySelector('input')?.focus();
+    this.switchInput?.nativeElement?.focus();
   }
 }

From 5a08f01913904adf971fa29ec48d0b81a8dfd3de Mon Sep 17 00:00:00 2001
From: fateeand <andrei.fateev@absa.africa>
Date: Thu, 4 Jun 2026 17:49:41 +0200
Subject: [PATCH 2/4] convert to rem

---
 .../cps-switch/cps-switch.component.scss      | 32 +++++++++----------
 1 file changed, 16 insertions(+), 16 deletions(-)

diff --git a/projects/cps-ui-kit/src/lib/components/cps-switch/cps-switch.component.scss b/projects/cps-ui-kit/src/lib/components/cps-switch/cps-switch.component.scss
index 07dbb16de..2a1723139 100644
--- a/projects/cps-ui-kit/src/lib/components/cps-switch/cps-switch.component.scss
+++ b/projects/cps-ui-kit/src/lib/components/cps-switch/cps-switch.component.scss
@@ -16,8 +16,8 @@
     .cps-switch {
       position: relative;
       display: inline-block;
-      width: 48px;
-      height: 24px;
+      width: 3rem;
+      height: 1.5rem;
     }
 
     .cps-switch input {
@@ -35,16 +35,16 @@
       bottom: 0;
       background-color: white;
       transition: $transition-time;
-      border: 1px solid $color-calm;
-      border-radius: 30px;
+      border: 0.0625rem solid $color-calm;
+      border-radius: 1.875rem;
     }
 
     .cps-switch-label {
-      font-size: 16px;
+      font-size: 1rem;
       font-family: 'Source Sans Pro', sans-serif;
       font-style: normal;
       color: $label-color;
-      margin-left: 10px;
+      margin-left: 0.625rem;
       cursor: default;
     }
     .cps-switch-label-disabled {
@@ -54,11 +54,11 @@
     .cps-switch-slider:before {
       position: absolute;
       content: '';
-      height: 14px;
-      width: 14px;
-      border-radius: 20px;
-      left: 4px;
-      bottom: 4px;
+      height: 0.875rem;
+      width: 0.875rem;
+      border-radius: 1.25rem;
+      left: 0.25rem;
+      bottom: 0.25rem;
       background-color: $color-calm;
       transition: $transition-time;
     }
@@ -68,11 +68,11 @@
     }
 
     input:focus + .cps-switch-slider {
-      box-shadow: 0 0 1px $color-calm;
+      box-shadow: 0 0 0.0625rem $color-calm;
     }
 
     input:checked + .cps-switch-slider:before {
-      transform: translateX(24px);
+      transform: translateX(1.5rem);
       background-color: white;
     }
 
@@ -90,11 +90,11 @@
     }
 
     .cps-switch-info-circle {
-      margin-left: 8px;
+      margin-left: 0.5rem;
       ::ng-deep cps-icon {
         i {
-          width: 14px;
-          height: 14px;
+          width: 0.875rem;
+          height: 0.875rem;
         }
       }
     }

From 55cb85ef82358eb1f3853ad1ee4d0fc9d78e5520 Mon Sep 17 00:00:00 2001
From: Andrei Fateev <fateeand@gmail.com>
Date: Fri, 5 Jun 2026 11:44:19 +0200
Subject: [PATCH 3/4] polishing

---
 .../src/app/api-data/cps-switch.json          | 12 +++++-
 .../switch-page/switch-page.component.scss    |  1 +
 .../cps-switch/cps-switch.component.scss      | 18 +++++---
 .../cps-switch/cps-switch.component.spec.ts   | 41 ++++++++++++++++---
 .../cps-switch/cps-switch.component.ts        |  6 +--
 5 files changed, 62 insertions(+), 16 deletions(-)

diff --git a/projects/composition/src/app/api-data/cps-switch.json b/projects/composition/src/app/api-data/cps-switch.json
index a2053f90a..54122d361 100644
--- a/projects/composition/src/app/api-data/cps-switch.json
+++ b/projects/composition/src/app/api-data/cps-switch.json
@@ -11,7 +11,15 @@
                         "readonly": false,
                         "type": "string",
                         "default": "",
-                        "description": "Label of the component."
+                        "description": "Label of the switch component."
+                    },
+                    {
+                        "name": "ariaLabel",
+                        "optional": false,
+                        "readonly": false,
+                        "type": "string",
+                        "default": "",
+                        "description": "Aria label for the switch component, used for accessibility, it takes precedence over label."
                     },
                     {
                         "name": "disabled",
@@ -19,7 +27,7 @@
                         "readonly": false,
                         "type": "boolean",
                         "default": "false",
-                        "description": "Determines whether the component is disabled."
+                        "description": "Determines whether the switch component is disabled."
                     },
                     {
                         "name": "infoTooltip",
diff --git a/projects/composition/src/app/pages/switch-page/switch-page.component.scss b/projects/composition/src/app/pages/switch-page/switch-page.component.scss
index e3ee78c14..7aaff7fa2 100644
--- a/projects/composition/src/app/pages/switch-page/switch-page.component.scss
+++ b/projects/composition/src/app/pages/switch-page/switch-page.component.scss
@@ -2,6 +2,7 @@
   gap: 2rem;
   display: flex;
   flex-direction: column;
+  margin-left: 0.5rem;
 }
 
 .sync-val-example {
diff --git a/projects/cps-ui-kit/src/lib/components/cps-switch/cps-switch.component.scss b/projects/cps-ui-kit/src/lib/components/cps-switch/cps-switch.component.scss
index 2a1723139..afa31ab29 100644
--- a/projects/cps-ui-kit/src/lib/components/cps-switch/cps-switch.component.scss
+++ b/projects/cps-ui-kit/src/lib/components/cps-switch/cps-switch.component.scss
@@ -1,8 +1,10 @@
+@use '../../../../styles/mixins' as *;
+
 :host {
   $color-calm: var(--cps-color-calm);
   $label-color: var(--cps-color-text-dark);
-  $disabled-label-color: var(--cps-color-text-light);
-  $disabled-slider-color: var(--cps-color-text-lightest);
+  $disabled-label-color: var(--cps-color-text-mild);
+  $disabled-slider-color: var(--cps-color-text-light);
   $transition-time: 0.2s;
 
   min-width: max-content;
@@ -22,8 +24,12 @@
 
     .cps-switch input {
       opacity: 0;
-      width: 0;
-      height: 0;
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      margin: 0;
     }
 
     .cps-switch-slider {
@@ -67,8 +73,8 @@
       background-color: $color-calm;
     }
 
-    input:focus + .cps-switch-slider {
-      box-shadow: 0 0 0.0625rem $color-calm;
+    .cps-switch:has(input:focus-visible) {
+      @include focus-ring(0.1875rem, 0.25rem, 1.875rem);
     }
 
     input:checked + .cps-switch-slider:before {
diff --git a/projects/cps-ui-kit/src/lib/components/cps-switch/cps-switch.component.spec.ts b/projects/cps-ui-kit/src/lib/components/cps-switch/cps-switch.component.spec.ts
index c47e8fe84..b1d3425df 100644
--- a/projects/cps-ui-kit/src/lib/components/cps-switch/cps-switch.component.spec.ts
+++ b/projects/cps-ui-kit/src/lib/components/cps-switch/cps-switch.component.spec.ts
@@ -13,6 +13,7 @@ describe('CpsSwitchComponent', () => {
 
     fixture = TestBed.createComponent(CpsSwitchComponent);
     component = fixture.componentInstance;
+    fixture.componentRef.setInput('ariaLabel', 'Toggle switch');
     fixture.detectChanges();
   });
 
@@ -104,14 +105,14 @@ describe('CpsSwitchComponent', () => {
 
   it('should have disabled class when disabled', () => {
     fixture.componentRef.setInput('disabled', true);
+    fixture.componentRef.setInput('label', 'My Switch');
     fixture.detectChanges();
     const switchLabel =
       fixture.nativeElement.querySelector('.cps-switch-label');
-    if (switchLabel) {
-      expect(switchLabel.classList.contains('cps-switch-label-disabled')).toBe(
-        true
-      );
-    }
+    expect(switchLabel).toBeTruthy();
+    expect(switchLabel.classList.contains('cps-switch-label-disabled')).toBe(
+      true
+    );
     const input = fixture.nativeElement.querySelector('input');
     expect(input.disabled).toBe(true);
   });
@@ -134,4 +135,34 @@ describe('CpsSwitchComponent', () => {
     switchEl.click();
     expect(component.value).toBe(false);
   });
+
+  describe('accessibility', () => {
+    it('should have role="switch" on the input', () => {
+      const input = fixture.nativeElement.querySelector('input');
+      expect(input.getAttribute('role')).toBe('switch');
+    });
+
+    it('should set aria-label from ariaLabel input', () => {
+      fixture.componentRef.setInput('ariaLabel', 'Custom aria');
+      fixture.detectChanges();
+      const input = fixture.nativeElement.querySelector('input');
+      expect(input.getAttribute('aria-label')).toBe('Custom aria');
+    });
+
+    it('should fall back aria-label to label when ariaLabel is not set', () => {
+      fixture.componentRef.setInput('ariaLabel', '');
+      fixture.componentRef.setInput('label', 'Enable Feature');
+      fixture.detectChanges();
+      const input = fixture.nativeElement.querySelector('input');
+      expect(input.getAttribute('aria-label')).toBe('Enable Feature');
+    });
+
+    it('should give ariaLabel precedence over label', () => {
+      fixture.componentRef.setInput('ariaLabel', 'aria wins');
+      fixture.componentRef.setInput('label', 'label loses');
+      fixture.detectChanges();
+      const input = fixture.nativeElement.querySelector('input');
+      expect(input.getAttribute('aria-label')).toBe('aria wins');
+    });
+  });
 });
diff --git a/projects/cps-ui-kit/src/lib/components/cps-switch/cps-switch.component.ts b/projects/cps-ui-kit/src/lib/components/cps-switch/cps-switch.component.ts
index 5948e3dce..789fd06aa 100644
--- a/projects/cps-ui-kit/src/lib/components/cps-switch/cps-switch.component.ts
+++ b/projects/cps-ui-kit/src/lib/components/cps-switch/cps-switch.component.ts
@@ -30,19 +30,19 @@ export class CpsSwitchComponent
   implements OnInit, OnChanges, ControlValueAccessor
 {
   /**
-   * Label of the component.
+   * Label of the switch component.
    * @group Props
    */
   @Input() label = '';
 
   /**
-   * Aria label for the component, used for accessibility, it takes precedence over label.
+   * Aria label for the switch component, used for accessibility, it takes precedence over label.
    * @group Props
    */
   @Input() ariaLabel = '';
 
   /**
-   * Determines whether the component is disabled.
+   * Determines whether the switch component is disabled.
    * @group Props
    */
   @Input() disabled = false;

From 602acdca649e2a7ac9bdb9112343d3d61b40f617 Mon Sep 17 00:00:00 2001
From: Andrei Fateev <fateeand@gmail.com>
Date: Tue, 9 Jun 2026 18:51:01 +0200
Subject: [PATCH 4/4] address feedback

---
 .../src/lib/components/cps-checkbox/cps-checkbox.component.ts   | 2 +-
 .../src/lib/components/cps-switch/cps-switch.component.html     | 1 +
 .../src/lib/components/cps-switch/cps-switch.component.ts       | 2 +-
 3 files changed, 3 insertions(+), 2 deletions(-)

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 9071d1605..9995e362a 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
@@ -116,7 +116,7 @@ export class CpsCheckboxComponent
   private _value = false;
 
   @ViewChild('checkboxInput')
-  checkboxInput!: ElementRef;
+  checkboxInput?: ElementRef<HTMLInputElement>;
 
   constructor(
     @Self() @Optional() private _control: NgControl,
diff --git a/projects/cps-ui-kit/src/lib/components/cps-switch/cps-switch.component.html b/projects/cps-ui-kit/src/lib/components/cps-switch/cps-switch.component.html
index c9c94b7ca..4230b44fa 100644
--- a/projects/cps-ui-kit/src/lib/components/cps-switch/cps-switch.component.html
+++ b/projects/cps-ui-kit/src/lib/components/cps-switch/cps-switch.component.html
@@ -14,6 +14,7 @@
     <span
       class="cps-switch-label"
       [ngClass]="{ 'cps-switch-label-disabled': disabled }"
+      aria-hidden="true"
       >{{ label }}</span
     >
   }
diff --git a/projects/cps-ui-kit/src/lib/components/cps-switch/cps-switch.component.ts b/projects/cps-ui-kit/src/lib/components/cps-switch/cps-switch.component.ts
index 789fd06aa..ad9b80937 100644
--- a/projects/cps-ui-kit/src/lib/components/cps-switch/cps-switch.component.ts
+++ b/projects/cps-ui-kit/src/lib/components/cps-switch/cps-switch.component.ts
@@ -101,7 +101,7 @@ export class CpsSwitchComponent
   private _value = false;
 
   @ViewChild('switchInput')
-  switchInput!: ElementRef;
+  switchInput?: ElementRef<HTMLInputElement>;
 
   constructor(@Self() @Optional() private _control: NgControl) {
     if (this._control) {