interesting
/
PeerTube
mirror of https://github.com/Chocobozzz/PeerTube.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Improve video miniature link label accessibility

This commit is contained in:
Chocobozzz 2023-10-05 15:43:24 +02:00
parent 46dd167df6
commit 4d61e5ef9c
No known key found for this signature in database
GPG Key ID: 583A612D890159BE
8 changed files with 21 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

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

4
client/src/app/shared/shared-thumbnail/video-thumbnail.component.html
View File

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

2
client/src/app/shared/shared-thumbnail/video-thumbnail.component.ts
View File

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

2
client/src/app/shared/shared-video-miniature/video-miniature.component.html
View File

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

4
client/src/app/shared/shared-video-miniature/video-miniature.component.ts
View File

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

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

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

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

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