Fix admin log page accessibility

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

@@ -1,36 +1,66 @@
+<h1>
+  <my-global-icon iconName="playlists" aria-hidden="true"></my-global-icon>
+  <ng-container i18n>Logs</ng-container>
+</h1>
+
 <div class="header">
-  <div class="peertube-select-container">
-    <select [(ngModel)]="logType" (ngModelChange)="refresh()" class="form-control">
-      <option *ngFor="let logTypeChoice of logTypeChoices" [value]="logTypeChoice.id">{{ logTypeChoice.label }}</option>
-    </select>
+
+  <div>
+    <label i18n for="log-type">Log type</label>
+
+    <div class="peertube-select-container">
+      <select id="log-type" [(ngModel)]="logType" (ngModelChange)="refresh()" class="form-control">
+        <option *ngFor="let logTypeChoice of logTypeChoices" [value]="logTypeChoice.id">{{ logTypeChoice.label }}</option>
+      </select>
+    </div>
   </div>
 
-  <ng-select
-    [(ngModel)]="startDate"
-    (ngModelChange)="refresh()"
-    [clearable]="false"
-    [searchable]="false"
-  >
-    <ng-option *ngFor="let time of timeChoices" [value]="time.id">
-      {{ time.label }} ({{ time.id | date: time.dateFormat }} - <span i18n>now</span>)
-    </ng-option>
-  </ng-select>
+  @if (!isAuditLog()) {
+    <div>
+      <label i18n for="log-start-date">Start date</label>
 
-  <ng-select
-    [(ngModel)]="level"
-    (ngModelChange)="refresh()"
-    [clearable]="false"
-    [searchable]="false"
-    *ngIf="!isAuditLog()"
-  >
-    <ng-option *ngFor="let levelChoice of levelChoices" [value]="levelChoice.id">
-      <span class="level-choice" [ngClass]="levelChoice.id">&#11044;</span> {{ levelChoice.label }}
-    </ng-option>
-  </ng-select>
+      <ng-select
+        [(ngModel)]="startDate"
+        (ngModelChange)="refresh()"
+        [clearable]="false"
+        [searchable]="false"
+        labelForId="log-start-date"
+      >
+        <ng-option *ngFor="let time of timeChoices" [value]="time.id">
+          {{ time.label }} ({{ time.id | date: time.dateFormat }} - <span i18n>now</span>)
+        </ng-option>
+      </ng-select>
+    </div>
 
-  <my-select-tags *ngIf="!isAuditLog()" i18n-placeholder placeholder="Filter logs by tags" [(ngModel)]="tagsOneOf" (ngModelChange)="refresh()"></my-select-tags>
+    <div>
+      <label i18n for="log-level">Log level</label>
 
-  <my-button i18n-label label="Refresh" icon="refresh" (click)="refresh()"></my-button>
+      <ng-select
+        [(ngModel)]="level"
+        (ngModelChange)="refresh()"
+        [clearable]="false"
+        [searchable]="false"
+        labelForId="log-level"
+      >
+        <ng-option *ngFor="let levelChoice of levelChoices" [value]="levelChoice.id">
+          <span class="level-choice me-1" [ngClass]="levelChoice.id">&#11044;</span> {{ levelChoice.label }}
+        </ng-option>
+      </ng-select>
+    </div>
+
+    <div>
+      <label i18n for="log-tags">Filter logs by tags</label>
+
+      <my-select-tags
+        *ngIf="!isAuditLog()"
+        labelForId="log-tags"
+        i18n-placeholder placeholder="Example: ffmpeg, api"
+        [(ngModel)]="tagsOneOf" (ngModelChange)="refresh()"
+      ></my-select-tags>
+    </div>
+  }
+
+  <my-button class="mt-auto" i18n-label label="Refresh" icon="refresh" (click)="refresh()"></my-button>
 </div>
 
 <div class="logs">

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

@@ -6,7 +6,7 @@
   font-size: 13px;
   max-height: 500px;
   overflow-y: auto;
-  background: rgba(0, 0, 0, 0.03);
+  background: rgb(250, 250, 250);
   padding: 20px;
 
   > div {
@@ -33,11 +33,11 @@
   }
 
   .warn {
-    color: pvar(--mainColor);
+    color: #C74801;
   }
 
   .error {
-    color: pvar(--red);
+    color: #DC262B;
   }
 
   pre {
@@ -83,7 +83,7 @@
   }
 
   &.error {
-    color: rgb(250, 5, 5);
+    color: #DC262B;
   }
 }
 

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

@@ -2,6 +2,7 @@ import { DatePipe, NgClass, NgFor, NgIf } from '@angular/common'
 import { Component, ElementRef, OnInit, ViewChild } from '@angular/core'
 import { FormsModule } from '@angular/forms'
 import { LocalStorageService, Notifier } from '@app/core'
+import { GlobalIconComponent } from '@app/shared/shared-icons/global-icon.component'
 import { NgSelectModule } from '@ng-select/ng-select'
 import { ServerLogLevel } from '@peertube/peertube-models'
 import { SelectTagsComponent } from '../../../shared/shared-forms/select/select-tags.component'
@@ -23,7 +24,8 @@ import { LogsService } from './logs.service'
     SelectTagsComponent,
     ButtonComponent,
     DatePipe,
-    CopyButtonComponent
+    CopyButtonComponent,
+    GlobalIconComponent
   ]
 })
 export class LogsComponent implements OnInit {

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" id="tagsAllOf" [(ngModel)]="advancedSearch.tagsAllOf"></my-select-tags>
+        <my-select-tags name="tagsAllOf" labelForId="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" id="tagsOneOf" [(ngModel)]="advancedSearch.tagsOneOf"></my-select-tags>
+        <my-select-tags name="tagsOneOf" labelForId="tagsOneOf" [(ngModel)]="advancedSearch.tagsOneOf"></my-select-tags>
       </div>
 
       <div class="form-group">

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

@@ -8,6 +8,7 @@
   [searchable]="true"
   [closeOnSelect]="false"
   [disabled]="disabled"
+  [labelForId]="labelForId"
 
   bindValue="id"
   bindLabel="label"

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

@@ -9,5 +9,6 @@
   [multiple]="true"
   [isOpen]="false"
   [searchable]="true"
+  [labelForId]="labelForId"
 >
 </ng-select>

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

@@ -17,6 +17,7 @@ import { NgSelectModule } from '@ng-select/ng-select'
   imports: [ NgSelectModule, FormsModule ]
 })
 export class SelectTagsComponent implements ControlValueAccessor {
+  @Input({ required: true }) labelForId: string
   @Input() availableItems: string[] = []
   @Input() selectedItems: string[] = []
   @Input() placeholder = $localize`Enter a new tag`