Fix input switch accessibility

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])"

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

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
     }

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>
 

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>

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 {

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 */ }