Improve video miniature link label accessibility

client/src/app/shared/shared-main/angular/link.component.html

@@ -2,10 +2,10 @@
   <ng-content></ng-content>
 </ng-template>
 
-<a *ngIf="!href" [routerLink]="internalLink" [attr.title]="title" [tabindex]="tabindex" [ngClass]="builtClasses">
+<a *ngIf="!href" [routerLink]="internalLink" [attr.title]="title" [ariaLabel]="ariaLabel" [tabindex]="tabindex" [ngClass]="builtClasses">
   <ng-template *ngTemplateOutlet="content"></ng-template>
 </a>
 
-<a *ngIf="href" [href]="href" [target]="target" [attr.title]="title" [tabindex]="tabindex" [ngClass]="builtClasses">
+<a *ngIf="href" [href]="href" [target]="target" [attr.title]="title" [ariaLabel]="ariaLabel" [tabindex]="tabindex" [ngClass]="builtClasses">
   <ng-template *ngTemplateOutlet="content"></ng-template>
 </a>

client/src/app/shared/shared-main/angular/link.component.ts

@@ -18,6 +18,8 @@ export class LinkComponent implements OnInit {
 
   @Input() tabindex: string | number
 
+  @Input() ariaLabel: string
+
   builtClasses: string
 
   ngOnInit () {

client/src/app/shared/shared-thumbnail/video-thumbnail.component.html

@@ -1,8 +1,8 @@
-<a *ngIf="!videoHref" [routerLink]="getVideoRouterLink()" [queryParams]="queryParams" class="video-thumbnail" tabindex="-1">
+<a [ariaLabel]="ariaLabel" *ngIf="!videoHref" [routerLink]="getVideoRouterLink()" [queryParams]="queryParams" class="video-thumbnail" tabindex="-1">
   <ng-container *ngTemplateOutlet="aContent"></ng-container>
 </a>
 
-<a *ngIf="videoHref" [href]="videoHref" [target]="videoTarget" class="video-thumbnail" tabindex="-1">
+<a [ariaLabel]="ariaLabel" *ngIf="videoHref" [href]="videoHref" [target]="videoTarget" class="video-thumbnail" tabindex="-1">
   <ng-container *ngTemplateOutlet="aContent"></ng-container>
 </a>
 

client/src/app/shared/shared-thumbnail/video-thumbnail.component.ts

@@ -20,6 +20,8 @@ export class VideoThumbnailComponent {
   @Input() displayWatchLaterPlaylist: boolean
   @Input() inWatchLaterPlaylist: boolean
 
+  @Input({ required: true }) ariaLabel: string
+
   @Output() watchLaterClick = new EventEmitter<boolean>()
 
   addToWatchLaterText: string

client/src/app/shared/shared-video-miniature/video-miniature.component.html

@@ -1,5 +1,6 @@
 <div class="video-miniature" [ngClass]="getClasses()" (mouseenter)="loadActions()">
   <my-video-thumbnail
+    [ariaLabel]="getAriaLabel()"
     [video]="video" [nsfw]="isVideoBlur" [videoRouterLink]="videoRouterLink" [videoHref]="videoHref" [videoTarget]="videoTarget"
     [displayWatchLaterPlaylist]="isWatchLaterPlaylistDisplayed()" [inWatchLaterPlaylist]="inWatchLaterPlaylist" (watchLaterClick)="onWatchLaterClick($event)"
   >
@@ -26,6 +27,7 @@
         <div class="w-100 d-flex flex-column">
           <my-link
             [internalLink]="videoRouterLink" [href]="videoHref" [target]="videoTarget" [inheritParentCSS]="true"
+            [ariaLabel]="getAriaLabel()"
             [title]="video.name" class="video-miniature-name" className="ellipsis-multiline-2" [ngClass]="{ 'blur-filter': isVideoBlur }"
           >
             {{ video.name }}

client/src/app/shared/shared-video-miniature/video-miniature.component.ts

@@ -214,6 +214,10 @@ export class VideoMiniatureComponent implements OnInit {
     return ''
   }
 
+  getAriaLabel () {
+    return $localize`Watch video ${this.video.name}`
+  }
+
   loadActions () {
     if (this.displayVideoActions) this.showActions = true
 

client/src/app/shared/shared-video-playlist/video-playlist-element-miniature.component.html

@@ -8,7 +8,7 @@
     <my-video-thumbnail
       *ngIf="playlistElement.video"
       [video]="playlistElement.video" [nsfw]="isVideoBlur(playlistElement.video)"
-      [videoRouterLink]="buildRouterLink()" [queryParams]="buildRouterQuery()"
+      [videoRouterLink]="buildRouterLink()" [queryParams]="buildRouterQuery()" [ariaLabel]="getVideoAriaLabel()"
     ></my-video-thumbnail>
 
     <div class="fake-thumbnail" *ngIf="!playlistElement.video"></div>
@@ -16,9 +16,9 @@
     <div class="video-info">
       <ng-container *ngIf="playlistElement.video">
         <div class="video-info-header">
-          <a tabindex="-1" class="video-info-name"
+          <a
+            tabindex="-1" class="video-info-name" [ariaLabel]="getVideoAriaLabel()" [attr.title]="playlistElement.video.name"
             [routerLink]="buildRouterLink()" [queryParams]="buildRouterQuery()"
-            [attr.title]="playlistElement.video.name"
           >{{ playlistElement.video.name }}</a>
 
           <span i18n *ngIf="isVideoPrivate()" class="pt-badge badge-yellow">Private</span>

client/src/app/shared/shared-video-playlist/video-playlist-element-miniature.component.ts

@@ -52,6 +52,10 @@ export class VideoPlaylistElementMiniatureComponent implements OnInit {
     this.serverConfig = this.serverService.getHTMLConfig()
   }
 
+  getVideoAriaLabel () {
+    return $localize`Watch video ${this.playlistElement.video.name}`
+  }
+
   getVideoOwnerDisplayType (element: VideoPlaylistElement) {
     return this.videoService.buildDefaultOwnerDisplayType(element.video)
   }