From fe62406e5089d1c6b954a7d8f312968f38050ce6 Mon Sep 17 00:00:00 2001
From: Chocobozzz <me@florianbigard.com>
Date: Thu, 26 Sep 2024 16:29:26 +0200
Subject: [PATCH] Fix select with custom number labels

---
 .../edit-basic-configuration.component.html   | 20 +++++++++++--------
 .../edit-live-configuration.component.html    |  5 +++--
 .../edit-vod-transcoding.component.html       |  5 +++--
 .../users/user-edit/user-edit.component.html  | 10 ++++++----
 .../select/select-custom-value.component.html |  2 +-
 .../select/select-custom-value.component.ts   |  5 ++++-
 6 files changed, 29 insertions(+), 18 deletions(-)

diff --git a/client/src/app/+admin/config/edit-custom-config/edit-basic-configuration.component.html b/client/src/app/+admin/config/edit-custom-config/edit-basic-configuration.component.html
index dd1f7129d..722852d5e 100644
--- a/client/src/app/+admin/config/edit-custom-config/edit-basic-configuration.component.html
+++ b/client/src/app/+admin/config/edit-custom-config/edit-basic-configuration.component.html
@@ -25,10 +25,11 @@
       </ng-container>
 
       <div class="form-group" formGroupName="instance">
-        <label i18n for="instanceDefaultClientRoute">Landing page</label>
+        <label i18n id="instanceDefaultClientRouteLabel" for="instanceDefaultClientRoute">Landing page</label>
 
         <my-select-custom-value
-          id="instanceDefaultClientRoute"
+          labelId="instanceDefaultClientRouteLabel"
+          labelForId="instanceDefaultClientRoute"
           [items]="defaultLandingPageOptions"
           formControlName="defaultClientRoute"
           inputType="text"
@@ -219,10 +220,11 @@
 
       <ng-container formGroupName="user">
         <div class="form-group">
-          <label i18n for="userVideoQuota">Default video quota per user</label>
+          <label i18n id="userVideoQuotaLabel" for="userVideoQuota">Default video quota per user</label>
 
           <my-select-custom-value
-            id="userVideoQuota"
+            labelId="userVideoQuotaLabel"
+            labelForId="userVideoQuota"
             [items]="getVideoQuotaOptions()"
             formControlName="videoQuota"
             i18n-inputSuffix inputSuffix="bytes" inputType="number"
@@ -235,10 +237,11 @@
         </div>
 
         <div class="form-group">
-          <label i18n for="userVideoQuotaDaily">Default daily upload limit per user</label>
+          <label i18n id="userVideoQuotaDaily" for="userVideoQuotaDaily">Default daily upload limit per user</label>
 
           <my-select-custom-value
-            id="userVideoQuotaDaily"
+            labelId="userVideoQuotaDailyLabel"
+            labelForId="userVideoQuotaDaily"
             [items]="getVideoQuotaDailyOptions()"
             formControlName="videoQuotaDaily"
             i18n-inputSuffix inputSuffix="bytes" inputType="number"
@@ -552,12 +555,13 @@
               <ng-container ngProjectAs="extra">
 
                 <div class="form-group" [ngClass]="getDisabledExportUsersClass()">
-                  <label i18n for="exportUsersMaxUserVideoQuota">Max user video quota allowed to generate the export</label>
+                  <label i18n id="exportUsersMaxUserVideoQuota" for="exportUsersMaxUserVideoQuota">Max user video quota allowed to generate the export</label>
 
                   <span i18n class="ms-2 small muted">If the user decides to include the video files in the archive</span>
 
                   <my-select-custom-value
-                    id="exportUsersMaxUserVideoQuota"
+                    labelId="exportUsersMaxUserVideoQuota"
+                    labelForId="exportUsersMaxUserVideoQuota"
                     [items]="exportMaxUserVideoQuotaOptions"
                     formControlName="maxUserVideoQuota"
                     i18n-inputSuffix inputSuffix="bytes" inputType="number"
diff --git a/client/src/app/+admin/config/edit-custom-config/edit-live-configuration.component.html b/client/src/app/+admin/config/edit-custom-config/edit-live-configuration.component.html
index b4b04aa54..d96d8b579 100644
--- a/client/src/app/+admin/config/edit-custom-config/edit-live-configuration.component.html
+++ b/client/src/app/+admin/config/edit-custom-config/edit-live-configuration.component.html
@@ -164,7 +164,7 @@
           </div>
 
           <div class="form-group" [ngClass]="getDisabledLiveLocalTranscodingClass()">
-            <label i18n for="liveTranscodingThreads">Live transcoding threads</label>
+            <label i18n id="liveTranscodingThreadsLabel" for="liveTranscodingThreads">Live transcoding threads</label>
 
             <span class="small muted ms-1">
               <ng-container *ngIf="getTotalTranscodingThreads().atMost" i18n>
@@ -177,7 +177,8 @@
             </span>
 
             <my-select-custom-value
-              id="liveTranscodingThreads"
+              labelId="liveTranscodingThreadsLabel"
+              labelForId="liveTranscodingThreads"
               [items]="transcodingThreadOptions"
               formControlName="threads"
               [clearable]="false"
diff --git a/client/src/app/+admin/config/edit-custom-config/edit-vod-transcoding.component.html b/client/src/app/+admin/config/edit-custom-config/edit-vod-transcoding.component.html
index aededfe8c..d0707fce5 100644
--- a/client/src/app/+admin/config/edit-custom-config/edit-vod-transcoding.component.html
+++ b/client/src/app/+admin/config/edit-custom-config/edit-vod-transcoding.component.html
@@ -187,7 +187,7 @@
         </div>
 
         <div class="form-group mt-4" [ngClass]="getLocalTranscodingDisabledClass()">
-          <label i18n for="transcodingThreads">Transcoding threads</label>
+          <label i18n id="transcodingThreadsLabel" for="transcodingThreads">Transcoding threads</label>
 
           <span class="small muted ms-1">
             <ng-container *ngIf="getTotalTranscodingThreads().atMost" i18n>
@@ -200,7 +200,8 @@
           </span>
 
           <my-select-custom-value
-            id="transcodingThreads"
+            labelId="transcodingThreadsLabel"
+            labelForId="transcodingThreads"
             [items]="transcodingThreadOptions"
             formControlName="threads"
             [clearable]="false"
diff --git a/client/src/app/+admin/overview/users/user-edit/user-edit.component.html b/client/src/app/+admin/overview/users/user-edit/user-edit.component.html
index 89588c204..d9b1fb00f 100644
--- a/client/src/app/+admin/overview/users/user-edit/user-edit.component.html
+++ b/client/src/app/+admin/overview/users/user-edit/user-edit.component.html
@@ -150,10 +150,11 @@
         </div>
 
         <div class="form-group">
-          <label i18n for="videoQuota">Video quota</label>
+          <label i18n id="videoQuotaLabel" for="videoQuota">Video quota</label>
 
           <my-select-custom-value
-            id="videoQuota"
+            labelId="videoQuotaLabel"
+            labelForId="videoQuota"
             [items]="videoQuotaOptions"
             formControlName="videoQuota"
             i18n-inputSuffix inputSuffix="bytes" inputType="number"
@@ -168,10 +169,11 @@
         </div>
 
         <div class="form-group">
-          <label i18n for="videoQuotaDaily">Daily video quota</label>
+          <label i18n id="videoQuotaDailyLabel" for="videoQuotaDaily">Daily video quota</label>
 
           <my-select-custom-value
-            id="videoQuotaDaily"
+            labelId="videoQuotaDailyLabel"
+            labelForId="videoQuotaDaily"
             [items]="videoQuotaDailyOptions"
             formControlName="videoQuotaDaily"
             i18n-inputSuffix inputSuffix="bytes" inputType="number"
diff --git a/client/src/app/shared/shared-forms/select/select-custom-value.component.html b/client/src/app/shared/shared-forms/select/select-custom-value.component.html
index 69fdedc10..c8b049d27 100644
--- a/client/src/app/shared/shared-forms/select/select-custom-value.component.html
+++ b/client/src/app/shared/shared-forms/select/select-custom-value.component.html
@@ -12,7 +12,7 @@
   ></my-select-options>
 
   <ng-container *ngIf="isCustomValue()">
-    <input [(ngModel)]="customValue" (ngModelChange)="onModelChange()" [type]="inputType" class="form-control" />
+    <input [attr.aria-labelledby]="labelId" [(ngModel)]="customValue" (ngModelChange)="onModelChange()" [type]="inputType" class="form-control" />
 
     <span *ngIf="inputSuffix" class="input-suffix">{{ inputSuffix }}</span>
   </ng-container>
diff --git a/client/src/app/shared/shared-forms/select/select-custom-value.component.ts b/client/src/app/shared/shared-forms/select/select-custom-value.component.ts
index 94973ae3f..a2ac4cdc6 100644
--- a/client/src/app/shared/shared-forms/select/select-custom-value.component.ts
+++ b/client/src/app/shared/shared-forms/select/select-custom-value.component.ts
@@ -19,11 +19,14 @@ import { SelectOptionsComponent } from './select-options.component'
   imports: [ SelectOptionsComponent, FormsModule, NgIf ]
 })
 export class SelectCustomValueComponent implements ControlValueAccessor, OnChanges {
+  @Input({ required: true }) labelForId: string
+  @Input({ required: true }) labelId: string
+
   @Input() items: SelectOptionsItem[] = []
+
   @Input() clearable = false
   @Input() searchable = false
   @Input() groupBy: string
-  @Input() labelForId: string
   @Input() inputSuffix: string
   @Input() inputType = 'text'