melosh/mal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add aria-labels to player controls

Browse Source
This commit is contained in:
mkelvers
2026-07-06 07:09:44 +02:00
parent e39e73bc6b
commit 65358aa809
1 changed files with 8 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
static/player/controls.ts
View File

@@ -175,15 +175,17 @@ const getControls = (): Controls => {
};
const updatePlayPauseIcons = (isPlaying: boolean): void => {
const { iconPlay, iconPause } = getControls();
const { iconPlay, iconPause, playPause } = getControls();
iconPlay?.classList.toggle("hidden", isPlaying);
iconPause?.classList.toggle("hidden", !isPlaying);
playPause?.setAttribute("aria-label", isPlaying ? "Pause" : "Play");
};
const updateMuteIcons = (isMuted: boolean): void => {
const { iconVolume, iconMuted } = getControls();
const { iconVolume, iconMuted, muteBtn } = getControls();
iconVolume?.classList.toggle("hidden", isMuted);
iconMuted?.classList.toggle("hidden", !isMuted);
muteBtn?.setAttribute("aria-label", isMuted ? "Unmute" : "Mute");
};
/** Binds click handlers to player control buttons. Sets up video event listeners for icon sync. */
@@ -251,6 +253,10 @@ export const setupControls = (): void => {
document.addEventListener("fullscreenchange", () => {
state.ui.isFullscreen = Boolean(document.fullscreenElement);
state.elements.container.classList.toggle("fullscreen", state.ui.isFullscreen);
fullscreenBtn?.setAttribute(
"aria-label",
state.ui.isFullscreen ? "Exit fullscreen" : "Enter fullscreen",
);
if (state.ui.isFullscreen) {
showControls();
}