From e2c7e58f42b312fad0acd6dd3fcf10405768f22b Mon Sep 17 00:00:00 2001
From: Chocobozzz <me@florianbigard.com>
Date: Wed, 11 Oct 2023 11:49:15 +0200
Subject: [PATCH] Fix input switch accessibility

---
 .../app/shared/shared-forms/input-switch.component.html    | 2 +-
 .../app/shared/shared-forms/input-switch.component.scss    | 7 ++++++-
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/client/src/app/shared/shared-forms/input-switch.component.html b/client/src/app/shared/shared-forms/input-switch.component.html
index 2def02a05..996655e4a 100644
--- a/client/src/app/shared/shared-forms/input-switch.component.html
+++ b/client/src/app/shared/shared-forms/input-switch.component.html
@@ -1,2 +1,2 @@
-<input type="checkbox" [checked]="checked" [name]="inputName" [id]="inputName" (change)="update()" [disabled]="preventUpdate" />
+<input type="checkbox" role="switch" [checked]="checked" [name]="inputName" [id]="inputName" (change)="update()" [disabled]="preventUpdate" />
 <label [for]="inputName" class="ms-auto">Toggle</label>
diff --git a/client/src/app/shared/shared-forms/input-switch.component.scss b/client/src/app/shared/shared-forms/input-switch.component.scss
index 8ee8a371d..0814bd8c2 100644
--- a/client/src/app/shared/shared-forms/input-switch.component.scss
+++ b/client/src/app/shared/shared-forms/input-switch.component.scss
@@ -3,7 +3,8 @@
 
 input {
   position: absolute;
-  visibility: hidden;
+  top: -100px;
+  left: -100px;
 
   + label {
     cursor: pointer;
@@ -41,4 +42,8 @@ input {
       transform: translateX(-100%);
     }
   }
+
+  &:focus-visible + label {
+    outline: 2px solid;
+  }
 }