Make Playlist waveform seeking keyboard accessible#78980
Open
scruffian wants to merge 9 commits into
Open
Conversation
|
Size Change: +2.73 kB (+0.03%) Total Size: 8.21 MB 📦 View Changed
|
Mirror the editor by setting the seek slider's accessible name to the track title after creating the player on the frontend, so the slider is discoverable by title instead of the generic "Seek" label. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
|
Flaky tests detected in 89a395a. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/27019490592
|
|
The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message. To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. |
- Add updateSeekControlLabel to the jest mock of waveform-utils so the WaveformPlayer component tests stop throwing "not a function". - Use window.KeyboardEvent in the seek-control tests (no-undef). - Collapse a multi-line toHaveAttribute call (prettier). - Align the setupSeekControlAccessibility JSDoc params (jsdoc). Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Mark setupSeekControlAccessibility as a deliberate stopgap over @arraypress/waveform-player and link the upstream accessibility issue so the coupling to library internals can be removed once fixed there. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
scruffian
added
[Focus] Accessibility (a11y)
Contributor
There was a problem hiding this comment.
Pull request overview
This PR makes the Playlist block’s waveform seek control keyboard-operable and exposes it as an accessible slider, improving frontend usability for keyboard-only and assistive-technology users without requiring upstream changes to @arraypress/waveform-player.
Changes:
- Adds a seek-control accessibility shim (ARIA slider semantics, value syncing, and keyboard seeking) to the shared waveform utilities.
- Syncs/updates the seek control’s accessible label in both the editor React component and the frontend Interactivity implementation.
- Adds focus-visible styling plus unit and e2e coverage for the new accessibility behavior.
Reviewed changes
Copilot reviewed 8 out of 8 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
| test/e2e/specs/editor/blocks/playlist.spec.js | Adds an e2e check that the waveform seek control is reachable and operable via keyboard on the frontend. |
| packages/block-library/src/utils/waveform-utils.js | Introduces seek-control slider semantics, ARIA value syncing, and keyboard seek handling (plus label update helper). |
| packages/block-library/src/utils/waveform-player.js | Wires translated seek label into the editor player and updates the slider label when metadata changes. |
| packages/block-library/src/utils/test/waveform-utils.js | Adds unit tests for seek control accessibility setup and label updates. |
| packages/block-library/src/utils/test/waveform-player.js | Extends mocks to include the new seek label updater used by the editor component. |
| packages/block-library/src/playlist/view.js | Updates frontend player initialization/track switching to sync the seek control label. |
| packages/block-library/src/playlist/style.scss | Adds focus-visible outline styling for the waveform seek control. |
| packages/block-library/src/playlist/index.php | Adds a translated data-label-seek attribute for frontend initialization. |
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
- Pass a localized fallback to updateSeekControlLabel instead of the
hard-coded "Seek" when a track has no title (editor uses __('Seek'),
frontend uses the server-rendered data-label-seek).
- Round rather than floor in formatTimestamp so fractional media
durations (e.g. 11.999s) aren't announced one second short.
- Use a per-process unique temp filename in the e2e fixture to avoid
collisions between parallel Playwright workers.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
3 tasks
The "instead of volume changes" test asserted setVolume was never called, but nothing in the shim ever calls setVolume and the library isn't instantiated in the unit test, so the assertion could never fail. The library's volume keybindings are also inert in our setup: focus lives on the inner seek control while the library guards its handler on its own (outer) container being focused. Repurpose the test to assert the behavior we actually rely on - vertical arrows map to seeking (ArrowUp/ArrowDown). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Contributor
Author
|
@copilot can you do another review please? |
Contributor
I re-reviewed the PR changes and didn’t find any new material issues (bugs, regressions, security, or accessibility blockers). I also checked recent branch workflow runs and there are no completed failures to address right now, so no additional code changes were needed in this pass. |
Keyboard users were landing on the library's outer player wrapper rather than the accessible slider, and there was no visible affordance showing where a seek would land. - Redirect focus from the player wrapper onto the role="slider" element so keyboard navigation operates the seek control directly. - Add a keyboard playhead bar with a timestamp tooltip, shown on focus, which doubles as the focus indicator (replacing the box outline). - Add a hover preview that darkens the targeted spot and shows its timestamp. - Drive overlay visibility from CSS (:focus-visible / is-seek-hovering) and only position them from JS; tear them down in cleanup. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What?
Makes the Playlist block waveform seek control keyboard-operable and exposes it as an accessible slider.
Why?
Keyboard-only users could reach the play button but could not focus or operate the waveform seek control without a mouse click.
How?
Adds wrapper-level slider semantics, ARIA value syncing, keyboard seek handling, focus styling, editor/frontend label updates, and unit/e2e coverage without patching
@arraypress/waveform-player.Testing Instructions
Testing Instructions for Keyboard
Screenshots or screencast
N/A
Use of AI Tools
Implemented with assistance from OpenAI Codex; the generated changes were reviewed before publishing.
Validation
Ran
node --checkon touched non-JSX JavaScript files andgit diff --check.npm run test:unit packages/block-library/src/utils/test/waveform-utils.jscould not run becausenode_moduleswas missing, andnpm installfailed withENOSPC: no space left on device.