Fix table expand button accessibility

client/src/app/+admin/follows/video-redundancies-list/video-redundancies-list.component.html

@@ -36,8 +36,8 @@
 
   <ng-template pTemplate="body" let-expanded="expanded" let-redundancy>
     <tr>
-      <td class="expand-cell" [pRowToggler]="redundancy">
-        <my-table-expander-icon i18n-ngbTooltip ngbTooltip="List redundancies" [expanded]="expanded"></my-table-expander-icon>
+      <td class="expand-cell">
+        <my-table-expander-icon [pRowToggler]="redundancy" [expanded]="expanded" i18n-tooltip tooltip="List redundancies"></my-table-expander-icon>
       </td>
 
       <td class="action-cell">

client/src/app/+admin/moderation/registration-list/registration-list.component.html

@@ -53,8 +53,8 @@
         <p-tableCheckbox [value]="registration" ariaLabel="Select this row" i18n-ariaLabel></p-tableCheckbox>
       </td>
 
-      <td class="expand-cell" [pRowToggler]="registration">
-        <my-table-expander-icon [expanded]="expanded"></my-table-expander-icon>
+      <td class="expand-cell">
+        <my-table-expander-icon [pRowToggler]="registration" [expanded]="expanded"></my-table-expander-icon>
       </td>
 
       <td class="action-cell">

client/src/app/+admin/moderation/video-block-list/video-block-list.component.html

@@ -38,8 +38,9 @@
       <td *ngIf="!videoBlock.reason">
         <span i18n class="visually-hidden">No more information is available for this row</span>
       </td>
-      <td class="expand-cell" *ngIf="videoBlock.reason" [pRowToggler]="videoBlock">
-        <my-table-expander-icon [expanded]="expanded"></my-table-expander-icon>
+
+      <td class="expand-cell" *ngIf="videoBlock.reason" >
+        <my-table-expander-icon [pRowToggler]="videoBlock" [expanded]="expanded"></my-table-expander-icon>
       </td>
 
       <td class="action-cell">

client/src/app/+admin/overview/comments/video-comment-list.component.html

@@ -57,8 +57,8 @@
         <p-tableCheckbox [value]="videoComment" ariaLabel="Select this row" i18n-ariaLabel></p-tableCheckbox>
       </td>
 
-      <td class="expand-cell" [pRowToggler]="videoComment">
-        <my-table-expander-icon i18n-ngbTooltip ngbTooltip="See full comment" [expanded]="expanded"></my-table-expander-icon>
+      <td class="expand-cell">
+        <my-table-expander-icon [pRowToggler]="videoComment" i18n-tooltip tooltip="See full comment" [expanded]="expanded"></my-table-expander-icon>
       </td>
 
       <td class="action-cell">

client/src/app/+admin/overview/users/user-list/user-list.component.html

@@ -79,8 +79,8 @@
         <p-tableCheckbox [value]="user" ariaLabel="Select this row" i18n-ariaLabel></p-tableCheckbox>
       </td>
 
-      <td class="expand-cell" [ngClass]="{ 'empty-cell': !user.blockedReason }" [pRowToggler]="user">
-        <my-table-expander-icon *ngIf="user.blockedReason" [expanded]="expanded"></my-table-expander-icon>
+      <td class="expand-cell" [ngClass]="{ 'empty-cell': !user.blockedReason }">
+        <my-table-expander-icon *ngIf="user.blockedReason" [pRowToggler]="user" [expanded]="expanded"></my-table-expander-icon>
       </td>
 
       <td class="action-cell">

client/src/app/+admin/overview/videos/video-list.component.html

@@ -54,8 +54,8 @@
         <p-tableCheckbox [value]="video" ariaLabel="Select this row" i18n-ariaLabel></p-tableCheckbox>
       </td>
 
-      <td class="expand-cell" [pRowToggler]="video">
-        <my-table-expander-icon [expanded]="expanded"></my-table-expander-icon>
+      <td class="expand-cell">
+        <my-table-expander-icon [pRowToggler]="video" [expanded]="expanded"></my-table-expander-icon>
       </td>
 
       <td class="action-cell">

client/src/app/+admin/system/jobs/jobs.component.html

@@ -53,8 +53,8 @@
 
   <ng-template pTemplate="body" let-expanded="expanded" let-job>
     <tr>
-      <td class="expand-cell" [pRowToggler]="job">
-        <my-table-expander-icon [expanded]="expanded"></my-table-expander-icon>
+      <td class="expand-cell">
+        <my-table-expander-icon [pRowToggler]="job" [expanded]="expanded"></my-table-expander-icon>
       </td>
 
       <td class="job-id c-hand" [pRowToggler]="job" [title]="job.id">{{ job.id }}</td>

client/src/app/+admin/system/runners/runner-job-list/runner-job-list.component.html

@@ -63,8 +63,8 @@
         <p-tableCheckbox [value]="runnerJob" ariaLabel="Select this row" i18n-ariaLabel></p-tableCheckbox>
       </td>
 
-      <td class="expand-cell" [pRowToggler]="runnerJob">
-        <my-table-expander-icon [expanded]="expanded"></my-table-expander-icon>
+      <td class="expand-cell">
+        <my-table-expander-icon [pRowToggler]="runnerJob" [expanded]="expanded"></my-table-expander-icon>
       </td>
 
       <td class="action-cell">

client/src/app/+my-library/my-video-imports/my-video-imports.component.html

@@ -35,8 +35,8 @@
 
   <ng-template pTemplate="body" let-expanded="expanded" let-videoImport>
     <tr>
-      <td class="expand-cell" [pRowToggler]="videoImport">
-        <my-table-expander-icon *ngIf="videoImport.error" [expanded]="expanded"></my-table-expander-icon>
+      <td class="expand-cell">
+        <my-table-expander-icon *ngIf="videoImport.error" [pRowToggler]="videoImport" [expanded]="expanded"></my-table-expander-icon>
       </td>
 
       <td class="action-cell">

client/src/app/shared/shared-abuse-list/abuse-list-table.component.html

@@ -31,8 +31,8 @@
 
   <ng-template pTemplate="body" let-expanded="expanded" let-abuse>
     <tr>
-      <td class="expand-cell" [pRowToggler]="abuse">
-        <my-table-expander-icon [expanded]="expanded"></my-table-expander-icon>
+      <td class="expand-cell">
+        <my-table-expander-icon [pRowToggler]="abuse" [expanded]="expanded"></my-table-expander-icon>
       </td>
 
       <td class="action-cell">

client/src/app/shared/shared-tables/table-expander-icon.component.ts

@@ -3,10 +3,11 @@ import { Component, Input } from '@angular/core'
 @Component({
   selector: 'my-table-expander-icon',
   template: `
-<span class="expander">
-    <i [ngClass]="expanded ? 'chevron-down' : 'chevron-right'"></i>
-</span>`
+<button class="expander border-0 p-0" [ngbTooltip]="tooltip">
+  <i [ngClass]="expanded ? 'chevron-down' : 'chevron-right'"></i>
+</button>`
 })
 export class TableExpanderIconComponent {
   @Input() expanded: boolean
+  @Input() tooltip = $localize`Get more information`
 }