Skip to content

Playlist: seek value text localization - #79834

Merged
scruffian merged 4 commits into
trunkfrom
jeryj/playlist-native-seek-value-text
Jul 7, 2026
Merged

Playlist: seek value text localization#79834
scruffian merged 4 commits into
trunkfrom
jeryj/playlist-native-seek-value-text

Conversation

@jeryj

@jeryj jeryj commented Jul 2, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor

Alternate to #78980

Important

This PR is dependent on the assumption the seekValueText PR on Waveform Player gets merged. If it does, then we can version bump Waveform Player (TODO) and merge this PR.

Update: It's merged.

What?

Follow-up to #78980 that removes Gutenberg's client-side seek value-text localization now that @arraypress/waveform-player can do it natively.

Why?

To localize the seek slider's spoken aria-valuetext, #78980 had to reach into library internals — monkey-patching updateSeekAccessibility and options.onTimeUpdate — because the library hardcoded an English "X of Y" string with no way to customize it. That's fragile (it depends on undocumented method names and event ordering) and it forced us to duplicate the library's own time-formatting.

The library now exposes a seekValueText template option (settable via data-seek-value-text) and interpolates the formatted current time and duration itself. So we can just pass the already-translated template through and delete the workaround.

How?

  • createWaveformContainer() now forwards a seekValueText option to the library as data-seek-value-text.
  • initWaveformPlayer() passes labels.seekValueText through to the container.

The library owns all time formatting; Gutenberg only supplies the translated strings.

Testing Instructions

  1. Add a Playlist block with a few tracks; view on the front end.
  2. With a screen reader (or DevTools), focus the waveform seek slider and confirm aria-valuetext reads the localized "current of total" (e.g. 0:30 of 2:00), updating as playback progresses.
  3. Switch the site language and confirm the connective word is translated.

Unit tests

npm run test:unit -- packages/block-library/src/utils/test/waveform-utils.js — updated to cover the new data-seek-value-text attribute and drop the removed localization helper (28 passing).

Accessibility

No behavior change for users: the seek slider still exposes a translated, natural-language aria-valuetext. This only moves where the string is assembled (library instead of Gutenberg).

@github-actions github-actions Bot added the [Package] Block library /packages/block-library label Jul 2, 2026
@github-actions

github-actions Bot commented Jul 2, 2026 •
edited
Loading

Copy link
Copy Markdown

Size Change: +1.13 kB (+0.01%)

Total Size: 7.67 MB

📦 View Changed
Filename Size Change
build/modules/block-library/playlist/view.min.js 15.1 kB +530 B (+3.63%)
build/scripts/block-editor/index.min.js 417 kB +11 B (0%)
build/scripts/block-library/index.min.js 332 kB +647 B (+0.2%)
build/scripts/blocks/index.min.js 45.2 kB -70 B (-0.15%)
build/scripts/server-side-render/index.min.js 1.95 kB +8 B (+0.41%)
build/scripts/widgets/index.min.js 7.82 kB +3 B (+0.04%)

compressed-size-action

@jeryj @scruffian @claude
Playlist: add localized, keyboard-accessible waveform seek control
ec19345 
Expose the waveform player's seek control as a keyboard-operable ARIA
slider with a translated accessible label and value text, on both the
editor and the front end.

The strings are localized with @wordpress/i18n (and esc_attr_x on the
server) and handed to @arraypress/waveform-player through its native
`seekLabel` and `seekValueText` options via data attributes. The library
owns all time formatting and interpolates the current time and duration
into the slider's aria-valuetext; Gutenberg only supplies the translated
templates, with no client-side patching of library internals.

Consolidates the seek-accessibility work from #78980 using the library's
native seek options. Full non-English value-text localization depends on
the `seekValueText` option (arraypress/waveform-player#13), so bump
@arraypress/waveform-player once it is released.

Co-authored-by: Ben Dwyer <ben@scruffian.com>
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
@jeryj
jeryj force-pushed the jeryj/playlist-native-seek-value-text branch from 8e06fe1 to ec19345 Compare July 2, 2026 21:03
@github-actions github-actions Bot added [Package] Element /packages/element [Package] Date /packages/date [Package] Data /packages/data [Package] Server Side Render /packages/server-side-render [Package] A11y /packages/a11y [Package] Autop /packages/autop [Package] DOM ready /packages/dom-ready [Package] Hooks /packages/hooks [Package] i18n /packages/i18n [Package] is-shallow-equal /packages/is-shallow-equal [Package] Url /packages/url [Package] Word count /packages/wordcount [Package] Deprecated packages/deprecated [Package] Blob /packages/blob [Package] Compose /packages/compose [Package] Core data /packages/core-data [Package] API fetch /packages/api-fetch [Package] HTML entities /packages/html-entities [Package] Viewport /packages/viewport [Package] DOM /packages/dom [Package] Keycodes /packages/keycodes [Package] Plugins /packages/plugins [Package] Components /packages/components [Package] Blocks /packages/blocks [Package] Editor /packages/editor [Package] Redux Routine /packages/redux-routine labels Jul 2, 2026
@github-actions github-actions Bot added [Package] React i18n /packages/react-i18n [Package] Style Engine /packages/style-engine [Package] Preferences /packages/preferences [Package] Media Utils /packages/media-utils [Package] Private APIs /packages/private-apis [Package] Commands /packages/commands [Package] Core commands /packages/core-commands [Package] Interactivity /packages/interactivity [Package] Patterns /packages/patterns [Package] DataViews /packages/dataviews [Package] Interactivity Router /packages/interactivity-router [Package] Fields /packages/fields [Package] Router /packages/router [Package] Theme /packages/theme [Package] UI /packages/ui [Package] Sync /packages/sync labels Jul 2, 2026
@jeryj
jeryj changed the base branch from scruffian/waveform-a11y-seek to trunk July 2, 2026 21:06
@jeryj jeryj removed [Package] Element /packages/element [Package] Date /packages/date [Package] Data /packages/data [Package] Server Side Render /packages/server-side-render [Package] A11y /packages/a11y labels Jul 2, 2026
@github-actions

github-actions Bot commented Jul 6, 2026 •
edited
Loading

Copy link
Copy Markdown

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 props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: jeryj <jeryj@git.wordpress.org>
Co-authored-by: scruffian <scruffian@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

scruffian
scruffian reviewed Jul 6, 2026
View reviewed changes
Comment thread package.json Outdated
scruffian
scruffian reviewed Jul 7, 2026
View reviewed changes
Comment thread package-lock.json
scruffian
scruffian approved these changes Jul 7, 2026
View reviewed changes

@scruffian scruffian left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

i think this looks good, lets bring it in.

@github-actions

github-actions Bot commented Jul 7, 2026

Copy link
Copy Markdown

Flaky tests detected in 84efae8.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/28857022302
📝 Reported issues:

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@scruffian scruffian scruffian approved these changes
@ajitbohra ajitbohra Awaiting requested review from ajitbohra
@fabiankaegy fabiankaegy Awaiting requested review from fabiankaegy fabiankaegy is a code owner

Assignees

@jeryj jeryj

Labels

[Block] Playlist [Package] Block library /packages/block-library [Type] Enhancement A suggestion for improvement.

Projects

None yet

Milestone

Gutenberg 23.6

Development

Successfully merging this pull request may close these issues.

2 participants

@jeryj @scruffian