feat: add keyboard controls for hue and saturation components for a11y

src/lib/hue.component.ts

@@ -26,7 +26,13 @@ import { HSLA, HSLAsource } from './helpers/color.interfaces';
         class="color-hue-container"
       >
         @if (!hidePointer) {
-          <div class="color-hue-pointer" [style.left]="left" [style.top]="top">
+          <div
+            class="color-hue-pointer"
+            [style.left]="left"
+            [style.top]="top"
+            tabindex="0"
+            (keydown)="handleKeydown($event)"
+          >
             <div class="color-hue-slider" [ngStyle]="pointer"></div>
           </div>
         }
@@ -157,6 +163,56 @@ export class HueComponent implements OnChanges {
 
     this.onChange.emit({ data, $event });
   }
+  handleKeydown($event: KeyboardEvent): void {
+    const step = 1 / 360;
+    let moved = true;
+    let position: number;
+
+    if (this.direction === 'horizontal') {
+      position = parseFloat(this.left) / 100;
+      if ($event.key === 'ArrowLeft') {
+        position = Math.max(0, position - step);
+        this.left = `${position * 100}%`;
+      } else if ($event.key === 'ArrowRight') {
+        position = Math.min(1, position + step);
+        this.left = `${position * 100}%`;
+      } else {
+        moved = false;
+      }
+    } else {
+      position = parseFloat(this.top) / 100;
+      if ($event.key === 'ArrowUp') {
+        position = Math.max(0, position - step);
+        this.top = `${position * 100}%`;
+      } else if ($event.key === 'ArrowDown') {
+        position = Math.min(1, position + step);
+        this.top = `${position * 100}%`;
+      } else {
+        moved = false;
+      }
+    }
+
+    if (moved) {
+      $event.preventDefault();
+
+      let h: number;
+      if (this.direction === 'horizontal') {
+        h = position * 360;
+      } else {
+        h = (1 - position) * 360;
+      }
+
+      const data: HSLAsource = {
+        h,
+        s: this.hsl.s,
+        l: this.hsl.l,
+        a: this.hsl.a,
+        source: 'rgb',
+      };
+
+      this.onChange.emit({ data, $event });
+    }
+  }
 }
 
 @NgModule({

src/lib/saturation.component.ts

@@ -29,7 +29,12 @@ import { HSLA, HSVA, HSVAsource } from './helpers/color.interfaces';
           [style.top]="pointerTop"
           [style.left]="pointerLeft"
         >
-          <div class="saturation-circle" [ngStyle]="circle"></div>
+          <div
+            class="saturation-circle"
+            [ngStyle]="circle"
+            tabindex="0"
+            (keydown)="handleKeydown($event)"
+          ></div>
         </div>
       </div>
     </div>
@@ -93,7 +98,7 @@ export class SaturationComponent implements OnChanges {
 
   ngOnChanges() {
     this.background = `hsl(${this.hsl.h}, 100%, 50%)`;
-    this.pointerTop = -(this.hsv.v * 100) + 1 + 100 + '%';
+    this.pointerTop = (1 - this.hsv.v) * 100+ '%';
     this.pointerLeft = this.hsv.s * 100 + '%';
   }
   handleChange({ top, left, containerHeight, containerWidth, $event }) {
@@ -121,6 +126,46 @@ export class SaturationComponent implements OnChanges {
     };
     this.onChange.emit({ data, $event });
   }
+  handleKeydown($event: KeyboardEvent) {
+    const step = 0.01;
+    let moved = true;
+    let x = parseFloat(this.pointerLeft) / 100;
+    let y = parseFloat(this.pointerTop) / 100;
+
+    switch ($event.key) {
+      case 'ArrowLeft':
+        x = Math.max(0, x - step);
+        break;
+      case 'ArrowRight':
+        x = Math.min(1, x + step);
+        break;
+      case 'ArrowUp':
+        y = Math.max(0, y - step);
+        break;
+      case 'ArrowDown':
+        y = Math.min(1, y + step);
+        break;
+      default:
+        moved = false;
+    }
+
+    if (moved) {
+      $event.preventDefault();
+
+      this.pointerLeft = `${x * 100}%`;
+      this.pointerTop = `${y * 100}%`;
+
+      const data: HSVAsource = {
+        h: this.hsl.h,
+        s: x,
+        v: 1 - y,
+        a: this.hsl.a,
+        source: 'hsva',
+      };
+
+      this.onChange.emit({ data, $event });
+    }
+  }
 }
 
 @NgModule({