From 6798ed94b6c50b9f25730eee5164c1c39180fd7a Mon Sep 17 00:00:00 2001
From: Roel Berends <r.berends@ditpsoftware.nl>
Date: Thu, 12 Dec 2024 15:33:35 +0100
Subject: [PATCH] chore: fix checkbox styling.

---
 .../component-library-angular/src/checkbox/component.ts    | 7 +++++++
 packages/component-library-angular/src/checkbox/index.html | 4 +++-
 packages/component-library-angular/src/checkbox/index.scss | 6 +++---
 3 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/packages/component-library-angular/src/checkbox/component.ts b/packages/component-library-angular/src/checkbox/component.ts
index 82ddcdd7..0c0244da 100644
--- a/packages/component-library-angular/src/checkbox/component.ts
+++ b/packages/component-library-angular/src/checkbox/component.ts
@@ -17,4 +17,11 @@ export class TilburgCheckbox {
   onCheckChange(event: Event) {
     this.checkChanged.emit(event);
   }
+
+  mouseUp(event: MouseEvent) {
+    (event.target as HTMLInputElement).classList.remove('tilburg-checkbox-pressed');
+  }
+  mouseDown(event: MouseEvent) {
+    (event.target as HTMLInputElement).classList.add('tilburg-checkbox-pressed');
+  }
 }
diff --git a/packages/component-library-angular/src/checkbox/index.html b/packages/component-library-angular/src/checkbox/index.html
index 5e8e9c89..173b6104 100644
--- a/packages/component-library-angular/src/checkbox/index.html
+++ b/packages/component-library-angular/src/checkbox/index.html
@@ -1,8 +1,10 @@
 <input
   type="checkbox"
   [id]="id"
-  [attr.aria-label]="ariaLabel"
+  [disabled]="disabled"
   [checked]="checked"
   (change)="onCheckChange($event)"
+  (mouseup)="mouseUp($event)"
+  (mousedown)="mouseDown($event)"
   utrecht-checkbox
 />
diff --git a/packages/component-library-angular/src/checkbox/index.scss b/packages/component-library-angular/src/checkbox/index.scss
index 4d97ad3a..79ac4955 100644
--- a/packages/component-library-angular/src/checkbox/index.scss
+++ b/packages/component-library-angular/src/checkbox/index.scss
@@ -16,7 +16,7 @@
     border-color: var(--utrecht-checkbox-disabled-border-color, var(--utrecht-checkbox-border-color));
   }
 
-  &:focus-visible:not(:disabled) {
+  &:focus-visible:not(:disabled, [aria-disabled="true"]) {
     background-color: var(--utrecht-checkbox-focus-background-color, var(--utrecht-checkbox-background-color));
     border-color: var(--utrecht-checkbox-focus-border-color, var(--utrecht-checkbox-border-color));
     border-width: var(--utrecht-checkbox-focus-border-width, var(--utrecht-checkbox-border-width));
@@ -46,8 +46,8 @@
       border-color: var(--utrecht-checkbox-disabled-border-color, var(--utrecht-checkbox-border-color));
     }
 
-    &:focus,
-    &:focus-visible:not(:active) {
+    &:focus.tilburg-checkbox-pressed:active:not([aria-disabled="true"]),
+    &:focus-visible:not(:active, .tilburg-checkbox-pressed, [aria-disabled="true"]) {
       background-color: #e6f6ff;
       background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
       border-color: var(--utrecht-form-control-focus-border-color, var(--utrecht-form-control-focus-border-color));