Fix lint

34 files changed, 142 insertions, 133 deletions

diff --git a/client/src/app/shared/form-validators/video-validators.ts b/client/src/app/shared/form-validators/video-validators.ts
index ab6f21a35..a4bda8f16 100644
--- a/client/src/app/shared/form-validators/video-validators.ts
+++ b/client/src/app/shared/form-validators/video-validators.ts
@@ -99,7 +99,7 @@ export const VIDEO_ORIGINALLY_PUBLISHED_AT_VALIDATOR: BuildFormValidator = {
 
 function arrayTagLengthValidator (min = 2, max = 30): ValidatorFn {
   return (control: AbstractControl): ValidationErrors => {
-    const array = control.value as Array<string>
+    const array = control.value as string[]
 
     if (array.every(e => e.length >= min && e.length <= max)) {
       return null
diff --git a/client/src/app/shared/shared-abuse-list/abuse-list-table.component.html b/client/src/app/shared/shared-abuse-list/abuse-list-table.component.html
index ef96f8f05..2571cc952 100644
--- a/client/src/app/shared/shared-abuse-list/abuse-list-table.component.html
+++ b/client/src/app/shared/shared-abuse-list/abuse-list-table.component.html
@@ -120,12 +120,12 @@
         <my-global-icon *ngIf="isAbuseRejected(abuse)" [title]="abuse.state.label" iconName="cross"></my-global-icon>
       </td>
 
-      <td class="c-hand abuse-messages" (click)="openAbuseMessagesModal(abuse)">
-        <ng-container *ngIf="isLocalAbuse(abuse)">
+      <td class="abuse-messages">
+        <button class="button-unstyle" *ngIf="isLocalAbuse(abuse)" (click)="openAbuseMessagesModal(abuse)">
           {{ abuse.countMessages }}
 
           <my-global-icon iconName="message-circle"></my-global-icon>
-        </ng-container>
+        </button>
       </td>
 
       <td *ngIf="isAdminView()" class="internal-note" container="body" placement="left auto" [ngbTooltip]="abuse.moderationComment">
diff --git a/client/src/app/shared/shared-actor-image-edit/actor-avatar-edit.component.html b/client/src/app/shared/shared-actor-image-edit/actor-avatar-edit.component.html
index a0f65a3d9..c63b5b361 100644
--- a/client/src/app/shared/shared-actor-image-edit/actor-avatar-edit.component.html
+++ b/client/src/app/shared/shared-actor-image-edit/actor-avatar-edit.component.html
@@ -2,29 +2,29 @@
   <div class="position-relative me-3">
     <my-actor-avatar [actor]="actor" [actorType]="getActorType()" [previewImage]="preview" size="100"></my-actor-avatar>
 
-    <div *ngIf="editable && !hasAvatar()" class="actor-img-edit-button" [ngbTooltip]="avatarFormat" placement="right" container="body">
+    <div *ngIf="editable && !hasAvatar()" class="actor-img-edit-button button-focus-within" [ngbTooltip]="avatarFormat" placement="right" container="body">
       <my-global-icon iconName="upload"></my-global-icon>
       <label class="visually-hidden" for="avatarfile" i18n>Upload a new avatar</label>
       <input #avatarfileInput type="file" name="avatarfile" id="avatarfile" [accept]="avatarExtensions" (change)="onAvatarChange(avatarfileInput)"/>
     </div>
 
     <div *ngIf="editable && hasAvatar()" ngbDropdown placement="right">
-      <div class="actor-img-edit-button" ngbDropdownToggle>
+      <button type="button" class="actor-img-edit-button" ngbDropdownToggle>
         <my-global-icon iconName="edit"></my-global-icon>
         <label class="visually-hidden" for="avatarMenu" i18n>Change your avatar</label>
-      </div>
+      </button>
 
       <div ngbDropdownMenu>
-        <div class="dropdown-item c-hand dropdown-file" [ngbTooltip]="avatarFormat">
+        <div class="dropdown-item dropdown-file button-focus-within" [ngbTooltip]="avatarFormat">
           <my-global-icon iconName="upload"></my-global-icon>
           <span for="avatarfile" i18n>Upload a new avatar</span>
           <input #avatarfileInput type="file" name="avatarfile" id="avatarfile" [accept]="avatarExtensions" (change)="onAvatarChange(avatarfileInput)"/>
         </div>
 
-        <div class="dropdown-item c-hand" (click)="deleteAvatar()" (key.enter)="deleteAvatar()">
+        <button type="button" class="dropdown-item" (click)="deleteAvatar()" (key.enter)="deleteAvatar()">
           <my-global-icon iconName="delete"></my-global-icon>
           <span i18n>Remove avatar</span>
-        </div>
+        </button>
       </div>
 
     </div>
diff --git a/client/src/app/shared/shared-actor-image-edit/actor-avatar-edit.component.scss b/client/src/app/shared/shared-actor-image-edit/actor-avatar-edit.component.scss
index 01e2131ba..689c5873c 100644
--- a/client/src/app/shared/shared-actor-image-edit/actor-avatar-edit.component.scss
+++ b/client/src/app/shared/shared-actor-image-edit/actor-avatar-edit.component.scss
@@ -39,6 +39,10 @@
   right: 5px;
 }
 
+.button-focus-within:focus-within {
+  box-shadow: #{$focus-box-shadow-form} pvar(--mainColorLightest);
+}
+
 .dropdown-item {
   @include dropdown-with-icon-item;
 }
diff --git a/client/src/app/shared/shared-actor-image-edit/actor-banner-edit.component.html b/client/src/app/shared/shared-actor-image-edit/actor-banner-edit.component.html
index d6fe37094..d4ddb2deb 100644
--- a/client/src/app/shared/shared-actor-image-edit/actor-banner-edit.component.html
+++ b/client/src/app/shared/shared-actor-image-edit/actor-banner-edit.component.html
@@ -4,25 +4,25 @@
       <img *ngIf="hasBanner()" [src]="preview || actor.bannerUrl" alt="Banner" />
     </div>
 
-    <div *ngIf="!hasBanner()" class="actor-img-edit-button" [ngbTooltip]="bannerFormat" placement="right" container="body">
+    <div *ngIf="!hasBanner()" class="actor-img-edit-button button-focus-within" [ngbTooltip]="bannerFormat" placement="right" container="body">
       <ng-container *ngTemplateOutlet="uploadNewBanner"></ng-container>
     </div>
 
     <div *ngIf="hasBanner()" ngbDropdown placement="right">
-      <div class="actor-img-edit-button" ngbDropdownToggle>
+      <button type="button" class="actor-img-edit-button" ngbDropdownToggle>
         <my-global-icon iconName="edit"></my-global-icon>
         <label for="bannerMenu" i18n>Change your banner</label>
-      </div>
+      </button>
 
       <div ngbDropdownMenu>
-        <div class="dropdown-item c-hand dropdown-file" [ngbTooltip]="bannerFormat">
+        <div class="dropdown-item dropdown-file button-focus-within" [ngbTooltip]="bannerFormat">
           <ng-container *ngTemplateOutlet="uploadNewBanner"></ng-container>
         </div>
 
-        <div class="dropdown-item c-hand" (click)="deleteBanner()" (key.enter)="deleteBanner()">
+        <button type="button" class="dropdown-item" (click)="deleteBanner()">
           <my-global-icon iconName="delete"></my-global-icon>
           <span i18n>Remove banner</span>
-        </div>
+        </button>
       </div>
     </div>
   </div>
diff --git a/client/src/app/shared/shared-actor-image-edit/actor-banner-edit.component.scss b/client/src/app/shared/shared-actor-image-edit/actor-banner-edit.component.scss
index b2c64fff7..8e5a05603 100644
--- a/client/src/app/shared/shared-actor-image-edit/actor-banner-edit.component.scss
+++ b/client/src/app/shared/shared-actor-image-edit/actor-banner-edit.component.scss
@@ -34,6 +34,10 @@
   }
 }
 
+.button-focus-within:focus-within {
+  box-shadow: #{$focus-box-shadow-form} pvar(--mainColorLightest);
+}
+
 .dropdown-item {
   @include dropdown-with-icon-item;
 }
diff --git a/client/src/app/shared/shared-actor-image/actor-avatar.component.ts b/client/src/app/shared/shared-actor-image/actor-avatar.component.ts
index 8e6ad4015..f1c1aa03f 100644
--- a/client/src/app/shared/shared-actor-image/actor-avatar.component.ts
+++ b/client/src/app/shared/shared-actor-image/actor-avatar.component.ts
@@ -145,13 +145,13 @@ export class ActorAvatarComponent implements OnInit, OnChanges {
     // Keep consistency with CSS
     const themes = {
       '0123456789abc': 'blue',
-      def: 'green',
-      ghi: 'purple',
-      jkl: 'gray',
-      mno: 'yellow',
-      pqr: 'orange',
-      stvu: 'red',
-      wxyz: 'dark-blue'
+      'def': 'green',
+      'ghi': 'purple',
+      'jkl': 'gray',
+      'mno': 'yellow',
+      'pqr': 'orange',
+      'stvu': 'red',
+      'wxyz': 'dark-blue'
     }
 
     const theme = Object.keys(themes)
diff --git a/client/src/app/shared/shared-forms/input-switch.component.html b/client/src/app/shared/shared-forms/input-switch.component.html
index 9a466055a..4017d4aa5 100644
--- a/client/src/app/shared/shared-forms/input-switch.component.html
+++ b/client/src/app/shared/shared-forms/input-switch.component.html
@@ -1,4 +1,2 @@
-<div (click)="update()">
-  <input type="checkbox" [checked]="checked"/>
-  <label class="ms-auto">Toggle</label>
-</div>
+<input type="checkbox" [checked]="checked" [name]="inputName" [id]="inputName" (change)="update()" />
+<label [for]="inputName" class="ms-auto">Toggle</label>
diff --git a/client/src/app/shared/shared-forms/preview-upload.component.html b/client/src/app/shared/shared-forms/preview-upload.component.html
index 11e7bdf7f..8a10a11b0 100644
--- a/client/src/app/shared/shared-forms/preview-upload.component.html
+++ b/client/src/app/shared/shared-forms/preview-upload.component.html
@@ -5,7 +5,7 @@
       icon="edit" (fileChanged)="onFileChanged($event)" [buttonTooltip]="getReactiveFileButtonTooltip()"
     ></my-reactive-file>
 
-    <img *ngIf="imageSrc" [ngStyle]="{ width: previewWidth, height: previewHeight }" [src]="imageSrc" class="preview" />
+    <img *ngIf="imageSrc" [ngStyle]="{ width: previewWidth, height: previewHeight }" [src]="imageSrc" class="preview" alt="Preview" i18n-alt />
     <div *ngIf="!imageSrc" [ngStyle]="{ width: previewWidth, height: previewHeight }" class="preview no-image"></div>
   </div>
 </div>
diff --git a/client/src/app/shared/shared-icons/global-icon.component.ts b/client/src/app/shared/shared-icons/global-icon.component.ts
index 55eb45a75..96179cbe6 100644
--- a/client/src/app/shared/shared-icons/global-icon.component.ts
+++ b/client/src/app/shared/shared-icons/global-icon.component.ts
@@ -3,81 +3,81 @@ import { HooksService } from '@app/core/plugins/hooks.service'
 
 const icons = {
   // misc icons
-  npm: require('!!raw-loader?!../../../assets/images/misc/npm.svg').default,
-  markdown: require('!!raw-loader?!../../../assets/images/misc/markdown.svg').default,
-  language: require('!!raw-loader?!../../../assets/images/misc/language.svg').default,
+  'npm': require('!!raw-loader?!../../../assets/images/misc/npm.svg').default,
+  'markdown': require('!!raw-loader?!../../../assets/images/misc/markdown.svg').default,
+  'language': require('!!raw-loader?!../../../assets/images/misc/language.svg').default,
   'video-lang': require('!!raw-loader?!../../../assets/images/misc/video-lang.svg').default,
-  support: require('!!raw-loader?!../../../assets/images/misc/support.svg').default,
+  'support': require('!!raw-loader?!../../../assets/images/misc/support.svg').default,
   'peertube-x': require('!!raw-loader?!../../../assets/images/misc/peertube-x.svg').default,
-  robot: require('!!raw-loader?!../../../assets/images/misc/miscellaneous-services.svg').default, // material ui
-  videos: require('!!raw-loader?!../../../assets/images/misc/video-library.svg').default, // material ui
-  history: require('!!raw-loader?!../../../assets/images/misc/history.svg').default, // material ui
-  subscriptions: require('!!raw-loader?!../../../assets/images/misc/subscriptions.svg').default, // material ui
+  'robot': require('!!raw-loader?!../../../assets/images/misc/miscellaneous-services.svg').default, // material ui
+  'videos': require('!!raw-loader?!../../../assets/images/misc/video-library.svg').default, // material ui
+  'history': require('!!raw-loader?!../../../assets/images/misc/history.svg').default, // material ui
+  'subscriptions': require('!!raw-loader?!../../../assets/images/misc/subscriptions.svg').default, // material ui
   'playlist-add': require('!!raw-loader?!../../../assets/images/misc/playlist-add.svg').default, // material ui
-  follower: require('!!raw-loader?!../../../assets/images/misc/account-arrow-left.svg').default, // material ui
-  following: require('!!raw-loader?!../../../assets/images/misc/account-arrow-right.svg').default, // material ui
-  tip: require('!!raw-loader?!../../../assets/images/misc/tip.svg').default, // material ui
-  flame: require('!!raw-loader?!../../../assets/images/misc/flame.svg').default,
-  local: require('!!raw-loader?!../../../assets/images/misc/local.svg').default,
+  'follower': require('!!raw-loader?!../../../assets/images/misc/account-arrow-left.svg').default, // material ui
+  'following': require('!!raw-loader?!../../../assets/images/misc/account-arrow-right.svg').default, // material ui
+  'tip': require('!!raw-loader?!../../../assets/images/misc/tip.svg').default, // material ui
+  'flame': require('!!raw-loader?!../../../assets/images/misc/flame.svg').default,
+  'local': require('!!raw-loader?!../../../assets/images/misc/local.svg').default,
 
   // feather icons
-  copy: require('!!raw-loader?!../../../assets/images/feather/copy.svg').default,
-  flag: require('!!raw-loader?!../../../assets/images/feather/flag.svg').default,
-  playlists: require('!!raw-loader?!../../../assets/images/feather/list.svg').default,
-  syndication: require('!!raw-loader?!../../../assets/images/feather/syndication.svg').default,
-  help: require('!!raw-loader?!../../../assets/images/feather/help.svg').default,
-  alert: require('!!raw-loader?!../../../assets/images/feather/alert.svg').default,
-  globe: require('!!raw-loader?!../../../assets/images/feather/globe.svg').default,
-  home: require('!!raw-loader?!../../../assets/images/feather/home.svg').default,
-  trending: require('!!raw-loader?!../../../assets/images/feather/trending.svg').default,
-  search: require('!!raw-loader?!../../../assets/images/feather/search.svg').default,
-  upload: require('!!raw-loader?!../../../assets/images/feather/upload.svg').default,
-  dislike: require('!!raw-loader?!../../../assets/images/feather/dislike.svg').default,
-  like: require('!!raw-loader?!../../../assets/images/feather/like.svg').default,
-  no: require('!!raw-loader?!../../../assets/images/feather/no.svg').default,
+  'copy': require('!!raw-loader?!../../../assets/images/feather/copy.svg').default,
+  'flag': require('!!raw-loader?!../../../assets/images/feather/flag.svg').default,
+  'playlists': require('!!raw-loader?!../../../assets/images/feather/list.svg').default,
+  'syndication': require('!!raw-loader?!../../../assets/images/feather/syndication.svg').default,
+  'help': require('!!raw-loader?!../../../assets/images/feather/help.svg').default,
+  'alert': require('!!raw-loader?!../../../assets/images/feather/alert.svg').default,
+  'globe': require('!!raw-loader?!../../../assets/images/feather/globe.svg').default,
+  'home': require('!!raw-loader?!../../../assets/images/feather/home.svg').default,
+  'trending': require('!!raw-loader?!../../../assets/images/feather/trending.svg').default,
+  'search': require('!!raw-loader?!../../../assets/images/feather/search.svg').default,
+  'upload': require('!!raw-loader?!../../../assets/images/feather/upload.svg').default,
+  'dislike': require('!!raw-loader?!../../../assets/images/feather/dislike.svg').default,
+  'like': require('!!raw-loader?!../../../assets/images/feather/like.svg').default,
+  'no': require('!!raw-loader?!../../../assets/images/feather/no.svg').default,
   'cloud-download': require('!!raw-loader?!../../../assets/images/feather/cloud-download.svg').default,
-  clock: require('!!raw-loader?!../../../assets/images/feather/clock.svg').default,
-  cog: require('!!raw-loader?!../../../assets/images/feather/cog.svg').default,
-  delete: require('!!raw-loader?!../../../assets/images/feather/delete.svg').default,
-  bell: require('!!raw-loader?!../../../assets/images/feather/bell.svg').default,
+  'clock': require('!!raw-loader?!../../../assets/images/feather/clock.svg').default,
+  'cog': require('!!raw-loader?!../../../assets/images/feather/cog.svg').default,
+  'delete': require('!!raw-loader?!../../../assets/images/feather/delete.svg').default,
+  'bell': require('!!raw-loader?!../../../assets/images/feather/bell.svg').default,
   'sign-out': require('!!raw-loader?!../../../assets/images/feather/log-out.svg').default,
   'sign-in': require('!!raw-loader?!../../../assets/images/feather/log-in.svg').default,
-  download: require('!!raw-loader?!../../../assets/images/feather/download.svg').default,
+  'download': require('!!raw-loader?!../../../assets/images/feather/download.svg').default,
   'ownership-change': require('!!raw-loader?!../../../assets/images/feather/share.svg').default,
-  share: require('!!raw-loader?!../../../assets/images/feather/share-2.svg').default,
-  channel: require('!!raw-loader?!../../../assets/images/feather/tv.svg').default,
-  user: require('!!raw-loader?!../../../assets/images/feather/user.svg').default,
+  'share': require('!!raw-loader?!../../../assets/images/feather/share-2.svg').default,
+  'channel': require('!!raw-loader?!../../../assets/images/feather/tv.svg').default,
+  'user': require('!!raw-loader?!../../../assets/images/feather/user.svg').default,
   'user-x': require('!!raw-loader?!../../../assets/images/feather/user-x.svg').default,
-  users: require('!!raw-loader?!../../../assets/images/feather/users.svg').default,
+  'users': require('!!raw-loader?!../../../assets/images/feather/users.svg').default,
   'user-add': require('!!raw-loader?!../../../assets/images/feather/user-plus.svg').default,
-  add: require('!!raw-loader?!../../../assets/images/feather/plus-circle.svg').default,
+  'add': require('!!raw-loader?!../../../assets/images/feather/plus-circle.svg').default,
   'cloud-error': require('!!raw-loader?!../../../assets/images/feather/cloud-off.svg').default,
-  undo: require('!!raw-loader?!../../../assets/images/feather/corner-up-left.svg').default,
+  'undo': require('!!raw-loader?!../../../assets/images/feather/corner-up-left.svg').default,
   'circle-tick': require('!!raw-loader?!../../../assets/images/feather/check-circle.svg').default,
   'more-horizontal': require('!!raw-loader?!../../../assets/images/feather/more-horizontal.svg').default,
   'more-vertical': require('!!raw-loader?!../../../assets/images/feather/more-vertical.svg').default,
-  play: require('!!raw-loader?!../../../assets/images/feather/play.svg').default,
-  p2p: require('!!raw-loader?!../../../assets/images/feather/airplay.svg').default,
-  fullscreen: require('!!raw-loader?!../../../assets/images/feather/maximize.svg').default,
+  'play': require('!!raw-loader?!../../../assets/images/feather/play.svg').default,
+  'p2p': require('!!raw-loader?!../../../assets/images/feather/airplay.svg').default,
+  'fullscreen': require('!!raw-loader?!../../../assets/images/feather/maximize.svg').default,
   'exit-fullscreen': require('!!raw-loader?!../../../assets/images/feather/minimize.svg').default,
-  film: require('!!raw-loader?!../../../assets/images/feather/film.svg').default,
-  edit: require('!!raw-loader?!../../../assets/images/feather/edit-2.svg').default,
+  'film': require('!!raw-loader?!../../../assets/images/feather/film.svg').default,
+  'edit': require('!!raw-loader?!../../../assets/images/feather/edit-2.svg').default,
   'external-link': require('!!raw-loader?!../../../assets/images/feather/external-link.svg').default,
   'eye-open': require('!!raw-loader?!../../../assets/images/feather/eye.svg').default,
   'eye-close': require('!!raw-loader?!../../../assets/images/feather/eye-off.svg').default,
-  refresh: require('!!raw-loader?!../../../assets/images/feather/refresh-cw.svg').default,
-  command: require('!!raw-loader?!../../../assets/images/feather/command.svg').default,
-  go: require('!!raw-loader?!../../../assets/images/feather/arrow-up-right.svg').default,
-  cross: require('!!raw-loader?!../../../assets/images/feather/x.svg').default,
-  tick: require('!!raw-loader?!../../../assets/images/feather/check.svg').default,
-  columns: require('!!raw-loader?!../../../assets/images/feather/columns.svg').default,
-  live: require('!!raw-loader?!../../../assets/images/feather/live.svg').default,
-  repeat: require('!!raw-loader?!../../../assets/images/feather/repeat.svg').default,
+  'refresh': require('!!raw-loader?!../../../assets/images/feather/refresh-cw.svg').default,
+  'command': require('!!raw-loader?!../../../assets/images/feather/command.svg').default,
+  'go': require('!!raw-loader?!../../../assets/images/feather/arrow-up-right.svg').default,
+  'cross': require('!!raw-loader?!../../../assets/images/feather/x.svg').default,
+  'tick': require('!!raw-loader?!../../../assets/images/feather/check.svg').default,
+  'columns': require('!!raw-loader?!../../../assets/images/feather/columns.svg').default,
+  'live': require('!!raw-loader?!../../../assets/images/feather/live.svg').default,
+  'repeat': require('!!raw-loader?!../../../assets/images/feather/repeat.svg').default,
   'chevrons-up': require('!!raw-loader?!../../../assets/images/feather/chevrons-up.svg').default,
   'message-circle': require('!!raw-loader?!../../../assets/images/feather/message-circle.svg').default,
-  codesandbox: require('!!raw-loader?!../../../assets/images/feather/codesandbox.svg').default,
-  award: require('!!raw-loader?!../../../assets/images/feather/award.svg').default,
-  stats: require('!!raw-loader?!../../../assets/images/feather/stats.svg').default
+  'codesandbox': require('!!raw-loader?!../../../assets/images/feather/codesandbox.svg').default,
+  'award': require('!!raw-loader?!../../../assets/images/feather/award.svg').default,
+  'stats': require('!!raw-loader?!../../../assets/images/feather/stats.svg').default
 }
 
 export type GlobalIconName = keyof typeof icons
diff --git a/client/src/app/shared/shared-instance/instance-features-table.component.html b/client/src/app/shared/shared-instance/instance-features-table.component.html
index 205f2bc97..37f53b7c6 100644
--- a/client/src/app/shared/shared-instance/instance-features-table.component.html
+++ b/client/src/app/shared/shared-instance/instance-features-table.component.html
@@ -11,7 +11,7 @@
     <tr>
       <th i18n class="label" scope="row">
         <div>Default NSFW/sensitive videos policy</div>
-        <div class="c-hand more-info" (click)="openQuickSettingsHighlight()">can be redefined by the users</div>
+        <span class="fs-7 fw-normal fst-italic">can be redefined by the users</span>
       </th>
 
       <td class="value">{{ buildNSFWLabel() }}</td>
diff --git a/client/src/app/shared/shared-instance/instance-features-table.component.ts b/client/src/app/shared/shared-instance/instance-features-table.component.ts
index c3df7c594..2e63f6c17 100644
--- a/client/src/app/shared/shared-instance/instance-features-table.component.ts
+++ b/client/src/app/shared/shared-instance/instance-features-table.component.ts
@@ -2,7 +2,6 @@ import { Component, OnInit } from '@angular/core'
 import { ServerService } from '@app/core'
 import { prepareIcu } from '@app/helpers'
 import { ServerConfig } from '@shared/models'
-import { PeertubeModalService } from '../shared-main/peertube-modal/peertube-modal.service'
 
 @Component({
   selector: 'my-instance-features-table',
@@ -14,8 +13,7 @@ export class InstanceFeaturesTableComponent implements OnInit {
   serverConfig: ServerConfig
 
   constructor (
-    private serverService: ServerService,
-    private modalService: PeertubeModalService
+    private serverService: ServerService
   ) { }
 
   get initialUserVideoQuota () {
@@ -69,10 +67,6 @@ export class InstanceFeaturesTableComponent implements OnInit {
     return this.serverService.getServerVersionAndCommit()
   }
 
-  openQuickSettingsHighlight () {
-    this.modalService.openQuickSettingsSubject.next()
-  }
-
   private getApproximateTime (seconds: number) {
     const hours = Math.floor(seconds / 3600)
 
diff --git a/client/src/app/shared/shared-main/angular/number-formatter.pipe.ts b/client/src/app/shared/shared-main/angular/number-formatter.pipe.ts
index e0cb475fc..00cfbc692 100644
--- a/client/src/app/shared/shared-main/angular/number-formatter.pipe.ts
+++ b/client/src/app/shared/shared-main/angular/number-formatter.pipe.ts
@@ -17,7 +17,7 @@ export class NumberFormatterPipe implements PipeTransform {
     return +f
   }
 
-  private dictionary: Array<{ max: number, type: string }> = [
+  private dictionary: { max: number, type: string }[] = [
     { max: 1000, type: '' },
     { max: 1000000, type: 'K' },
     { max: 1000000000, type: 'M' }
diff --git a/client/src/app/shared/shared-main/buttons/action-dropdown.component.html b/client/src/app/shared/shared-main/buttons/action-dropdown.component.html
index bbfab7b37..d4aa9f380 100644
--- a/client/src/app/shared/shared-main/buttons/action-dropdown.component.html
+++ b/client/src/app/shared/shared-main/buttons/action-dropdown.component.html
@@ -40,7 +40,7 @@
 
           <h6
             *ngIf="!action.linkBuilder && action.isHeader && areActionsDisplayed(actions, entry)" [ngClass]="{ 'with-icon': !!action.iconName }"
-            class="dropdown-header" [title]="action.title || ''" (click)="action.handler(entry)" (keyup.enter)="action.handler(entry)"
+            class="dropdown-header" [title]="action.title || ''"
           >
             <ng-container *ngTemplateOutlet="templateActionLabel; context:{ $implicit: action }"></ng-container>
           </h6>
diff --git a/client/src/app/shared/shared-main/buttons/action-dropdown.component.ts b/client/src/app/shared/shared-main/buttons/action-dropdown.component.ts
index e39fbd66d..7d24ff4ae 100644
--- a/client/src/app/shared/shared-main/buttons/action-dropdown.component.ts
+++ b/client/src/app/shared/shared-main/buttons/action-dropdown.component.ts
@@ -55,7 +55,7 @@ export class ActionDropdownComponent<T> {
     return {}
   }
 
-  areActionsDisplayed (actions: Array<DropdownAction<T> | DropdownAction<T>[]>, entry: T): boolean {
+  areActionsDisplayed (actions: (DropdownAction<T> | DropdownAction<T>[])[], entry: T): boolean {
     return actions.some(a => {
       if (Array.isArray(a)) return this.areActionsDisplayed(a, entry)
 
diff --git a/client/src/app/shared/shared-main/buttons/button.component.ts b/client/src/app/shared/shared-main/buttons/button.component.ts
index 63a59cbe1..e3a830891 100644
--- a/client/src/app/shared/shared-main/buttons/button.component.ts
+++ b/client/src/app/shared/shared-main/buttons/button.component.ts
@@ -31,7 +31,7 @@ export class ButtonComponent implements OnInit, OnChanges {
   private buildClasses () {
     this.classes = {
       [this.className]: true,
-      disabled: this.disabled,
+      'disabled': this.disabled,
       'icon-only': !this.label,
       'has-icon': !!this.icon,
       'responsive-label': this.responsiveLabel
diff --git a/client/src/app/shared/shared-main/date/date-toggle.component.html b/client/src/app/shared/shared-main/date/date-toggle.component.html
index 14b6e7d7a..5277ae0e8 100644
--- a/client/src/app/shared/shared-main/date/date-toggle.component.html
+++ b/client/src/app/shared/shared-main/date/date-toggle.component.html
@@ -1,7 +1,10 @@
 <span
   class="date-toggle"
   [title]="getTitle()"
+  role="button"
+  tabindex="0"
   (click)="toggle()"
+  (keyup.enter)="toggle()"
 >
   {{ getContent() }}
 </span>
diff --git a/client/src/app/shared/shared-main/loaders/loader.component.ts b/client/src/app/shared/shared-main/loaders/loader.component.ts
index bd038f8b5..be9e130e7 100644
--- a/client/src/app/shared/shared-main/loaders/loader.component.ts
+++ b/client/src/app/shared/shared-main/loaders/loader.component.ts
@@ -10,8 +10,8 @@ export class LoaderComponent {
 
   private readonly sizes = {
     sm: {
-      width: '1rem',
-      height: '1rem',
+      'width': '1rem',
+      'height': '1rem',
       'border-width': '0.15rem'
     },
     xl: {
diff --git a/client/src/app/shared/shared-main/users/user-notifications.component.html b/client/src/app/shared/shared-main/users/user-notifications.component.html
index a51e08292..351e4dc3f 100644
--- a/client/src/app/shared/shared-main/users/user-notifications.component.html
+++ b/client/src/app/shared/shared-main/users/user-notifications.component.html
@@ -1,6 +1,7 @@
 <div *ngIf="componentPagination.totalItems === 0" class="no-notification" i18n>You don't have notifications.</div>
 
 <div class="notifications" myInfiniteScroller (nearOfBottom)="onNearOfBottom()" [dataObservable]="onDataSubject.asObservable()">
+  <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events,@angular-eslint/template/interactive-supports-focus -->
   <div *ngFor="let notification of notifications" class="notification" [ngClass]="{ unread: !notification.read }" (click)="markAsRead(notification)">
 
     <ng-container [ngSwitch]="notification.type">
diff --git a/client/src/app/shared/shared-main/users/user-quota.component.html b/client/src/app/shared/shared-main/users/user-quota.component.html
index 0e0d38c2a..ac9085bb3 100644
--- a/client/src/app/shared/shared-main/users/user-quota.component.html
+++ b/client/src/app/shared/shared-main/users/user-quota.component.html
@@ -1,6 +1,7 @@
 <div class="user-quota mb-3">
   <div>
-    <label class="user-quota-title" tabindex="0" i18n>Total video quota</label>
+    <div class="mb-2 fw-bold" i18n>Total video quota</div>
+
     <div class="progress" tabindex="0" [ngbTooltip]="titleVideoQuota()">
       <div class="progress-bar" tabindex="0" role="progressbar" [style]="{ width: userVideoQuotaPercentage + '%' }"
         [attr.aria-valuenow]="userVideoQuotaUsed" aria-valuemin="0" [attr.aria-valuemax]="user.videoQuota"></div>
@@ -10,7 +11,8 @@
   </div>
 
   <div *ngIf="hasDailyQuota()" class="mt-3">
-    <label class="user-quota-title" tabindex="0" i18n>Daily video quota</label>
+    <div class="mb-2 fw-bold" i18n>Daily video quota</div>
+
     <div class="progress" tabindex="0" [ngbTooltip]="titleVideoQuotaDaily()">
       <div class="progress-bar" role="progressbar" [style]="{ width: userVideoQuotaDailyPercentage + '%' }"
         [attr.aria-valuenow]="userVideoQuotaUsedDaily" aria-valuemin="0" [attr.aria-valuemax]="user.videoQuotaDaily"></div>
diff --git a/client/src/app/shared/shared-moderation/server-blocklist.component.html b/client/src/app/shared/shared-moderation/server-blocklist.component.html
index e07703cf4..1a13e0207 100644
--- a/client/src/app/shared/shared-moderation/server-blocklist.component.html
+++ b/client/src/app/shared/shared-moderation/server-blocklist.component.html
@@ -14,10 +14,10 @@
   <ng-template pTemplate="caption">
     <div class="caption">
       <div class="left-buttons">
-        <a class="block-button" (click)="addServersToBlock()" (key.enter)="addServersToBlock()">
+        <button class="peertube-create-button" (click)="addServersToBlock()" (key.enter)="addServersToBlock()">
           <my-global-icon iconName="add" aria-hidden="true"></my-global-icon>
           <ng-container i18n>Mute domain</ng-container>
-        </a>
+        </button>
       </div>
 
       <div class="ms-auto">
diff --git a/client/src/app/shared/shared-moderation/server-blocklist.component.scss b/client/src/app/shared/shared-moderation/server-blocklist.component.scss
index 1a6b0435f..10b9a40a1 100644
--- a/client/src/app/shared/shared-moderation/server-blocklist.component.scss
+++ b/client/src/app/shared/shared-moderation/server-blocklist.component.scss
@@ -20,7 +20,3 @@ a {
   @include peertube-button;
   @include grey-button;
 }
-
-.block-button {
-  @include create-button;
-}
diff --git a/client/src/app/shared/shared-tables/video-cell.component.html b/client/src/app/shared/shared-tables/video-cell.component.html
index ea432b70e..38e7dea17 100644
--- a/client/src/app/shared/shared-tables/video-cell.component.html
+++ b/client/src/app/shared/shared-tables/video-cell.component.html
@@ -1,7 +1,7 @@
 <a [href]="getVideoUrl()" class="table-video-link" [title]="video.name" target="_blank" rel="noopener noreferrer">
   <div class="table-video">
     <div class="table-video-image">
-      <img [src]="video.thumbnailPath">
+      <img [src]="video.thumbnailPath" alt="">
 
       <ng-content select="[image]"></ng-content>
     </div>
diff --git a/client/src/app/shared/shared-thumbnail/video-thumbnail.component.html b/client/src/app/shared/shared-thumbnail/video-thumbnail.component.html
index 57fcdd899..6c9a8b91c 100644
--- a/client/src/app/shared/shared-thumbnail/video-thumbnail.component.html
+++ b/client/src/app/shared/shared-thumbnail/video-thumbnail.component.html
@@ -11,15 +11,15 @@
 
   <div *ngIf="displayWatchLaterPlaylist" class="video-thumbnail-actions-overlay">
     <ng-container *ngIf="inWatchLaterPlaylist !== true">
-      <div class="video-thumbnail-watch-later-overlay" placement="left" [ngbTooltip]="addToWatchLaterText" container="body" (click)="onWatchLaterClick($event)">
+      <button class="video-thumbnail-watch-later-overlay button-unstyle" placement="left" [ngbTooltip]="addToWatchLaterText" container="body" (click)="onWatchLaterClick($event)">
         <my-global-icon iconName="clock" [attr.aria-label]="addToWatchLaterText" role="button"></my-global-icon>
-      </div>
+      </button>
     </ng-container>
 
     <ng-container *ngIf="inWatchLaterPlaylist === true">
-      <div class="video-thumbnail-watch-later-overlay" placement="left" [ngbTooltip]="addedToWatchLaterText" container="body" (click)="onWatchLaterClick($event)">
+      <button class="video-thumbnail-watch-later-overlay button-unstyle" placement="left" [ngbTooltip]="addedToWatchLaterText" container="body" (click)="onWatchLaterClick($event)">
         <my-global-icon iconName="tick" [attr.aria-label]="addedToWatchLaterText" role="button"></my-global-icon>
-      </div>
+      </button>
     </ng-container>
   </div>
 
diff --git a/client/src/app/shared/shared-video-live/live-stream-information.component.html b/client/src/app/shared/shared-video-live/live-stream-information.component.html
index 8e61bdbb3..e385b429c 100644
--- a/client/src/app/shared/shared-video-live/live-stream-information.component.html
+++ b/client/src/app/shared/shared-video-live/live-stream-information.component.html
@@ -33,7 +33,7 @@
     </div>
 
     <div class="journal" *ngIf="latestLiveSessions.length !== 0">
-      <label i18n>Latest live sessions</label>
+      <div class="mb-2 fw-bold" i18n>Latest live sessions</div>
 
       <div class="journal-session" *ngFor="let session of latestLiveSessions">
         <span i18n class="pt-badge badge-success" *ngIf="!getErrorLabel(session)">Success</span>
diff --git a/client/src/app/shared/shared-video-miniature/video-download.component.html b/client/src/app/shared/shared-video-miniature/video-download.component.html
index 3d8ce22de..a3676e159 100644
--- a/client/src/app/shared/shared-video-miniature/video-download.component.html
+++ b/client/src/app/shared/shared-video-miniature/video-download.component.html
@@ -111,9 +111,9 @@
         </div>
       </div>
 
-      <div
+      <button
         (click)="isAdvancedCustomizationCollapsed = !isAdvancedCustomizationCollapsed"
-        role="button" class="advanced-filters-button"
+        class="advanced-filters-button button-unstyle"
         [attr.aria-expanded]="!isAdvancedCustomizationCollapsed" aria-controls="collapseBasic"
       >
         <ng-container *ngIf="isAdvancedCustomizationCollapsed">
@@ -131,7 +131,7 @@
             Simple
           </ng-container>
         </ng-container>
-      </div>
+      </button>
     </ng-container>
   </div>
 
diff --git a/client/src/app/shared/shared-video-miniature/video-filters-header.component.html b/client/src/app/shared/shared-video-miniature/video-filters-header.component.html
index 48bb0d812..3d39c6fdc 100644
--- a/client/src/app/shared/shared-video-miniature/video-filters-header.component.html
+++ b/client/src/app/shared/shared-video-miniature/video-filters-header.component.html
@@ -2,7 +2,7 @@
   <div class="label-description muted" i18n>
     Update
     <a routerLink="/my-account/settings" [fragment]="fragment">
-      <span (click)="onAccountSettingsClick($event)">your settings</span>
+      <button class="button-unstyle" (click)="onAccountSettingsClick($event)">your settings</button>
     </a
   ></div>
 </ng-template>
@@ -23,9 +23,9 @@
         <my-global-icon iconName="chevrons-up"></my-global-icon>
       </button>
 
-      <div
+      <button
         *ngFor="let activeFilter of filters.getActiveFilters()" (click)="resetFilter(activeFilter.key, activeFilter.canRemove)"
-        class="active-filter pastille" [ngClass]="{ 'can-remove': activeFilter.canRemove }" [title]="getFilterTitle(activeFilter.canRemove)"
+        class="active-filter pastille button-unstyle" [ngClass]="{ 'can-remove': activeFilter.canRemove }" [title]="getFilterTitle(activeFilter.canRemove)"
       >
         <span>
           {{ activeFilter.label }}
@@ -34,7 +34,7 @@
         </span>
 
         <my-global-icon *ngIf="activeFilter.canRemove" iconName="cross"></my-global-icon>
-      </div>
+      </button>
     </div>
 
     <ng-select
diff --git a/client/src/app/shared/shared-video-miniature/video-filters.model.ts b/client/src/app/shared/shared-video-miniature/video-filters.model.ts
index 4069ab4b5..6b4b72c75 100644
--- a/client/src/app/shared/shared-video-miniature/video-filters.model.ts
+++ b/client/src/app/shared/shared-video-miniature/video-filters.model.ts
@@ -37,7 +37,7 @@ export class VideoFilters {
   private activeFilters: { key: string, canRemove: boolean, label: string, value?: string }[] = []
   private defaultNSFWPolicy: NSFWPolicyType
 
-  private onChangeCallbacks: Array<() => void> = []
+  private onChangeCallbacks: (() => void)[] = []
   private oldFormObjectString: string
 
   private readonly hiddenFields: string[] = []
diff --git a/client/src/app/shared/shared-video-miniature/videos-list.component.html b/client/src/app/shared/shared-video-miniature/videos-list.component.html
index 8c8bf80d9..909c86d3d 100644
--- a/client/src/app/shared/shared-video-miniature/videos-list.component.html
+++ b/client/src/app/shared/shared-video-miniature/videos-list.component.html
@@ -16,9 +16,9 @@
           <ng-container *ngTemplateOutlet="actionContent; context:{ $implicit: action }"></ng-container>
         </a>
 
-        <a *ngIf="!action.routerLink && !action.href && action.click" class="ms-2" (click)="action.click($event)" (key.enter)="action.click($event)">
+        <button *ngIf="!action.routerLink && !action.href && action.click" class="ms-2 button-unstyle" (click)="action.click($event)" (key.enter)="action.click($event)">
           <ng-container *ngTemplateOutlet="actionContent; context:{ $implicit: action }"></ng-container>
-        </a>
+        </button>
 
         <a *ngIf="!action.routerLink && action.href && action.click" class="ms-2" (click)="action.click($event)" (key.enter)="action.click($event)" [href]="action.href">
           <ng-container *ngTemplateOutlet="actionContent; context:{ $implicit: action }"></ng-container>
diff --git a/client/src/app/shared/shared-video-miniature/videos-selection.component.html b/client/src/app/shared/shared-video-miniature/videos-selection.component.html
index 6c6db4b96..8931158a9 100644
--- a/client/src/app/shared/shared-video-miniature/videos-selection.component.html
+++ b/client/src/app/shared/shared-video-miniature/videos-selection.component.html
@@ -20,9 +20,9 @@
     <!-- Display only once -->
     <div class="action-selection-mode" *ngIf="isInSelectionMode() === true && i === 0">
       <div class="action-selection-mode-child">
-        <span i18n class="action-button action-button-cancel-selection" (click)="abortSelectionMode()">
+        <button i18n class="action-button action-button-cancel-selection" (click)="abortSelectionMode()">
           Cancel
-        </span>
+        </button>
 
         <ng-container *ngTemplateOutlet="globalButtonsTemplate"></ng-container>
       </div>
diff --git a/client/src/app/shared/shared-video-playlist/video-add-to-playlist.component.html b/client/src/app/shared/shared-video-playlist/video-add-to-playlist.component.html
index 6d787796a..f2f69236c 100644
--- a/client/src/app/shared/shared-video-playlist/video-add-to-playlist.component.html
+++ b/client/src/app/shared/shared-video-playlist/video-add-to-playlist.component.html
@@ -14,20 +14,20 @@
       *ngFor="let playlist of videoPlaylists"
       class="playlist dropdown-item" [ngClass]="{ 'has-optional-row': playlist.optionalRowDisplayed }"
     >
-      <div class="primary-row" (click)="toggleMainPlaylist($event, playlist)">
+      <button class="primary-row button-unstyle" (click)="toggleMainPlaylist($event, playlist)">
         <my-peertube-checkbox
           [disabled]="isPresentMultipleTimes(playlist) || playlist.optionalRowDisplayed" [inputName]="getPrimaryInputName(playlist)"
           [ngModel]="isPrimaryCheckboxChecked(playlist)" [onPushWorkaround]="true"
         ></my-peertube-checkbox>
 
-        <label class="display-name">
+        <label [for]="getPrimaryInputName(playlist)" class="display-name">
           {{ playlist.displayName }}
         </label>
 
-        <div class="optional-row-icon" *ngIf="isPrimaryCheckboxChecked(playlist)" (click)="$event.stopPropagation(); toggleOptionalRow(playlist)">
+        <button class="optional-row-icon button-unstyle" *ngIf="isPrimaryCheckboxChecked(playlist)" (click)="$event.stopPropagation(); toggleOptionalRow(playlist)">
           <my-global-icon iconName="add" aria-hidden="true"></my-global-icon>
-        </div>
-      </div>
+        </button>
+      </button>
 
       <div class="optional-rows" *ngIf="playlist.optionalRowDisplayed">
         <div class="header-label" i18n>Start at</div>
@@ -58,11 +58,11 @@
     </div>
   </div>
 
-  <div class="new-playlist-button dropdown-item" (click)="openCreateBlock($event)" [hidden]="isNewPlaylistBlockOpened">
+  <button class="new-playlist-button dropdown-item" (click)="openCreateBlock($event)" [hidden]="isNewPlaylistBlockOpened">
     <my-global-icon iconName="add" aria-hidden="true"></my-global-icon>
 
     <span i18n>Create a private playlist</span>
-  </div>
+  </button>
 
   <form class="new-playlist-block dropdown-item" *ngIf="isNewPlaylistBlockOpened" (ngSubmit)="createPlaylist()" [formGroup]="form">
     <div class="form-group">
diff --git a/client/src/app/shared/shared-video-playlist/video-add-to-playlist.component.scss b/client/src/app/shared/shared-video-playlist/video-add-to-playlist.component.scss
index de2f1032b..d1aa95266 100644
--- a/client/src/app/shared/shared-video-playlist/video-add-to-playlist.component.scss
+++ b/client/src/app/shared/shared-video-playlist/video-add-to-playlist.component.scss
@@ -67,6 +67,8 @@
   }
 
   .optional-row-icon {
+    @include margin-left(5px);
+
     display: flex;
     align-items: center;
     font-size: 14px;
@@ -79,6 +81,10 @@
       width: 19px;
       height: 19px;
     }
+
+    &:hover {
+      opacity: 0.8;
+    }
   }
 }
 
diff --git a/client/src/app/shared/shared-video-playlist/video-playlist-element-miniature.component.html b/client/src/app/shared/shared-video-playlist/video-playlist-element-miniature.component.html
index 40c58166d..75afa0709 100644
--- a/client/src/app/shared/shared-video-playlist/video-playlist-element-miniature.component.html
+++ b/client/src/app/shared/shared-video-playlist/video-playlist-element-miniature.component.html
@@ -59,10 +59,10 @@
 
     <div ngbDropdownMenu>
       <ng-container *ngIf="playlistElement.video">
-        <div class="dropdown-item" (click)="toggleDisplayTimestampsOptions($event, playlistElement)">
+        <button ngbDropdownItem (click)="toggleDisplayTimestampsOptions($event, playlistElement)">
           <my-global-icon iconName="edit" aria-hidden="true"></my-global-icon>
           <ng-container i18n>Edit starts/stops at</ng-container>
-        </div>
+        </button>
 
         <div class="timestamp-options" *ngIf="displayTimestampOptions">
           <div>
@@ -97,10 +97,10 @@
         </div>
       </ng-container>
 
-      <span class="dropdown-item" (click)="removeFromPlaylist(playlistElement)">
+      <button ngbDropdownItem (click)="removeFromPlaylist(playlistElement)">
         <my-global-icon iconName="delete" aria-hidden="true"></my-global-icon>
         <ng-container i18n>Delete from {{ playlist?.displayName }}</ng-container>
-      </span>
+      </button>
     </div>
   </div>
 </div>
diff --git a/client/src/app/shared/shared-video-playlist/video-playlist-element-miniature.component.scss b/client/src/app/shared/shared-video-playlist/video-playlist-element-miniature.component.scss
index 0f085231c..cd9d0ce53 100644
--- a/client/src/app/shared/shared-video-playlist/video-playlist-element-miniature.component.scss
+++ b/client/src/app/shared/shared-video-playlist/video-playlist-element-miniature.component.scss
@@ -156,6 +156,7 @@ my-video-thumbnail,
     @include padding-left(35px);
 
     padding-top: 0;
+    margin-top: 5px;
     margin-bottom: 15px;
 
     > div {