Fix label accessibility that only contain a number
This commit is contained in:
parent
c73576cef3
commit
460fd76755
|
@ -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>
|
||||
|
|
|
@ -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 }
|
||||
)
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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>
|
||||
|
||||
|
|
|
@ -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,
|
||||
|
|
|
@ -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>
|
||||
|
||||
|
|
|
@ -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({
|
||||
|
|
|
@ -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">
|
||||
|
|
|
@ -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 }
|
||||
)
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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(() => {
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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)
|
||||
}
|
||||
|
|
|
@ -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>
|
||||
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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'
|
||||
|
|
Loading…
Reference in New Issue