Improve (accessibility title) and move action-buttons on left in tables (#2980)

* Improve and move action-buttons on left in tables

* Focus on my-delete and my-button

* Correct spaces syntax

* Move user-action dropdown on the left

Co-authored-by: kimsible <kimsible@users.noreply.github.com>

5 files changed, 21 insertions, 20 deletions

diff --git a/client/src/app/+my-account/+my-account-video-channels/my-account-video-channels.component.html b/client/src/app/+my-account/+my-account-video-channels/my-account-video-channels.component.html
index c20215cf9..f4ff32366 100644
--- a/client/src/app/+my-account/+my-account-video-channels/my-account-video-channels.component.html
+++ b/client/src/app/+my-account/+my-account-video-channels/my-account-video-channels.component.html
@@ -34,8 +34,8 @@
       <div i18n class="video-channel-videos">{videoChannel.videosCount, plural, =0 {No videos} =1 {1 video} other {{{ videoChannel.videosCount }} videos}}</div>
 
       <div class="video-channel-buttons">
-        <my-edit-button [routerLink]="[ 'update', videoChannel.nameWithHost ]"></my-edit-button>
-        <my-delete-button (click)="deleteVideoChannel(videoChannel)"></my-delete-button>
+        <my-edit-button label [routerLink]="[ 'update', videoChannel.nameWithHost ]"></my-edit-button>
+        <my-delete-button label (click)="deleteVideoChannel(videoChannel)"></my-delete-button>
       </div>
 
       <div *ngIf="!isInSmallView" class="w-100 d-flex justify-content-end">
diff --git a/client/src/app/+my-account/my-account-ownership/my-account-ownership.component.html b/client/src/app/+my-account/my-account-ownership/my-account-ownership.component.html
index 4475178c7..fd2163fb4 100644
--- a/client/src/app/+my-account/my-account-ownership/my-account-ownership.component.html
+++ b/client/src/app/+my-account/my-account-ownership/my-account-ownership.component.html
@@ -15,6 +15,7 @@
 >
   <ng-template pTemplate="header">
     <tr>
+      <th style="width: 150px;" i18n>Actions</th>
       <th style="width: 35%;" i18n>Initiator</th>
       <th style="width: 65%;" i18n>Video</th>
       <th style="width: 150px;" i18n pSortableColumn="createdAt">
@@ -22,12 +23,17 @@
         <p-sortIcon field="createdAt"></p-sortIcon>
       </th>
       <th style="width: 100px;" i18n>Status</th>
-      <th style="width: 130px;" i18n>Action</th>
     </tr>
   </ng-template>
 
   <ng-template pTemplate="body" let-videoChangeOwnership>
     <tr>
+      <td class="action-cell">
+        <ng-container *ngIf="videoChangeOwnership.status === 'WAITING'">
+          <my-button i18n-title title="Accept" icon="tick" (click)="openAcceptModal(videoChangeOwnership)"></my-button>
+          <my-button i18n-title title="Refuse" icon="cross" (click)="refuse(videoChangeOwnership)"></my-button>
+        </ng-container>
+      </td>
       <td>
         <a [href]="videoChangeOwnership.initiatorAccount.url" i18n-title title="Open account in a new tab" target="_blank" rel="noopener noreferrer">
           <div class="chip two-lines">
@@ -64,14 +70,8 @@
       <td>{{ videoChangeOwnership.createdAt | date: 'short' }}</td>
 
       <td>
-        <span class="badge" [ngClass]="getStatusClass(videoChangeOwnership.status)">{{ videoChangeOwnership.status }}</span>
-      </td>
-
-      <td class="action-cell">
-        <ng-container *ngIf="videoChangeOwnership.status === 'WAITING'">
-          <my-button i18n-label label="Accept" icon="tick" (click)="openAcceptModal(videoChangeOwnership)"></my-button>
-          <my-button i18n-label label="Refuse" icon="cross" (click)="refuse(videoChangeOwnership)"></my-button>
-        </ng-container>
+        <span class="badge"
+          [ngClass]="getStatusClass(videoChangeOwnership.status)">{{ videoChangeOwnership.status }}</span>
       </td>
     </tr>
   </ng-template>
diff --git a/client/src/app/+my-account/my-account-video-imports/my-account-video-imports.component.html b/client/src/app/+my-account/my-account-video-imports/my-account-video-imports.component.html
index 854126443..1d3a45f76 100644
--- a/client/src/app/+my-account/my-account-video-imports/my-account-video-imports.component.html
+++ b/client/src/app/+my-account/my-account-video-imports/my-account-video-imports.component.html
@@ -13,11 +13,11 @@
   <ng-template pTemplate="header">
     <tr>
       <th style="width: 40px;"></th>
+      <th style="width: 70px">Action</th>
       <th style="width: 45%" i18n>Target</th>
       <th style="width: 55%" i18n>Video</th>
       <th style="width: 150px" i18n>State</th>
       <th style="width: 150px" i18n pSortableColumn="createdAt">Created <p-sortIcon field="createdAt"></p-sortIcon></th>
-      <th style="width: 70px"></th>
     </tr>
   </ng-template>
 
@@ -29,6 +29,11 @@
         </span>
       </td>
 
+      <td class="action-cell">
+        <my-edit-button *ngIf="isVideoImportSuccess(videoImport) && videoImport.video"
+          [routerLink]="getEditVideoUrl(videoImport.video)"></my-edit-button>
+      </td>
+
       <td>
         <a *ngIf="videoImport.targetUrl; else torrent" [href]="videoImport.targetUrl" target="_blank" rel="noopener noreferrer">{{ videoImport.targetUrl }}</a>
         <ng-template #torrent>
@@ -52,10 +57,6 @@
       </td>
 
       <td>{{ videoImport.createdAt | date: 'short' }}</td>
-
-      <td class="action-cell">
-        <my-edit-button label=" " *ngIf="isVideoImportSuccess(videoImport) && videoImport.video" [routerLink]="getEditVideoUrl(videoImport.video)"></my-edit-button>
-      </td>
     </tr>
   </ng-template>
 
diff --git a/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlists.component.html b/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlists.component.html
index d8e3fb2fa..3176bb8da 100644
--- a/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlists.component.html
+++ b/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlists.component.html
@@ -24,9 +24,9 @@
     </div>
 
     <div *ngIf="isRegularPlaylist(playlist)" class="video-playlist-buttons">
-      <my-delete-button (click)="deleteVideoPlaylist(playlist)"></my-delete-button>
+      <my-delete-button label (click)="deleteVideoPlaylist(playlist)"></my-delete-button>
 
-      <my-edit-button [routerLink]="[ 'update', playlist.uuid ]"></my-edit-button>
+      <my-edit-button label [routerLink]="[ 'update', playlist.uuid ]"></my-edit-button>
     </div>
   </div>
 </div>
diff --git a/client/src/app/+my-account/my-account-videos/my-account-videos.component.html b/client/src/app/+my-account/my-account-videos/my-account-videos.component.html
index faeb3b56c..779b42ab7 100644
--- a/client/src/app/+my-account/my-account-videos/my-account-videos.component.html
+++ b/client/src/app/+my-account/my-account-videos/my-account-videos.component.html
@@ -31,9 +31,9 @@
 
   <ng-template ptTemplate="rowButtons" let-video>
     <div class="action-button">
-      <my-delete-button (click)="deleteVideo(video)"></my-delete-button>
+      <my-delete-button label (click)="deleteVideo(video)"></my-delete-button>
 
-      <my-edit-button [routerLink]="[ '/videos', 'update', video.uuid ]"></my-edit-button>
+      <my-edit-button label [routerLink]="[ '/videos', 'update', video.uuid ]"></my-edit-button>
 
       <my-button i18n-label label="Change ownership"
                  className="action-button-change-ownership grey-button"