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 updatePlayPauseIcons = (isPlaying: boolean): void => {
const { iconPlay, iconPause } = getControls(); const { iconPlay, iconPause, playPause } = getControls();
iconPlay?.classList.toggle("hidden", isPlaying); iconPlay?.classList.toggle("hidden", isPlaying);
iconPause?.classList.toggle("hidden", !isPlaying); iconPause?.classList.toggle("hidden", !isPlaying);
playPause?.setAttribute("aria-label", isPlaying ? "Pause" : "Play");
}; };
const updateMuteIcons = (isMuted: boolean): void => { const updateMuteIcons = (isMuted: boolean): void => {
const { iconVolume, iconMuted } = getControls(); const { iconVolume, iconMuted, muteBtn } = getControls();
iconVolume?.classList.toggle("hidden", isMuted); iconVolume?.classList.toggle("hidden", isMuted);
iconMuted?.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. */ /** 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", () => { document.addEventListener("fullscreenchange", () => {
state.ui.isFullscreen = Boolean(document.fullscreenElement); state.ui.isFullscreen = Boolean(document.fullscreenElement);
state.elements.container.classList.toggle("fullscreen", state.ui.isFullscreen); state.elements.container.classList.toggle("fullscreen", state.ui.isFullscreen);
fullscreenBtn?.setAttribute(
"aria-label",
state.ui.isFullscreen ? "Exit fullscreen" : "Enter fullscreen",
);
if (state.ui.isFullscreen) { if (state.ui.isFullscreen) {
showControls(); showControls();
} }