Fix select with custom number labels

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"

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"

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"

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"

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>

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'