Fix chips accessibility

client/src/app/+admin/system/logs/logs.component.html

@@ -53,7 +53,7 @@
 
       <my-select-tags
         *ngIf="!isAuditLog()"
-        labelForId="log-tags"
+        inputId="log-tags"
         i18n-placeholder placeholder="Example: ffmpeg, api"
         [(ngModel)]="tagsOneOf" (ngModelChange)="refresh()"
       ></my-select-tags>

client/src/app/+admin/system/logs/logs.component.scss

@@ -57,8 +57,8 @@
   }
 
   my-select-tags {
-    min-width: 250px;
-    max-width: 400px;
+    display: block;
+    width: 325px;
   }
 
   > * {

client/src/app/+search/search-filters.component.html

@@ -163,7 +163,7 @@
         <button type="button" i18n class="reset-button reset-button-small" (click)="resetField('tagsAllOf')" *ngIf="advancedSearch.tagsAllOf">
           Reset
         </button>
-        <my-select-tags name="tagsAllOf" labelForId="tagsAllOf" [(ngModel)]="advancedSearch.tagsAllOf"></my-select-tags>
+        <my-select-tags name="tagsAllOf" inputId="tagsAllOf" [(ngModel)]="advancedSearch.tagsAllOf"></my-select-tags>
       </div>
 
       <div class="form-group">
@@ -171,7 +171,7 @@
         <button type="button" i18n class="reset-button reset-button-small" (click)="resetField('tagsOneOf')" *ngIf="advancedSearch.tagsOneOf">
           Reset
         </button>
-        <my-select-tags name="tagsOneOf" labelForId="tagsOneOf" [(ngModel)]="advancedSearch.tagsOneOf"></my-select-tags>
+        <my-select-tags name="tagsOneOf" inputId="tagsOneOf" [(ngModel)]="advancedSearch.tagsOneOf"></my-select-tags>
       </div>
 
       <div class="form-group">

client/src/app/+videos/+video-edit/shared/video-edit.component.html

@@ -34,7 +34,7 @@
                 </ng-template>
               </my-help>
 
-              <my-select-tags labelForId="label-tags" formControlName="tags"></my-select-tags>
+              <my-select-tags inputId="label-tags" formControlName="tags" class="d-block w-100"></my-select-tags>
               <div *ngIf="formErrors.tags" class="form-error" role="alert">
                 {{ formErrors.tags }}
               </div>

client/src/app/shared/shared-forms/select/select-tags.component.html

@@ -1,14 +1,8 @@
-<ng-select
-  [items]="availableItems"
+<p-chips
   [(ngModel)]="selectedItems"
   (ngModelChange)="onModelChange()"
   [placeholder]="placeholder"
-  [maxSelectedItems]="5"
-  [clearable]="true"
-  [addTag]="true"
-  [multiple]="true"
-  [isOpen]="false"
-  [searchable]="true"
-  [labelForId]="labelForId"
->
-</ng-select>
+  [inputId]="inputId"
+  [allowDuplicate]="false"
+  [caseSensitiveDuplication]="false"
+></p-chips>

client/src/app/shared/shared-forms/select/select-tags.component.scss

@@ -1,14 +0,0 @@
-ng-select ::ng-deep {
-  .ng-arrow-wrapper {
-    display: none;
-  }
-
-  .ng-value-container {
-    padding-top: 2px !important;
-  }
-
-  .ng-value {
-    margin-bottom: 2px !important;
-    max-height: 24px;
-  }
-}

client/src/app/shared/shared-forms/select/select-tags.component.ts

@@ -1,10 +1,9 @@
 import { Component, Input, forwardRef } from '@angular/core'
-import { NG_VALUE_ACCESSOR, ControlValueAccessor, FormsModule } from '@angular/forms'
-import { NgSelectModule } from '@ng-select/ng-select'
+import { ControlValueAccessor, FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms'
+import { ChipsModule } from 'primeng/chips'
 
 @Component({
   selector: 'my-select-tags',
-  styleUrls: [ './select-shared.component.scss', './select-tags.component.scss' ],
   templateUrl: './select-tags.component.html',
   providers: [
     {
@@ -14,10 +13,10 @@ import { NgSelectModule } from '@ng-select/ng-select'
     }
   ],
   standalone: true,
-  imports: [ NgSelectModule, FormsModule ]
+  imports: [ ChipsModule, FormsModule ]
 })
 export class SelectTagsComponent implements ControlValueAccessor {
-  @Input({ required: true }) labelForId: string
+  @Input({ required: true }) inputId: string
   @Input() availableItems: string[] = []
   @Input() selectedItems: string[] = []
   @Input() placeholder = $localize`Enter a new tag`

client/src/sass/primeng-custom.scss

@@ -459,6 +459,105 @@ body p-autocomplete.ng-dirty.ng-invalid > .p-autocomplete > .p-inputtext {
   border: 1px solid #a80000;
 }
 
+//chips
+
+.p-chips:not(.p-disabled):hover .p-chips-multiple-container {
+  border-color: pvar(--inputBorderColor);
+}
+.p-chips:not(.p-disabled).p-focus .p-chips-multiple-container {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: 0 0 0 0.25rem var(--mainColorLightest);
+}
+.p-chips .p-chips-multiple-container {
+  padding: 3px 15px;
+  gap: 0.25rem;
+}
+.p-chips .p-chips-multiple-container .p-chips-token {
+  padding: 2px 15px;
+  margin-right: 0.5rem;
+  background: pvar(--mainColorLightest);
+  color: pvar(--mainForegroundColor);
+  border-radius: 3px;
+}
+.p-chips .p-chips-multiple-container .p-chips-token.p-focus {
+  background: pvar(--mainColorVeryLight);
+  color: pvar(--mainForegroundColor);
+}
+.p-chips .p-chips-multiple-container .p-chips-token .p-chips-token-icon {
+  margin-left: 0.5rem;
+}
+.p-chips .p-chips-multiple-container .p-chips-input-token {
+  padding: 3px 0;
+}
+.p-chips .p-chips-multiple-container .p-chips-input-token input {
+  color: pvar(--mainForegroundColor);
+  padding: 0;
+  margin: 0;
+}
+
+p-chips.ng-dirty.ng-invalid > .p-chips > .p-inputtext {
+  border-color: pvar(--red);
+}
+
+p-chips.p-chips-clearable .p-inputtext {
+  padding-right: 1.429rem;
+}
+p-chips.p-chips-clearable .p-chips-clear-icon {
+  color: pvar(--greyForegroundColor);
+  right: 0.429rem;
+}
+
+.p-inputtext {
+  font-size: 15px;
+  color: pvar(--mainForegroundColor);
+  background: pvar(--mainBackgroundColor);
+  padding: 3px 15px;
+  border: 1px solid pvar(--inputBorderColor);
+  transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  appearance: none;
+  border-radius: 3px;
+}
+.p-inputtext:enabled:hover {
+  border-color: pvar(--inputBorderColor);
+}
+.p-inputtext:enabled:focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: 0 0 0 0.25rem var(--mainColorLightest);
+}
+.p-inputtext.ng-dirty.ng-invalid {
+  border-color: pvar(--red);
+}
+.p-inputtext.p-variant-filled {
+  background-color: #f4f4f4;
+}
+.p-inputtext.p-variant-filled:enabled:hover {
+  background-color: #f4f4f4;
+}
+.p-inputtext.p-variant-filled:enabled:focus {
+  background-color: #f4f4f4;
+}
+.p-inputtext.p-inputtext-sm {
+  font-size: 0.875rem;
+  padding: 0.375375rem 0.375375rem;
+}
+.p-inputtext.p-inputtext-lg {
+  font-size: 1.25rem;
+  padding: 0.53625rem 0.53625rem;
+}
+
+.p-input-filled .p-inputtext {
+  background-color: #f4f4f4;
+}
+.p-input-filled .p-inputtext:enabled:hover {
+  background-color: #f4f4f4;
+}
+.p-input-filled .p-inputtext:enabled:focus {
+  background-color: #f4f4f4;
+}
+
+
 // ---------------------------------------------------------------------------
 // PeerTube customizations
 // ---------------------------------------------------------------------------
@@ -902,3 +1001,27 @@ p-toast {
     }
   }
 }
+
+p-chips {
+  .p-input-wrapper {
+    display: flex;
+  }
+
+  .p-chips-token-label {
+    line-height: normal;
+  }
+
+  .p-chips-input-token {
+    line-height: normal;
+  }
+
+  .p-chips-multiple-container {
+    padding: 1px 15px !important;
+    margin-block-end: 0 !important;
+    width: 100% !important;
+  }
+
+  .p-chips-input-token {
+    flex-basis: 100px;
+  }
+}