Fix global buttons accessibility

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">

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">

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()">

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">

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">

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>

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">

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">

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()">

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>

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>
 
 

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">

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">

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" >

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>

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">

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">

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">

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">

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">

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">

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">

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">

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">

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>

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">

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">

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">

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;
     }
   }