From 65358aa80955594bdf17ef387807991ef5ec26e4 Mon Sep 17 00:00:00 2001 From: mkelvers Date: Mon, 6 Jul 2026 07:09:44 +0200 Subject: [PATCH] feat: add aria-labels to player controls --- static/player/controls.ts | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/static/player/controls.ts b/static/player/controls.ts index 69de90e1..18175122 100644 --- a/static/player/controls.ts +++ b/static/player/controls.ts @@ -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(); }