Fix label accessibility that only contain a number

This commit is contained in:
Chocobozzz 2024-09-20 11:51:21 +02:00
parent c73576cef3
commit 460fd76755
No known key found for this signature in database
GPG Key ID: 583A612D890159BE
15 changed files with 61 additions and 10 deletions

View File

@ -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>

View File

@ -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 }
)
}
}

View File

@ -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>

View File

@ -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,

View File

@ -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>

View File

@ -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({

View File

@ -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">

View File

@ -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 }
)
}
}

View File

@ -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>

View File

@ -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(() => {

View File

@ -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>

View File

@ -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)
}

View File

@ -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>

View File

@ -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

View File

@ -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'