fix: A11y issue in play/pause of the audio player in playlist block#76035
fix: A11y issue in play/pause of the audio player in playlist block#76035im3dabasia wants to merge 1 commit intoWordPress:trunkfrom
Conversation
im3dabasia
added
[Focus] Accessibility (a11y)
|
Warning: Type of PR label mismatch To merge this PR, it requires exactly 1 label indicating the type of PR. Other labels are optional and not being checked here.
Read more about Type labels in Gutenberg. Don't worry if you don't have the required permissions to add labels; the PR reviewer should be able to help with the task. |
|
I had a slightly older version of trunk locally and made the changes based on that. I now see that a waveform player has been included in this block, which already handles the aria-label updates mentioned in the issue, specifically, the Play and Pause states are reflected in the button’s aria-label. I’m attaching a video for reference. I think the issue can be closed since this has already been incorporated. Screen.Recording.2026-03-02.at.2.00.19.PM.movIf it adds value, we could also include the track name after Play/Pause to indicate which track is being played or paused. However, this might cause repetition if the button is clicked multiple times in short intervals. Let me know what you think. |
1 participant
What?
Prepends the action ("Play"/"Pause") to the audio control aria-label so screen readers hear the intended action plus track info.
Closes #75583
Why?
Screen readers only received track metadata and lacked the action context (play vs pause), reducing accessibility.
How?
Adds a derived state that returns "Play " or "Pause " + the track label, and binds the audio element's aria-label to it.
Testing Instructions
Testing Instructions for Keyboard
Tab to the play control, press Space/Enter to toggle, and confirm the aria-label updates accordingly.
Screencast
Screen.Recording.2026-03-02.at.1.29.47.PM.mov