Use button for abuse message icon

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

@@ -131,10 +131,15 @@
       </td>
 
       <td class="abuse-messages">
-        <button class="button-unstyle" *ngIf="isLocalAbuse(abuse)" (click)="openAbuseMessagesModal(abuse)">
+        <button
+          *ngIf="isLocalAbuse(abuse)" (click)="openAbuseMessagesModal(abuse)"
+          class="peertube-button grey-button"
+          [ariaLabel]="getSendMessageButtonLabel(abuse)"
+          [title]="getSendMessageButtonLabel(abuse)"
+        >
           {{ abuse.countMessages }}
 
-          <my-global-icon iconName="message-circle"></my-global-icon>
+          <my-global-icon aria- iconName="message-circle"></my-global-icon>
         </button>
       </td>
 

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

@@ -27,6 +27,7 @@ import { AbuseService } from '../shared-moderation/abuse.service'
 import { BlocklistService } from '../shared-moderation/blocklist.service'
 import { VideoBlockService } from '../shared-moderation/video-block.service'
 import { VideoCommentService } from '../shared-video-comment/video-comment.service'
+import { formatICU } from '@app/helpers'
 
 const debugLogger = debug('peertube:moderation:AbuseListTableComponent')
 
@@ -208,6 +209,20 @@ export class AbuseListTableComponent extends RestTable implements OnInit {
     return Actor.IS_LOCAL(abuse.reporterAccount.host)
   }
 
+  getSendMessageButtonLabel (abuse: AdminAbuse) {
+    if (this.viewType === 'admin') {
+      return formatICU(
+        $localize`Send a message to the reporter (currently {count, plural, =1 {{count} message} other {{count} messages}})`,
+        { count: abuse.countMessages }
+      )
+    }
+
+    return formatICU(
+      $localize`Send a message to the admins/moderators (currently {count, plural, =1 {{count} message} other {{count} messages}})`,
+      { count: abuse.countMessages }
+    )
+  }
+
   protected reloadDataInternal () {
     debugLogger('Loading data.')