From c6d2384aa7db4b0d6f7d145bc78b3fcb026462c5 Mon Sep 17 00:00:00 2001
From: Chocobozzz <me@florianbigard.com>
Date: Thu, 12 Oct 2023 15:01:17 +0200
Subject: [PATCH] Fix global buttons accessibility

---
 .../contact-admin-modal.component.html        |  5 +-
 .../follow-modal.component.html               |  4 +-
 .../process-registration-modal.component.html |  4 +-
 client/src/app/+login/login.component.html    | 10 ++--
 .../my-accept-ownership.component.html        |  4 +-
 .../video-change-ownership.component.html     | 12 +++--
 .../video-caption-add-modal.component.html    |  4 +-
 ...-caption-edit-modal-content.component.html |  4 +-
 .../comment/video-comment-add.component.html  | 23 +++++---
 client/src/app/app.component.html             |  4 +-
 .../app/menu/language-chooser.component.html  |  4 +-
 ...account-setup-warning-modal.component.html |  4 +-
 .../modal/admin-welcome-modal.component.html  |  4 +-
 client/src/app/modal/confirm.component.html   |  4 +-
 .../src/app/modal/custom-modal.component.html |  5 +-
 ...stance-config-warning-modal.component.html |  4 +-
 .../modal/quick-settings-modal.component.html |  4 +-
 .../abuse-message-modal.component.html        |  4 +-
 .../moderation-comment-modal.component.html   |  4 +-
 .../batch-domains-modal.component.html        |  4 +-
 .../report-modals/report.component.html       |  4 +-
 .../report-modals/video-report.component.html |  4 +-
 .../user-ban-modal.component.html             |  4 +-
 .../video-block.component.html                |  4 +-
 .../support-modal.component.html              |  4 +-
 .../live-stream-information.component.html    |  4 +-
 .../video-download.component.html             |  4 +-
 ...-playlist-element-miniature.component.html |  9 ++--
 ...-playlist-element-miniature.component.scss | 54 +++++++++----------
 29 files changed, 138 insertions(+), 68 deletions(-)

diff --git a/client/src/app/+about/about-instance/contact-admin-modal.component.html b/client/src/app/+about/about-instance/contact-admin-modal.component.html
index fd15fd898..531d7e946 100644
--- a/client/src/app/+about/about-instance/contact-admin-modal.component.html
+++ b/client/src/app/+about/about-instance/contact-admin-modal.component.html
@@ -1,7 +1,10 @@
 <ng-template #modal>
   <div class="modal-header">
     <h1 i18n class="modal-title">Contact the administrator(s)<p class="modal-subtitle">{{ instanceName }}</p></h1>
-    <my-global-icon iconName="cross" aria-label="Close" tabindex="0" role="button" (click)="hide()" (keydown.enter)="hide()"></my-global-icon>
+
+    <button class="border-0 p-0" title="Close this modal" i18n-title (click)="hide()">
+      <my-global-icon iconName="cross"></my-global-icon>
+    </button>
   </div>
 
   <div class="modal-body">
diff --git a/client/src/app/+admin/follows/following-list/follow-modal.component.html b/client/src/app/+admin/follows/following-list/follow-modal.component.html
index 347296838..403a97b9c 100644
--- a/client/src/app/+admin/follows/following-list/follow-modal.component.html
+++ b/client/src/app/+admin/follows/following-list/follow-modal.component.html
@@ -2,7 +2,9 @@
   <div class="modal-header">
     <h4 i18n class="modal-title">Follow</h4>
 
-    <my-global-icon iconName="cross" aria-label="Close" role="button" (click)="hide()"></my-global-icon>
+    <button class="border-0 p-0" title="Close this modal" i18n-title (click)="hide()">
+      <my-global-icon iconName="cross"></my-global-icon>
+    </button>
   </div>
 
   <div class="modal-body">
diff --git a/client/src/app/+admin/moderation/registration-list/process-registration-modal.component.html b/client/src/app/+admin/moderation/registration-list/process-registration-modal.component.html
index 10553d486..e80697594 100644
--- a/client/src/app/+admin/moderation/registration-list/process-registration-modal.component.html
+++ b/client/src/app/+admin/moderation/registration-list/process-registration-modal.component.html
@@ -5,7 +5,9 @@
       <ng-container *ngIf="isReject()">Reject {{ registration.username }} registration</ng-container>
     </h4>
 
-    <my-global-icon iconName="cross" aria-label="Close" role="button" (click)="hide()"></my-global-icon>
+    <button class="border-0 p-0" title="Close this modal" i18n-title (click)="hide()">
+      <my-global-icon iconName="cross"></my-global-icon>
+    </button>
   </div>
 
   <form novalidate [formGroup]="form" (ngSubmit)="processRegistration()">
diff --git a/client/src/app/+login/login.component.html b/client/src/app/+login/login.component.html
index 89f579a5f..13cc72d7a 100644
--- a/client/src/app/+login/login.component.html
+++ b/client/src/app/+login/login.component.html
@@ -1,7 +1,7 @@
-<h1 i18n class="title-page-v2">
+<h1 class="title-page-v2">
   <strong class="underline-orange">{{ instanceName }}</strong>
-  >
-  Login
+
+  <ng-container i18n>Login</ng-container>
 </h1>
 
 <div class="margin-content">
@@ -120,7 +120,9 @@
   <div class="modal-header">
     <h4 i18n class="modal-title">Forgot your password</h4>
 
-    <my-global-icon iconName="cross" aria-label="Close" role="button" (click)="hideForgotPasswordModal()"></my-global-icon>
+    <button class="border-0 p-0" title="Close this modal" i18n-title (click)="hideForgotPasswordModal()">
+      <my-global-icon iconName="cross"></my-global-icon>
+    </button>
   </div>
 
   <div class="modal-body text-start">
diff --git a/client/src/app/+my-library/my-ownership/my-accept-ownership/my-accept-ownership.component.html b/client/src/app/+my-library/my-ownership/my-accept-ownership/my-accept-ownership.component.html
index f54381d46..f75b166f9 100644
--- a/client/src/app/+my-library/my-ownership/my-accept-ownership/my-accept-ownership.component.html
+++ b/client/src/app/+my-library/my-ownership/my-accept-ownership/my-accept-ownership.component.html
@@ -2,7 +2,9 @@
   <div class="modal-header">
     <h1 i18n class="modal-title">Accept ownership</h1>
 
-    <my-global-icon iconName="cross" aria-label="Close" role="button" (click)="dismiss()"></my-global-icon>
+    <button class="border-0 p-0" title="Close this modal" i18n-title (click)="dismiss()">
+      <my-global-icon iconName="cross"></my-global-icon>
+    </button>
   </div>
 
   <div class="modal-body" [formGroup]="form">
diff --git a/client/src/app/+my-library/my-videos/modals/video-change-ownership.component.html b/client/src/app/+my-library/my-videos/modals/video-change-ownership.component.html
index 2f824669d..0c800f2d1 100644
--- a/client/src/app/+my-library/my-videos/modals/video-change-ownership.component.html
+++ b/client/src/app/+my-library/my-videos/modals/video-change-ownership.component.html
@@ -2,14 +2,20 @@
   <div class="modal-header">
     <h4 i18n class="modal-title">Change ownership</h4>
 
-    <my-global-icon iconName="cross" aria-label="Close" role="button" (click)="dismiss()"></my-global-icon>
+    <button class="border-0 p-0" title="Close this modal" i18n-title (click)="dismiss()">
+      <my-global-icon iconName="cross"></my-global-icon>
+    </button>
   </div>
 
   <div class="modal-body" [formGroup]="form">
     <div class="form-group">
       <label i18n for="next-ownership-username">Select the next owner</label>
-      <p-autoComplete formControlName="username" [suggestions]="usernamePropositions"
-                      (completeMethod)="search($event)" id="next-ownership-username"></p-autoComplete>
+
+      <p-autoComplete
+        formControlName="username" [suggestions]="usernamePropositions"
+        (completeMethod)="search($event)" id="next-ownership-username"
+      ></p-autoComplete>
+
       <div *ngIf="formErrors.username" class="form-error" role="alert">
         {{ formErrors.username }}
       </div>
diff --git a/client/src/app/+videos/+video-edit/shared/video-caption-add-modal.component.html b/client/src/app/+videos/+video-edit/shared/video-caption-add-modal.component.html
index 0eabfdbe7..9df122aa7 100644
--- a/client/src/app/+videos/+video-edit/shared/video-caption-add-modal.component.html
+++ b/client/src/app/+videos/+video-edit/shared/video-caption-add-modal.component.html
@@ -3,7 +3,9 @@
 
     <div class="modal-header">
       <h4 i18n class="modal-title">Add caption</h4>
-      <my-global-icon iconName="cross" aria-label="Close" role="button" (click)="hide()"></my-global-icon>
+      <button class="border-0 p-0" title="Close this modal" i18n-title (click)="hide()">
+      <my-global-icon iconName="cross"></my-global-icon>
+    </button>
     </div>
 
     <div class="modal-body">
diff --git a/client/src/app/+videos/+video-edit/shared/video-caption-edit-modal-content/video-caption-edit-modal-content.component.html b/client/src/app/+videos/+video-edit/shared/video-caption-edit-modal-content/video-caption-edit-modal-content.component.html
index 387e25192..5abad6eff 100644
--- a/client/src/app/+videos/+video-edit/shared/video-caption-edit-modal-content/video-caption-edit-modal-content.component.html
+++ b/client/src/app/+videos/+video-edit/shared/video-caption-edit-modal-content/video-caption-edit-modal-content.component.html
@@ -1,7 +1,9 @@
 <ng-container [formGroup]="form">
   <div class="modal-header">
     <h4 i18n class="modal-title">Edit caption</h4>
-    <my-global-icon iconName="cross" aria-label="Close" role="button" (click)="hide()"></my-global-icon>
+    <button class="border-0 p-0" title="Close this modal" i18n-title (click)="hide()">
+      <my-global-icon iconName="cross"></my-global-icon>
+    </button>
   </div>
 
   <div class="modal-body">
diff --git a/client/src/app/+videos/+video-watch/shared/comment/video-comment-add.component.html b/client/src/app/+videos/+video-watch/shared/comment/video-comment-add.component.html
index 9465fcffa..c2847562a 100644
--- a/client/src/app/+videos/+video-watch/shared/comment/video-comment-add.component.html
+++ b/client/src/app/+videos/+video-watch/shared/comment/video-comment-add.component.html
@@ -3,11 +3,13 @@
     <my-actor-avatar [actor]="user?.account" [actorType]="getAvatarActorType()" size="25"></my-actor-avatar>
 
     <div class="textarea-wrapper">
-      <textarea i18n-placeholder placeholder="Add comment..." myAutoResize
-                [readonly]="(user === null) ? true : false"
-                (click)="openVisitorModal($event)"
-                formControlName="text" [ngClass]="{ 'input-error': formErrors['text'] }"
-                (keyup.control.enter)="onValidKey()" (keyup.meta.enter)="onValidKey()" #textarea>
+      <textarea
+        i18n-placeholder placeholder="Add comment..." myAutoResize
+        [readonly]="(user === null) ? true : false"
+        (click)="openVisitorModal($event)"
+        formControlName="text" [ngClass]="{ 'input-error': formErrors['text'] }"
+        (keyup.control.enter)="onValidKey()" (keyup.meta.enter)="onValidKey()" #textarea
+      >
       </textarea>
 
       <my-help
@@ -57,7 +59,10 @@
 <ng-template #visitorModal let-modal>
   <div class="modal-header">
     <h4 class="modal-title" id="modal-basic-title" i18n>You are one step away from commenting</h4>
-    <my-global-icon iconName="cross" aria-label="Close" role="button" (click)="hideModals()"></my-global-icon>
+
+    <button class="border-0 p-0" title="Close this modal" i18n-title (click)="hideModals()">
+      <my-global-icon iconName="cross"></my-global-icon>
+    </button>
   </div>
 
   <div class="modal-body">
@@ -81,8 +86,12 @@
 <ng-template #emojiModal>
   <div class="modal-header">
     <h4 class="modal-title" id="modal-basic-title" i18n>Markdown Emoji List</h4>
-    <my-global-icon iconName="cross" aria-label="Close" role="button" (click)="hideModals()"></my-global-icon>
+
+    <button class="border-0 p-0" title="Close this modal" i18n-title (click)="hideModals()">
+      <my-global-icon iconName="cross"></my-global-icon>
+    </button>
   </div>
+
   <div class="modal-body">
     <div class="emoji-flex">
       <div class="emoji-flex-item" *ngFor="let emojiMarkup of getEmojiMarkupList()">
diff --git a/client/src/app/app.component.html b/client/src/app/app.component.html
index aa742bf03..6068df927 100644
--- a/client/src/app/app.component.html
+++ b/client/src/app/app.component.html
@@ -40,7 +40,9 @@
           <div [innerHTML]="broadcastMessage.message"></div>
 
           <button
-          *ngIf="broadcastMessage.dismissable" (click)="hideBroadcastMessage()" class="border-0" title="Close this message" i18n-title>
+            *ngIf="broadcastMessage.dismissable" (click)="hideBroadcastMessage()"
+            class="border-0" title="Close this message" i18n-title
+          >
             <my-global-icon iconName="cross"></my-global-icon>
           </button>
         </div>
diff --git a/client/src/app/menu/language-chooser.component.html b/client/src/app/menu/language-chooser.component.html
index 8aa7b9ab2..ec4ac389e 100644
--- a/client/src/app/menu/language-chooser.component.html
+++ b/client/src/app/menu/language-chooser.component.html
@@ -1,7 +1,9 @@
 <ng-template #modal let-hide="close">
   <div class="modal-header">
     <h4 i18n class="modal-title">Change the language</h4>
-    <my-global-icon iconName="cross" aria-label="Close" role="button" (click)="hide()"></my-global-icon>
+    <button class="border-0 p-0" title="Close this modal" i18n-title (click)="hide()">
+      <my-global-icon iconName="cross"></my-global-icon>
+    </button>
   </div>
 
 
diff --git a/client/src/app/modal/account-setup-warning-modal.component.html b/client/src/app/modal/account-setup-warning-modal.component.html
index 7698c53fe..ce4e3bd1c 100644
--- a/client/src/app/modal/account-setup-warning-modal.component.html
+++ b/client/src/app/modal/account-setup-warning-modal.component.html
@@ -1,7 +1,9 @@
 <ng-template #modal let-hide="close">
   <div class="modal-header">
     <h4 i18n class="modal-title">Welcome to {{ instanceName }}, dear user!</h4>
-    <my-global-icon iconName="cross" aria-label="Close" role="button" (click)="hide()"></my-global-icon>
+    <button class="border-0 p-0" title="Close this modal" i18n-title (click)="hide()">
+      <my-global-icon iconName="cross"></my-global-icon>
+    </button>
   </div>
 
   <div class="modal-body">
diff --git a/client/src/app/modal/admin-welcome-modal.component.html b/client/src/app/modal/admin-welcome-modal.component.html
index 826b547c3..79014d4bb 100644
--- a/client/src/app/modal/admin-welcome-modal.component.html
+++ b/client/src/app/modal/admin-welcome-modal.component.html
@@ -1,7 +1,9 @@
 <ng-template #modal let-hide="close">
   <div class="modal-header">
     <h4 i18n class="modal-title">Welcome to PeerTube, dear administrator!</h4>
-    <my-global-icon iconName="cross" aria-label="Close" role="button" (click)="hide()"></my-global-icon>
+    <button class="border-0 p-0" title="Close this modal" i18n-title (click)="hide()">
+      <my-global-icon iconName="cross"></my-global-icon>
+    </button>
   </div>
 
   <div class="modal-body">
diff --git a/client/src/app/modal/confirm.component.html b/client/src/app/modal/confirm.component.html
index 33696d0a5..09028dc1b 100644
--- a/client/src/app/modal/confirm.component.html
+++ b/client/src/app/modal/confirm.component.html
@@ -3,7 +3,9 @@
   <div class="modal-header">
     <h4 class="modal-title">{{ title }}</h4>
 
-    <my-global-icon iconName="cross" aria-label="Close" role="button" (click)="dismiss()"></my-global-icon>
+    <button class="border-0 p-0" title="Close this modal" i18n-title (click)="dismiss()">
+      <my-global-icon iconName="cross"></my-global-icon>
+    </button>
   </div>
 
   <div class="modal-body" >
diff --git a/client/src/app/modal/custom-modal.component.html b/client/src/app/modal/custom-modal.component.html
index cdfbfbb6a..79fc8ea32 100644
--- a/client/src/app/modal/custom-modal.component.html
+++ b/client/src/app/modal/custom-modal.component.html
@@ -1,7 +1,10 @@
 <ng-template #modal let-hide="close">
   <div class="modal-header">
     <h4 class="modal-title">{{title}}</h4>
-    <my-global-icon *ngIf="close" iconName="cross" aria-label="Close" role="button" (click)="onCloseClick()"></my-global-icon>
+
+    <button *ngIf="close" class="border-0 p-0" title="Close this modal" i18n-title (click)="onCloseClick()">
+      <my-global-icon iconName="cross"></my-global-icon>
+    </button>
   </div>
 
   <div class="modal-body" [innerHTML]="content"></div>
diff --git a/client/src/app/modal/instance-config-warning-modal.component.html b/client/src/app/modal/instance-config-warning-modal.component.html
index f085aa9de..10ce1dda3 100644
--- a/client/src/app/modal/instance-config-warning-modal.component.html
+++ b/client/src/app/modal/instance-config-warning-modal.component.html
@@ -1,7 +1,9 @@
 <ng-template #modal let-hide="close">
   <div class="modal-header">
     <h4 i18n class="modal-title">Configuration warning!</h4>
-    <my-global-icon iconName="cross" aria-label="Close" role="button" (click)="hide()"></my-global-icon>
+    <button class="border-0 p-0" title="Close this modal" i18n-title (click)="hide()">
+      <my-global-icon iconName="cross"></my-global-icon>
+    </button>
   </div>
 
   <div class="modal-body">
diff --git a/client/src/app/modal/quick-settings-modal.component.html b/client/src/app/modal/quick-settings-modal.component.html
index 5c55ee028..9db3117a9 100644
--- a/client/src/app/modal/quick-settings-modal.component.html
+++ b/client/src/app/modal/quick-settings-modal.component.html
@@ -1,7 +1,9 @@
 <ng-template #modal let-hide="close">
   <div class="modal-header">
     <h4 i18n class="modal-title">My settings</h4>
-    <my-global-icon iconName="cross" aria-label="Close" role="button" (click)="hide()"></my-global-icon>
+    <button class="border-0 p-0" title="Close this modal" i18n-title (click)="hide()">
+      <my-global-icon iconName="cross"></my-global-icon>
+    </button>
   </div>
 
   <div class="modal-body">
diff --git a/client/src/app/shared/shared-abuse-list/abuse-message-modal.component.html b/client/src/app/shared/shared-abuse-list/abuse-message-modal.component.html
index f251cf44f..b40ca08f7 100644
--- a/client/src/app/shared/shared-abuse-list/abuse-message-modal.component.html
+++ b/client/src/app/shared/shared-abuse-list/abuse-message-modal.component.html
@@ -5,7 +5,9 @@
       <ng-container i18n *ngIf="!isAdminView">Messages with the moderation team</ng-container>
     </h4>
 
-    <my-global-icon iconName="cross" aria-label="Close" role="button" (click)="hide()"></my-global-icon>
+    <button class="border-0 p-0" title="Close this modal" i18n-title (click)="hide()">
+      <my-global-icon iconName="cross"></my-global-icon>
+    </button>
   </div>
 
   <div class="modal-body">
diff --git a/client/src/app/shared/shared-abuse-list/moderation-comment-modal.component.html b/client/src/app/shared/shared-abuse-list/moderation-comment-modal.component.html
index 8534c5b71..b41664aac 100644
--- a/client/src/app/shared/shared-abuse-list/moderation-comment-modal.component.html
+++ b/client/src/app/shared/shared-abuse-list/moderation-comment-modal.component.html
@@ -2,7 +2,9 @@
   <div class="modal-header">
     <h4 i18n class="modal-title">Moderation comment</h4>
 
-    <my-global-icon iconName="cross" aria-label="Close" role="button" (click)="hide()"></my-global-icon>
+    <button class="border-0 p-0" title="Close this modal" i18n-title (click)="hide()">
+      <my-global-icon iconName="cross"></my-global-icon>
+    </button>
   </div>
 
   <div class="modal-body">
diff --git a/client/src/app/shared/shared-moderation/batch-domains-modal.component.html b/client/src/app/shared/shared-moderation/batch-domains-modal.component.html
index b40759a74..0b0295924 100644
--- a/client/src/app/shared/shared-moderation/batch-domains-modal.component.html
+++ b/client/src/app/shared/shared-moderation/batch-domains-modal.component.html
@@ -2,7 +2,9 @@
   <div class="modal-header">
     <h4 class="modal-title">{{ action }}</h4>
 
-    <my-global-icon iconName="cross" aria-label="Close" role="button" (click)="hide()"></my-global-icon>
+    <button class="border-0 p-0" title="Close this modal" i18n-title (click)="hide()">
+      <my-global-icon iconName="cross"></my-global-icon>
+    </button>
   </div>
 
   <div class="modal-body">
diff --git a/client/src/app/shared/shared-moderation/report-modals/report.component.html b/client/src/app/shared/shared-moderation/report-modals/report.component.html
index 210bd3a14..1eead6d9d 100644
--- a/client/src/app/shared/shared-moderation/report-modals/report.component.html
+++ b/client/src/app/shared/shared-moderation/report-modals/report.component.html
@@ -1,7 +1,9 @@
 <ng-template #modal>
   <div class="modal-header">
     <h4 class="modal-title">{{ modalTitle }}</h4>
-    <my-global-icon iconName="cross" aria-label="Close" role="button" (click)="hide()"></my-global-icon>
+    <button class="border-0 p-0" title="Close this modal" i18n-title (click)="hide()">
+      <my-global-icon iconName="cross"></my-global-icon>
+    </button>
   </div>
 
   <div class="modal-body">
diff --git a/client/src/app/shared/shared-moderation/report-modals/video-report.component.html b/client/src/app/shared/shared-moderation/report-modals/video-report.component.html
index a989f2dd1..421c0c425 100644
--- a/client/src/app/shared/shared-moderation/report-modals/video-report.component.html
+++ b/client/src/app/shared/shared-moderation/report-modals/video-report.component.html
@@ -1,7 +1,9 @@
 <ng-template #modal>
   <div class="modal-header">
     <h4 i18n class="modal-title">Report video "{{ video.name }}"</h4>
-    <my-global-icon iconName="cross" aria-label="Close" role="button" (click)="hide()"></my-global-icon>
+    <button class="border-0 p-0" title="Close this modal" i18n-title (click)="hide()">
+      <my-global-icon iconName="cross"></my-global-icon>
+    </button>
   </div>
 
   <div class="modal-body">
diff --git a/client/src/app/shared/shared-moderation/user-ban-modal.component.html b/client/src/app/shared/shared-moderation/user-ban-modal.component.html
index c083f4b09..e1acee7d5 100644
--- a/client/src/app/shared/shared-moderation/user-ban-modal.component.html
+++ b/client/src/app/shared/shared-moderation/user-ban-modal.component.html
@@ -2,7 +2,9 @@
   <div class="modal-header">
     <h4 i18n class="modal-title">{{ getModalTitle() }}</h4>
 
-    <my-global-icon iconName="cross" aria-label="Close" role="button" (click)="hide()"></my-global-icon>
+    <button class="border-0 p-0" title="Close this modal" i18n-title (click)="hide()">
+      <my-global-icon iconName="cross"></my-global-icon>
+    </button>
   </div>
 
   <div class="modal-body">
diff --git a/client/src/app/shared/shared-moderation/video-block.component.html b/client/src/app/shared/shared-moderation/video-block.component.html
index 50db4bd57..f73cb7bc1 100644
--- a/client/src/app/shared/shared-moderation/video-block.component.html
+++ b/client/src/app/shared/shared-moderation/video-block.component.html
@@ -9,7 +9,9 @@
       <h4 i18n class="modal-title" *ngIf="getSingleVideo().isLive">Block live "{{ getSingleVideo().name }}"</h4>
     </ng-container>
 
-    <my-global-icon iconName="cross" aria-label="Close" role="button" (click)="hide()"></my-global-icon>
+    <button class="border-0 p-0" title="Close this modal" i18n-title (click)="hide()">
+      <my-global-icon iconName="cross"></my-global-icon>
+    </button>
   </div>
 
   <div class="modal-body">
diff --git a/client/src/app/shared/shared-support-modal/support-modal.component.html b/client/src/app/shared/shared-support-modal/support-modal.component.html
index 289adcb6a..48b8bbc72 100644
--- a/client/src/app/shared/shared-support-modal/support-modal.component.html
+++ b/client/src/app/shared/shared-support-modal/support-modal.component.html
@@ -1,7 +1,9 @@
 <ng-template #modal let-hide="close">
   <div class="modal-header">
     <h4 i18n class="modal-title">Support {{ displayName }}</h4>
-    <my-global-icon iconName="cross" aria-label="Close" role="button" (click)="hide()"></my-global-icon>
+    <button class="border-0 p-0" title="Close this modal" i18n-title (click)="hide()">
+      <my-global-icon iconName="cross"></my-global-icon>
+    </button>
   </div>
 
   <div class="modal-body" [innerHTML]="htmlSupport"></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 cabae6256..72ec94ab0 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
@@ -2,7 +2,9 @@
   <div class="modal-header">
     <h4 i18n class="modal-title">Live information</h4>
 
-    <my-global-icon iconName="cross" aria-label="Close" role="button" (click)="dismiss()"></my-global-icon>
+    <button class="border-0 p-0" title="Close this modal" i18n-title (click)="dismiss()">
+      <my-global-icon iconName="cross"></my-global-icon>
+    </button>
   </div>
 
   <div class="modal-body" *ngIf="live">
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 a3676e159..7426aafe1 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
@@ -11,7 +11,9 @@
       </div>
     </h4>
 
-    <my-global-icon iconName="cross" aria-label="Close" role="button" (click)="hide()"></my-global-icon>
+    <button class="border-0 p-0" title="Close this modal" i18n-title (click)="hide()">
+      <my-global-icon iconName="cross"></my-global-icon>
+    </button>
   </div>
 
   <div class="modal-body">
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 a083ca667..6e384eea7 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
@@ -53,10 +53,13 @@
 
   <my-edit-button *ngIf="owned && touchScreenEditButton" [ptRouterLink]="[ '/my-library', 'video-playlists', playlist.uuid ]"></my-edit-button>
 
-  <div *ngIf="owned" class="more dropdown-root" ngbDropdown #moreDropdown="ngbDropdown" placement="left auto"
-       (openChange)="onDropdownOpenChange()" autoClose="outside" container="body"
+  <div
+    *ngIf="owned" class="more dropdown-root" ngbDropdown #moreDropdown="ngbDropdown" placement="left auto"
+    (openChange)="onDropdownOpenChange()" autoClose="outside" container="body"
   >
-    <my-global-icon iconName="more-vertical" ngbDropdownToggle role="button" class="icon-more" (click)="$event.preventDefault()"></my-global-icon>
+    <button class="border-0 p-0 more-button" (click)="$event.preventDefault()" ngbDropdownToggle>
+      <my-global-icon iconName="more-vertical"></my-global-icon>
+    </button>
 
     <div ngbDropdownMenu>
       <ng-container *ngIf="playlistElement.video">
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 cd9d0ce53..fb3018b49 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
@@ -29,24 +29,6 @@ my-video-thumbnail,
   padding: 10px;
   border-bottom: 1px solid $separator-border-color;
 
-  .more {
-    display: flex;
-  }
-
-  &:hover {
-    background-color: rgba(0, 0, 0, 0.05);
-
-    .more {
-      opacity: 1;
-    }
-  }
-
-  @media not all and (hover: hover) and (pointer: fine) {
-    .more {
-      opacity: 1 !important;
-    }
-  }
-
   &.playing {
     background-color: rgba(0, 0, 0, 0.02);
   }
@@ -87,20 +69,38 @@ my-video-thumbnail,
   }
 
   .more {
+    display: flex;
+    align-items: center;
+  }
+
+  .more-button {
     opacity: 0;
 
-    &.show {
-      opacity: 1;
+    &::after {
+      border: 0;
     }
 
-    .icon-more {
+    my-global-icon {
       @include apply-svg-color(pvar(--greyForegroundColor));
+    }
+  }
 
-      display: flex;
+  &:hover,
+  &:focus {
+    background-color: rgba(0, 0, 0, 0.05);
+  }
 
-      &::after {
-        border: 0;
-      }
+  &:hover,
+  &:focus-within,
+  .show {
+    .more-button {
+      opacity: 1;
+    }
+  }
+
+  @media not all and (hover: hover) and (pointer: fine) {
+    .more-button {
+      opacity: 1 !important;
     }
   }
 }
@@ -183,7 +183,7 @@ my-video-thumbnail,
     my-edit-button {
       display: none;
 
-      + .more {
+      + .more-button {
         display: inline-flex;
       }
     }
@@ -204,7 +204,7 @@ my-video-thumbnail,
       }
     }
 
-    my-edit-button + .more {
+    my-edit-button + .more-button {
       display: none;
     }
   }