From 05d6520b22f8c60bff8894080b5c727270474f73 Mon Sep 17 00:00:00 2001
From: Chocobozzz <me@florianbigard.com>
Date: Mon, 27 Nov 2023 08:37:20 +0100
Subject: [PATCH] Fix input switch accessibility

---
 .../my-account-notification-preferences.component.html    | 2 ++
 .../my-account-notification-preferences.component.ts      | 8 ++++++++
 .../my-account-settings/my-account-settings.component.ts  | 2 +-
 .../recommendations/recommended-videos.component.html     | 6 +++++-
 .../app/shared/shared-forms/input-switch.component.html   | 6 ++++--
 .../app/shared/shared-forms/input-switch.component.scss   | 3 ++-
 .../src/app/shared/shared-forms/input-switch.component.ts | 1 +
 7 files changed, 23 insertions(+), 5 deletions(-)

diff --git a/client/src/app/+my-account/my-account-settings/my-account-notification-preferences/my-account-notification-preferences.component.html b/client/src/app/+my-account/my-account-settings/my-account-notification-preferences/my-account-notification-preferences.component.html
index 2af9d576a..aef5c64ca 100644
--- a/client/src/app/+my-account/my-account-settings/my-account-notification-preferences/my-account-notification-preferences.component.html
+++ b/client/src/app/+my-account/my-account-settings/my-account-notification-preferences/my-account-notification-preferences.component.html
@@ -12,6 +12,7 @@
 
         <div>
           <my-input-switch
+            [label]="getWebLabel(notificationType)"
             [inputName]="'web-notification-' + notificationType"
             [(ngModel)]="webNotifications[notificationType]"
             (ngModelChange)="updateWebSetting(notificationType, webNotifications[notificationType])"
@@ -20,6 +21,7 @@
 
         <div *ngIf="emailEnabled">
           <my-input-switch
+            [label]="getEmailLabel(notificationType)"
             [inputName]="'email-notification-' + notificationType"
             [(ngModel)]="emailNotifications[notificationType]"
             (ngModelChange)="updateEmailSetting(notificationType, emailNotifications[notificationType])"
diff --git a/client/src/app/+my-account/my-account-settings/my-account-notification-preferences/my-account-notification-preferences.component.ts b/client/src/app/+my-account/my-account-settings/my-account-notification-preferences/my-account-notification-preferences.component.ts
index f4181340d..481ff275f 100644
--- a/client/src/app/+my-account/my-account-settings/my-account-notification-preferences/my-account-notification-preferences.component.ts
+++ b/client/src/app/+my-account/my-account-settings/my-account-notification-preferences/my-account-notification-preferences.component.ts
@@ -116,6 +116,14 @@ export class MyAccountNotificationPreferencesComponent implements OnInit {
     return this.user.hasRight(rightToHave)
   }
 
+  getWebLabel (notificationType: keyof UserNotificationSetting) {
+    return `Toggle web notification for "${this.labelNotifications[notificationType]}"`
+  }
+
+  getEmailLabel (notificationType: keyof UserNotificationSetting) {
+    return `Toggle email notification for "${this.labelNotifications[notificationType]}"`
+  }
+
   updateEmailSetting (field: keyof UserNotificationSetting, value: boolean) {
     if (value === true) this.user.notificationSettings[field] |= UserNotificationSettingValue.EMAIL
     else this.user.notificationSettings[field] &= ~UserNotificationSettingValue.EMAIL
diff --git a/client/src/app/+my-account/my-account-settings/my-account-settings.component.ts b/client/src/app/+my-account/my-account-settings/my-account-settings.component.ts
index 4b3b33bcc..4bd36cbe5 100644
--- a/client/src/app/+my-account/my-account-settings/my-account-settings.component.ts
+++ b/client/src/app/+my-account/my-account-settings/my-account-settings.component.ts
@@ -32,7 +32,7 @@ export class MyAccountSettingsComponent implements OnInit, AfterViewChecked {
 
   ngAfterViewChecked () {
     if (window.location.hash && window.location.hash !== this.lastScrollHash) {
-      this.viewportScroller.scrollToAnchor(window.location.hash.replace('#', ''))
+      // this.viewportScroller.scrollToAnchor(window.location.hash.replace('#', ''))
 
       this.lastScrollHash = window.location.hash
     }
diff --git a/client/src/app/+videos/+video-watch/shared/recommendations/recommended-videos.component.html b/client/src/app/+videos/+video-watch/shared/recommendations/recommended-videos.component.html
index 59ee57b16..b6850d937 100644
--- a/client/src/app/+videos/+video-watch/shared/recommendations/recommended-videos.component.html
+++ b/client/src/app/+videos/+video-watch/shared/recommendations/recommended-videos.component.html
@@ -7,7 +7,11 @@
         [ngbTooltip]="autoPlayNextVideoTooltip" placement="bottom-right auto"
       >
         <span i18n>AUTOPLAY</span>
-        <my-input-switch class="small" inputName="autoplay-next-video" [(ngModel)]="autoPlayNextVideo" (ngModelChange)="switchAutoPlayNextVideo()"></my-input-switch>
+        <my-input-switch
+          i18n-label label="Toggle autoplay next video"
+          class="small" inputName="autoplay-next-video"
+          [(ngModel)]="autoPlayNextVideo" (ngModelChange)="switchAutoPlayNextVideo()"
+        ></my-input-switch>
       </div>
     </div>
 
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 996655e4a..ad400a82f 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,4 @@
-<input type="checkbox" role="switch" [checked]="checked" [name]="inputName" [id]="inputName" (change)="update()" [disabled]="preventUpdate" />
-<label [for]="inputName" class="ms-auto">Toggle</label>
+<div class="root">
+  <input type="checkbox" role="switch" [checked]="checked" [name]="inputName" [id]="inputName" (change)="update()" [disabled]="preventUpdate" />
+  <label [for]="inputName" class="ms-auto">{{ label }}</label>
+</div>
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 0814bd8c2..40457b53e 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;
-  top: -100px;
+  width: 0;
+  height: 0;
   left: -100px;
 
   + label {
diff --git a/client/src/app/shared/shared-forms/input-switch.component.ts b/client/src/app/shared/shared-forms/input-switch.component.ts
index e019029c5..a4036ba58 100644
--- a/client/src/app/shared/shared-forms/input-switch.component.ts
+++ b/client/src/app/shared/shared-forms/input-switch.component.ts
@@ -17,6 +17,7 @@ export class InputSwitchComponent implements ControlValueAccessor {
   @Input() checked = false
   @Input() inputName: string
   @Input() preventUpdate = false
+  @Input() label = $localize`Toggle`
 
   propagateChange = (_: any) => { /* empty */ }