Fix label accessibility that only contain a number

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

@@ -2,7 +2,7 @@
   <span class="text-nowrap me-2">
     <my-global-icon iconName="channel" aria-hidden="true"></my-global-icon>
     <ng-container i18n>My channels</ng-container>
-    <span *ngIf="this.pagination.totalItems" class="pt-badge badge-secondary">{{ this.pagination.totalItems }}</span>
+    <span *ngIf="this.pagination.totalItems" [title]="getTotalTitle()" class="pt-badge badge-secondary">{{ this.pagination.totalItems }}</span>
   </span>
 
   <div>

client/src/app/+my-library/+my-video-channels/my-video-channels.component.ts

@@ -222,4 +222,11 @@ export class MyVideoChannelsComponent {
 
     return formatICU($localize`${data.total} {value, plural, =1 {view} other {views}} since ${data.startDate}`, { value: data.total })
   }
+
+  getTotalTitle () {
+    return formatICU(
+      $localize`You have ${this.pagination.totalItems} {total, plural, =1 {channel} other {channels}}`,
+      { total: this.pagination.totalItems }
+    )
+  }
 }

client/src/app/+my-library/my-follows/my-followers.component.html

@@ -2,7 +2,7 @@
   <span class="text-nowrap me-2">
     <my-global-icon iconName="follower" aria-hidden="true"></my-global-icon>
     <ng-container i18n>My followers</ng-container>
-    <span *ngIf="pagination.totalItems" class="pt-badge badge-secondary"> {{ pagination.totalItems }}</span>
+    <span *ngIf="pagination.totalItems" [title]="getTotalTitle()" class="pt-badge badge-secondary"> {{ pagination.totalItems }}</span>
   </span>
 </h1>
 

client/src/app/+my-library/my-follows/my-followers.component.ts

@@ -9,6 +9,7 @@ import { ActorAvatarComponent } from '../../shared/shared-actor-image/actor-avat
 import { AdvancedInputFilter, AdvancedInputFilterComponent } from '../../shared/shared-forms/advanced-input-filter.component'
 import { GlobalIconComponent } from '../../shared/shared-icons/global-icon.component'
 import { InfiniteScrollerDirective } from '../../shared/shared-main/angular/infinite-scroller.directive'
+import { formatICU } from '@app/helpers'
 
 @Component({
   templateUrl: './my-followers.component.html',
@@ -74,6 +75,13 @@ export class MyFollowersComponent implements OnInit {
     return follow.following.name === this.getUsername()
   }
 
+  getTotalTitle () {
+    return formatICU(
+      $localize`You have ${this.pagination.totalItems} {total, plural, =1 {follower} other {followers}}`,
+      { total: this.pagination.totalItems }
+    )
+  }
+
   private loadFollowers (more = true) {
     this.userSubscriptionService.listFollowers({
       pagination: this.pagination,

client/src/app/+my-library/my-follows/my-subscriptions.component.html

@@ -2,7 +2,7 @@
   <span class="text-nowrap me-2">
     <my-global-icon iconName="subscriptions" aria-hidden="true"></my-global-icon>
     <ng-container i18n>My subscriptions</ng-container>
-    <span *ngIf="pagination.totalItems" class="pt-badge badge-secondary"> {{ pagination.totalItems }}</span>
+    <span *ngIf="pagination.totalItems" [title]="getTotalTitle()" class="pt-badge badge-secondary"> {{ pagination.totalItems }}</span>
   </span>
 </h1>
 

client/src/app/+my-library/my-follows/my-subscriptions.component.ts

@@ -10,6 +10,7 @@ import { NgIf, NgFor } from '@angular/common'
 import { GlobalIconComponent } from '../../shared/shared-icons/global-icon.component'
 import { VideoChannel } from '@app/shared/shared-main/video-channel/video-channel.model'
 import { UserSubscriptionService } from '@app/shared/shared-user-subscription/user-subscription.service'
+import { formatICU } from '@app/helpers'
 
 @Component({
   templateUrl: './my-subscriptions.component.html',
@@ -57,6 +58,13 @@ export class MySubscriptionsComponent {
     this.loadSubscriptions(false)
   }
 
+  getTotalTitle () {
+    return formatICU(
+      $localize`You have ${this.pagination.totalItems} {total, plural, =1 {subscription} other {subscriptions}}`,
+      { total: this.pagination.totalItems }
+    )
+  }
+
   private loadSubscriptions (more = true) {
     this.userSubscriptionService.listSubscriptions({ pagination: this.pagination, search: this.search })
         .subscribe({

client/src/app/+my-library/my-history/my-history.component.html

@@ -1,7 +1,7 @@
 <h1>
   <my-global-icon iconName="history" aria-hidden="true"></my-global-icon>
   <ng-container i18n>My watch history</ng-container>
-  <span *ngIf="pagination.totalItems" class="pt-badge badge-secondary">{{ pagination.totalItems }}</span>
+  <span *ngIf="pagination.totalItems" [title]="getTotalTitle()" class="pt-badge badge-secondary">{{ pagination.totalItems }}</span>
 </h1>
 
 <div class="top-buttons">

client/src/app/+my-library/my-history/my-history.component.ts

@@ -1,7 +1,7 @@
 import { tap } from 'rxjs/operators'
 import { Component, OnInit, ViewChild } from '@angular/core'
 import { AuthService, ComponentPagination, ConfirmService, DisableForReuseHook, Notifier, User, UserService } from '@app/core'
-import { immutableAssign } from '@app/helpers'
+import { formatICU, immutableAssign } from '@app/helpers'
 import { DeleteButtonComponent } from '../../shared/shared-main/buttons/delete-button.component'
 import { PeerTubeTemplateDirective } from '../../shared/shared-main/angular/peertube-template.directive'
 import { FormsModule } from '@angular/forms'
@@ -162,4 +162,11 @@ export class MyHistoryComponent implements OnInit, DisableForReuseHook {
 
     return $localize`You don't have any video in your watch history yet.`
   }
+
+  getTotalTitle () {
+    return formatICU(
+      $localize`Your history contains ${this.pagination.totalItems} {total, plural, =1 {video} other {videos}}`,
+      { total: this.pagination.totalItems }
+    )
+  }
 }

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

@@ -1,7 +1,7 @@
 <h1>
   <my-global-icon iconName="playlists" aria-hidden="true"></my-global-icon>
   <ng-container i18n>My playlists</ng-container>
-  <span *ngIf="pagination.totalItems" class="pt-badge badge-secondary">{{ pagination.totalItems }}</span>
+  <span *ngIf="pagination.totalItems" [title]="getTotalTitle()" class="pt-badge badge-secondary">{{ pagination.totalItems }}</span>
 </h1>
 
 <my-channels-setup-message></my-channels-setup-message>

client/src/app/+my-library/my-video-playlists/my-video-playlists.component.ts

@@ -14,6 +14,7 @@ import { NgIf, NgFor } from '@angular/common'
 import { GlobalIconComponent } from '../../shared/shared-icons/global-icon.component'
 import { VideoPlaylist } from '@app/shared/shared-video-playlist/video-playlist.model'
 import { VideoPlaylistService } from '@app/shared/shared-video-playlist/video-playlist.service'
+import { formatICU } from '@app/helpers'
 
 @Component({
   templateUrl: './my-video-playlists.component.html',
@@ -89,6 +90,13 @@ export class MyVideoPlaylistsComponent {
     this.loadVideoPlaylists(true)
   }
 
+  getTotalTitle () {
+    return formatICU(
+      $localize`You have ${this.pagination.totalItems} {total, plural, =1 {playlist} other {playlists}}`,
+      { total: this.pagination.totalItems }
+    )
+  }
+
   private loadVideoPlaylists (reset = false) {
     this.authService.userInformationLoaded
         .pipe(mergeMap(() => {

client/src/app/+my-library/my-videos/my-videos.component.html

@@ -2,7 +2,7 @@
   <span class="text-nowrap me-2">
     <my-global-icon iconName="videos" aria-hidden="true"></my-global-icon>
     <ng-container i18n>My videos</ng-container>
-    <span *ngIf="pagination.totalItems" class="pt-badge badge-secondary"> {{ pagination.totalItems }}</span>
+    <span *ngIf="pagination.totalItems" [title]="getTotalTitle()" class="pt-badge badge-secondary"> {{ pagination.totalItems }}</span>
   </span>
 
   <div>

client/src/app/+my-library/my-videos/my-videos.component.ts

@@ -244,6 +244,13 @@ export class MyVideosComponent implements OnInit, DisableForReuseHook {
     this.videoChangeOwnershipModal.show(video)
   }
 
+  getTotalTitle () {
+    return formatICU(
+      $localize`You have ${this.pagination.totalItems} {total, plural, =1 {video} other {videos}}`,
+      { total: this.pagination.totalItems }
+    )
+  }
+
   private removeVideoFromArray (id: number) {
     this.videos = this.videos.filter(v => v.id !== id)
   }

client/src/app/+search/search.component.html

@@ -12,13 +12,15 @@
 
       <button
         class="results-filter-button button-unstyle ms-auto" (click)="isSearchFilterCollapsed = !isSearchFilterCollapsed"
-        [attr.aria-expanded]="!isSearchFilterCollapsed" aria-controls="search-results-filter"
+        [attr.aria-expanded]="!isSearchFilterCollapsed" aria-controls="search-results-filter" [title]="getFilterButtonTitle()"
       >
         <span class="icon icon-filter"></span>
+
         <ng-container i18n>
           Filters
-          <span *ngIf="numberOfFilters() > 0" class="pt-badge badge-secondary">{{ numberOfFilters() }}</span>
         </ng-container>
+
+        <span *ngIf="numberOfFilters() > 0" class="pt-badge badge-secondary">{{ numberOfFilters() }}</span>
       </button>
     </div>
 

client/src/app/+search/search.component.ts

@@ -270,6 +270,10 @@ export class SearchComponent implements OnInit, OnDestroy {
     return this.lastSearchTarget === 'search-index'
   }
 
+  getFilterButtonTitle () {
+    return $localize`${this.numberOfFilters()} active filters, open the filters panel`
+  }
+
   private resetPagination () {
     this.pagination.currentPage = 1
     this.pagination.totalItems = null

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

@@ -1,5 +1,5 @@
 import { NgClass, NgIf, NgStyle, NgTemplateOutlet } from '@angular/common'
-import { Component, EventEmitter, Input, Output, ViewChild, viewChild } from '@angular/core'
+import { Component, EventEmitter, Input, Output, ViewChild } from '@angular/core'
 import { RouterLink } from '@angular/router'
 import { ScreenService } from '@app/core'
 import { NgbTooltip } from '@ng-bootstrap/ng-bootstrap'