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>

9 files changed, 53 insertions, 20 deletions

diff --git a/client/src/app/shared/shared-main/buttons/button.component.html b/client/src/app/shared/shared-main/buttons/button.component.html
index 8eccd5c3c..65e06f7a4 100644
--- a/client/src/app/shared/shared-main/buttons/button.component.html
+++ b/client/src/app/shared/shared-main/buttons/button.component.html
@@ -1,8 +1,8 @@
-<span class="action-button" [ngClass]="getClasses()" [title]="getTitle()" tabindex="0">
+<span class="action-button" [ngClass]="getClasses()" [ngbTooltip]="getTitle()" tabindex="0">
   <my-global-icon *ngIf="!loading" [iconName]="icon"></my-global-icon>
   <my-small-loader [loading]="loading"></my-small-loader>
 
-  <span class="button-label">{{ label }}</span>
+  <span *ngIf="label" class="button-label">{{ label }}</span>
 
   <ng-content></ng-content>
 </span>
diff --git a/client/src/app/shared/shared-main/buttons/button.component.scss b/client/src/app/shared/shared-main/buttons/button.component.scss
index 06fde9f1d..f73b7b808 100644
--- a/client/src/app/shared/shared-main/buttons/button.component.scss
+++ b/client/src/app/shared/shared-main/buttons/button.component.scss
@@ -1,6 +1,10 @@
 @import '_variables';
 @import '_mixins';
 
+:host {
+  outline: none;
+}
+
 my-small-loader ::ng-deep .root {
   display: inline-block;
   margin: 0 3px 0 0;
diff --git a/client/src/app/shared/shared-main/buttons/delete-button.component.html b/client/src/app/shared/shared-main/buttons/delete-button.component.html
index 6643e6013..c94d8d0c9 100644
--- a/client/src/app/shared/shared-main/buttons/delete-button.component.html
+++ b/client/src/app/shared/shared-main/buttons/delete-button.component.html
@@ -1,6 +1,5 @@
-<span class="action-button action-button-delete grey-button" [title]="title" role="button" tabindex="0">
+<span class="action-button action-button-delete grey-button" [ngbTooltip]="title" role="button" tabindex="0">
   <my-global-icon iconName="delete" aria-hidden="true"></my-global-icon>
 
   <span class="button-label" *ngIf="label">{{ label }}</span>
-  <span class="button-label" i18n *ngIf="!label">Delete</span>
 </span>
diff --git a/client/src/app/shared/shared-main/buttons/delete-button.component.ts b/client/src/app/shared/shared-main/buttons/delete-button.component.ts
index 39e31900f..aced0f881 100644
--- a/client/src/app/shared/shared-main/buttons/delete-button.component.ts
+++ b/client/src/app/shared/shared-main/buttons/delete-button.component.ts
@@ -9,12 +9,23 @@ import { I18n } from '@ngx-translate/i18n-polyfill'
 
 export class DeleteButtonComponent implements OnInit {
   @Input() label: string
-
-  title: string
+  @Input() title: string
 
   constructor (private i18n: I18n) { }
 
   ngOnInit () {
-    this.title = this.label || this.i18n('Delete')
+    // <my-delete-button /> No label
+    if (this.label === undefined && !this.title) {
+      this.title = this.i18n('Delete')
+    }
+
+    // <my-delete-button label /> Use default label
+    if (this.label === '') {
+      this.label = this.i18n('Delete')
+
+      if (!this.title) {
+        this.title = this.label
+      }
+    }
   }
 }
diff --git a/client/src/app/shared/shared-main/buttons/edit-button.component.html b/client/src/app/shared/shared-main/buttons/edit-button.component.html
index 4ffc563d9..ecb709be1 100644
--- a/client/src/app/shared/shared-main/buttons/edit-button.component.html
+++ b/client/src/app/shared/shared-main/buttons/edit-button.component.html
@@ -1,6 +1,5 @@
-<a class="action-button action-button-edit grey-button" [routerLink]="routerLink" i18n-title title="Update">
+<a class="action-button action-button-edit grey-button" [routerLink]="routerLink" [ngbTooltip]="title">
   <my-global-icon iconName="edit" aria-hidden="true"></my-global-icon>
 
   <span class="button-label" *ngIf="label">{{ label }}</span>
-  <span class="button-label" i18n *ngIf="!label">Update</span>
 </a>
diff --git a/client/src/app/shared/shared-main/buttons/edit-button.component.ts b/client/src/app/shared/shared-main/buttons/edit-button.component.ts
index 9cfe1a3bb..d8ae39b84 100644
--- a/client/src/app/shared/shared-main/buttons/edit-button.component.ts
+++ b/client/src/app/shared/shared-main/buttons/edit-button.component.ts
@@ -1,4 +1,5 @@
-import { Component, Input } from '@angular/core'
+import { Component, Input, OnInit } from '@angular/core'
+import { I18n } from '@ngx-translate/i18n-polyfill'
 
 @Component({
   selector: 'my-edit-button',
@@ -6,7 +7,26 @@ import { Component, Input } from '@angular/core'
   templateUrl: './edit-button.component.html'
 })
 
-export class EditButtonComponent {
+export class EditButtonComponent implements OnInit {
   @Input() label: string
+  @Input() title: string
   @Input() routerLink: string[] | string = []
+
+  constructor (private i18n: I18n) { }
+
+  ngOnInit () {
+    // <my-edit-button /> No label
+    if (this.label === undefined && !this.title) {
+      this.title = this.i18n('Update')
+    }
+
+    // <my-edit-button label /> Use default label
+    if (this.label === '') {
+      this.label = this.i18n('Update')
+
+      if (!this.title) {
+        this.title = this.label
+      }
+    }
+  }
 }
diff --git a/client/src/app/shared/shared-moderation/account-blocklist.component.html b/client/src/app/shared/shared-moderation/account-blocklist.component.html
index df98cf84e..5af1095f1 100644
--- a/client/src/app/shared/shared-moderation/account-blocklist.component.html
+++ b/client/src/app/shared/shared-moderation/account-blocklist.component.html
@@ -24,14 +24,17 @@
 
   <ng-template pTemplate="header">
     <tr>
+      <th style="width: 150px;">Action</th> <!-- column for action buttons -->
       <th style="width: 100%;" i18n>Account</th>
       <th style="width: 150px;" i18n pSortableColumn="createdAt">Muted at <p-sortIcon field="createdAt"></p-sortIcon></th>
-      <th style="width: 150px;"></th> <!-- column for action buttons -->
     </tr>
   </ng-template>
 
   <ng-template pTemplate="body" let-accountBlock>
     <tr>
+      <td class="action-cell">
+        <button class="unblock-button" (click)="unblockAccount(accountBlock)" i18n>Unmute</button>
+      </td>
       <td>
         <a [href]="accountBlock.blockedAccount.url" i18n-title title="Open account in a new tab" target="_blank" rel="noopener noreferrer">
           <div class="chip two-lines">
@@ -50,9 +53,6 @@
       </td>
 
       <td>{{ accountBlock.createdAt | date: 'short' }}</td>
-      <td class="action-cell">
-        <button class="unblock-button" (click)="unblockAccount(accountBlock)" i18n>Unmute</button>
-      </td>
     </tr>
   </ng-template>
 
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 4621414d9..598e1a42c 100644
--- a/client/src/app/shared/shared-moderation/server-blocklist.component.html
+++ b/client/src/app/shared/shared-moderation/server-blocklist.component.html
@@ -28,14 +28,17 @@
 
   <ng-template pTemplate="header">
     <tr>
+      <th style="width: 150px;">Action</th> <!-- column for action buttons -->
       <th style="width: 100%;" i18n>Instance</th>
       <th style="width: 150px;" i18n pSortableColumn="createdAt">Muted at <p-sortIcon field="createdAt"></p-sortIcon></th>
-      <th style="width: 150px;"></th> <!-- column for action buttons -->
     </tr>
   </ng-template>
 
   <ng-template pTemplate="body" let-serverBlock>
     <tr>
+      <td class="action-cell">
+        <button class="unblock-button" (click)="unblockServer(serverBlock)" i18n>Unmute</button>
+      </td>
       <td>
         <a [href]="'https://' + serverBlock.blockedServer.host" i18n-title title="Open instance in a new tab" target="_blank" rel="noopener noreferrer">
           {{ serverBlock.blockedServer.host }}
@@ -43,9 +46,6 @@
         </a>
       </td>
       <td>{{ serverBlock.createdAt | date: 'short' }}</td>
-      <td class="action-cell">
-        <button class="unblock-button" (click)="unblockServer(serverBlock)" i18n>Unmute</button>
-      </td>
     </tr>
   </ng-template>
 
diff --git a/client/src/app/shared/shared-moderation/user-moderation-dropdown.component.ts b/client/src/app/shared/shared-moderation/user-moderation-dropdown.component.ts
index 78c2658df..34fa7366c 100644
--- a/client/src/app/shared/shared-moderation/user-moderation-dropdown.component.ts
+++ b/client/src/app/shared/shared-moderation/user-moderation-dropdown.component.ts
@@ -19,7 +19,7 @@ export class UserModerationDropdownComponent implements OnInit, OnChanges {
   @Input() prependActions: DropdownAction<{ user: User, account: Account }>[]
 
   @Input() buttonSize: 'normal' | 'small' = 'normal'
-  @Input() placement = 'left-top left-bottom auto'
+  @Input() placement = 'right-top right-bottom auto'
   @Input() label: string
   @Input() container: 'body' | undefined = undefined