forks
/
peertube
1
0
Fork 0
Code Releases Activity

Fix playlist buttons accessibility

This commit is contained in:
Chocobozzz 2023-10-12 14:24:22 +02:00
parent 44e12dc809
commit e94160c770
No known key found for this signature in database
GPG Key ID: 583A612D890159BE
2 changed files with 16 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
client/src/app/+videos/+video-watch/shared/playlist/video-watch-playlist.component.html
View File

@ -19,23 +19,21 @@
</div>
<div class="playlist-controls">
<my-global-icon
iconName="videos"
[class.active]="autoPlayNextVideoPlaylist"
(click)="switchAutoPlayNextVideoPlaylist()"
[ngbTooltip]="autoPlayNextVideoPlaylistSwitchText"
placement="bottom auto"
container="body"
></my-global-icon>
<button
class="border-0 p-0 me-2" [ngClass]="{ active: autoPlayNextVideoPlaylist }" (click)="switchAutoPlayNextVideoPlaylist()"
[ngbTooltip]="autoPlayNextVideoPlaylistSwitchText" [ariaLabel]="autoPlayNextVideoPlaylistSwitchText"
placement="bottom auto" container="body"
>
<my-global-icon iconName="videos"></my-global-icon>
</button>
<my-global-icon
iconName="repeat"
[class.active]="loopPlaylist"
(click)="switchLoopPlaylist()"
[ngbTooltip]="loopPlaylistSwitchText"
placement="bottom auto"
container="body"
></my-global-icon>
<button
class="border-0 p-0" [ngClass]="{ active: loopPlaylist }" (click)="switchLoopPlaylist()"
[ngbTooltip]="loopPlaylistSwitchText" [ariaLabel]="loopPlaylistSwitchText"
placement="bottom auto" container="body"
>
<my-global-icon iconName="repeat"></my-global-icon>
</button>
</div>
</div>

14
client/src/app/+videos/+video-watch/shared/playlist/video-watch-playlist.component.scss
View File

@ -46,18 +46,8 @@
display: flex;
margin: 10px 0;
my-global-icon:not(:last-child) {
@include margin-right(.5rem);
}
my-global-icon {
&:not(.active) {
opacity: .5;
}
::ng-deep {
cursor: pointer;
}
button:not(.active) {
opacity: .5;
}
}