Fix accessibility action buttons and display on imports and followers list

5 files changed, 6 insertions, 24 deletions

diff --git a/client/src/app/+admin/follows/followers-list/followers-list.component.html b/client/src/app/+admin/follows/followers-list/followers-list.component.html
index 48b5681f4..ce603459e 100644
--- a/client/src/app/+admin/follows/followers-list/followers-list.component.html
+++ b/client/src/app/+admin/follows/followers-list/followers-list.component.html
@@ -44,8 +44,8 @@
 
       <td class="action-cell">
         <ng-container *ngIf="follow.state === 'pending'">
-          <my-button i18n-label label="Accept" icon="tick" (click)="acceptFollower(follow)"></my-button>
-          <my-button i18n-label label="Refuse" icon="cross" (click)="rejectFollower(follow)"></my-button>
+          <my-button i18n-title title="Accept" icon="tick" (click)="acceptFollower(follow)"></my-button>
+          <my-button i18n-title title="Refuse" icon="cross" (click)="rejectFollower(follow)"></my-button>
         </ng-container>
 
         <my-delete-button *ngIf="follow.state === 'accepted'" (click)="deleteFollower(follow)"></my-delete-button>
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 3e07550c1..4caa076a3 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
@@ -45,7 +45,7 @@
       <td>{{ videoImport.createdAt | date: 'short' }}</td>
 
       <td class="action-cell">
-        <my-edit-button *ngIf="isVideoImportSuccess(videoImport) && videoImport.video" [routerLink]="getEditVideoUrl(videoImport.video)"></my-edit-button>
+        <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/shared/shared-main/buttons/button.component.html b/client/src/app/shared/shared-main/buttons/button.component.html
index a7dd4bb10..8eccd5c3c 100644
--- a/client/src/app/shared/shared-main/buttons/button.component.html
+++ b/client/src/app/shared/shared-main/buttons/button.component.html
@@ -1,4 +1,4 @@
-<span class="action-button" [ngClass]="getClasses()" [title]="getTitle()">
+<span class="action-button" [ngClass]="getClasses()" [title]="getTitle()" tabindex="0">
   <my-global-icon *ngIf="!loading" [iconName]="icon"></my-global-icon>
   <my-small-loader [loading]="loading"></my-small-loader>
 
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 398b6db1e..6643e6013 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,4 +1,4 @@
-<span class="action-button action-button-delete grey-button" [title]="title" role="button">
+<span class="action-button action-button-delete grey-button" [title]="title" role="button" tabindex="0">
   <my-global-icon iconName="delete" aria-hidden="true"></my-global-icon>
 
   <span class="button-label" *ngIf="label">{{ label }}</span>
diff --git a/client/src/sass/primeng-custom.scss b/client/src/sass/primeng-custom.scss
index a9a950dc0..2388c0469 100644
--- a/client/src/sass/primeng-custom.scss
+++ b/client/src/sass/primeng-custom.scss
@@ -79,15 +79,6 @@ p-table {
     tr {
       &:hover {
         background-color: pvar(--submenuColor) !important;
-
-        .action-cell {
-          .dropdown-root,
-          my-edit-button,
-          my-delete-button,
-          my-button {
-            display: inline-block !important;
-          }
-        }
       }
 
       td {
@@ -164,18 +155,9 @@ p-table {
     my-edit-button,
     my-delete-button,
     my-button {
-      display: none !important;
+      display: inline-block !important;
       margin-left: 5px;
 
-      &.show {
-        display: inline-block !important;
-      }
-
-      // keep displaying on touchscreen
-      @media not all and (hover: hover) and (pointer: fine) {
-        display: inline-block !important;
-      }
-
       :first-child {
         margin-left: 0
       }