ProgressBar: Respect reduced motion preferences

[ciampo]

Closes #76926

Alternative to #77051, updated for the current SCSS implementation.

What?

Make determinate ProgressBar updates immediate and use a slower, stepped indeterminate animation when the user prefers reduced motion.

Why?

Determinate transitions and the continuous indeterminate animation currently run regardless of the user's OS or browser preference.

How?

The determinate transition only runs when reduced motion is not preferred. Under prefers-reduced-motion: reduce, determinate progress snaps to each supplied value, while the repeating indeterminate animation advances in four steps over 3 seconds. The default motion stays unchanged.

Testing Instructions

1. Open the ProgressBar Storybook story.
2. With reduced-motion emulation disabled, confirm that the indeterminate bar moves smoothly.
3. Enable prefers-reduced-motion: reduce in the browser developer tools or OS settings.
4. Confirm that the indeterminate bar moves more slowly in four visible steps and still communicates ongoing progress.
5. Set the story's value control to several values. Confirm that updates are immediate with reduced motion enabled and smooth with it disabled.

Testing Instructions for Keyboard

There is no keyboard interaction in this change. Confirm that the progress bar remains exposed with role="progressbar" and its accessible label.

Screencast

Note: withprefers-reduced-motion: reduce

Before	After
Kapture.2026-09-06.at.14.51.25.mp4	Kapture.2026-09-06.at.14.52.47.mp4

Use of AI Tools

I used Codex to investigate the issue, implement the change, and draft this pull request.

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on this repository. To trigger a review, include @coderabbitai review in the PR description. Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Team

Run ID: 22320ca8-8987-4e71-99b2-16f6e6c1cb6f

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

---

_{Comment @coderabbitai help to get the list of available commands.}

[github-actions]

🤖 PR meta 🤖

📦 Bundle size

Size Change: +53 B (0%)

Total Size: 8 MB

📦 View Changed

Filename	Size	Change
build/scripts/components/index.min.js	267 kB	+53 B (+0.02%)

_{10ce9e3 Run}

⚡ Performance

Show the results

Client side metrics exclude the server response time.

front-end-block-theme

Metric	0986696	trunk	% Change
timeToFirstByte	67.8 ms +1.7% -11.14%	67.6 ms +6.36% -11.83%	0.3%
largestContentfulPaint	104 ms +3.85% -5.77%	102 ms +5.88% -9.8%	1.96%
lcpMinusTtfb	35.05 ms +18.4% -6.56%	32.45 ms +7.4% -3.85%	8.01%
wpBeforeTemplate	36.14 ms +2.91% -15.83%	34.95 ms +12.7% -11.04%	3.4%
wpTemplate	26.14 ms +4.59% -2.91%	25.67 ms +6.66% -3.62%	1.83%
wpTotal	62.85 ms +2.16% -10.84%	62.2 ms +7.17% -10.88%	1.05%
wpMemoryUsage	7.52 MB +0% -0%	7.48 MB +0% -0%	0.46%
wpDbQueries	17 +0% -0%	17 +0% -0%	0%

front-end-classic-theme

Metric	0986696	trunk	% Change
timeToFirstByte	46.05 ms +14.88% -7.93%	47.25 ms +7.94% -4.55%	-2.54%
largestContentfulPaint	92 ms +6.52% -6.52%	96 ms +4.17% -4.17%	-4.17%
lcpMinusTtfb	44.5 ms +4.49% -3.82%	48 ms +1.87% -2.5%	-7.29%
wpBeforeTemplate	29.78 ms +19.17% -6.45%	27.66 ms +16.16% -3.58%	7.66%
wpTemplate	11.44 ms +6.73% -2.27%	15.14 ms +3.9% -4.89%	-24.44%
wpTotal	42.85 ms +13.49% -8.47%	43.94 ms +7.35% -4.42%	-2.48%
wpMemoryUsage	5.40 MB +0% -0%	5.47 MB +0% -0%	-1.32%
wpDbQueries	10 +0% -0%	14 +0% -0%	-28.57%

media-processing

Metric	0986696	trunk	% Change
mediaProcessingJpeg	414.95 ms +2.29% -2.02%	401.18 ms +2.7% -0.46%	3.43%
mediaProcessingAvif	6236.1 ms +0.79% -0.38%	6247.58 ms +0.03% -0.27%	-0.18%
mediaProcessingJpegToAvif	4435.74 ms +0.08% -0.68%	4409.64 ms +0.31% -0.19%	0.59%

media-upload

Metric	0986696	trunk	% Change
jpegUploadProcessing	1445.95 ms +36.47% -1.19%	1432.83 ms +0.7% -1.49%	0.92%
pngUploadProcessing	228.9 ms +1.89% -2.22%	217.05 ms +7.96% -7.24%	5.46%
largeJpegUploadProcessing	1413.26 ms +1.28% -0.57%	1431.65 ms +0.52% -0.45%	-1.28%
multipleImageUploadProcessing	1596.69 ms +32.68% -0.55%	1640.24 ms +8.26% -2.48%	-2.66%

post-editor

Metric	0986696	trunk	% Change
serverResponse	521.84 ms +1.47% -7.78%	532.05 ms +2.76% -6.5%	-1.92%
firstPaint	247.22 ms +9.47% -11.85%	286.03 ms +5.15% -22%	-13.57%
domContentLoaded	1324.09 ms +1.98% -0.9%	1332.65 ms +0.51% -1.73%	-0.64%
loaded	1325.55 ms +1.97% -0.9%	1334.09 ms +0.52% -1.73%	-0.64%
firstContentfulPaint	451.06 ms +5.01% -1.53%	439.69 ms +1.39% -5.22%	2.59%
firstBlock	3636.72 ms +0.21% -1.65%	3642.75 ms +1.38% -0.88%	-0.17%
type	15.45 ms +3.04% -8.22%	15.44 ms +4.79% -5.38%	0.06%
typeWithoutInspector	13.86 ms +4.47% -4.33%	15.05 ms +5.78% -9.04%	-7.91%
typeWithTopToolbar	19.6 ms +3.42% -2.19%	19.28 ms +7.16% -5.34%	1.66%
typeContainer	9.42 ms +13.27% -3.82%	9.8 ms +8.88% -9.9%	-3.88%
focus	79.69 ms +3.17% -4.99%	81.02 ms +9.29% -10.54%	-1.64%
firstFocus	173.07 ms +0% -0%	178.83 ms +0% -0%	-3.22%
selectAll	619.26 ms +2.22% -4.14%	611.4 ms +2.89% -0.68%	1.29%
listViewOpen	78.01 ms +9.37% -15.16%	72.71 ms +10.85% -7.41%	7.29%
inserterOpen	23.06 ms +4.99% -4.77%	23.53 ms +10.96% -8.46%	-2%
inserterHover	3.65 ms +6.03% -10.41%	3.32 ms +12.05% -9.64%	9.94%
inserterSearch	8.29 ms +13.15% -7.48%	8.34 ms +8.99% -7.31%	-0.6%
loadPatterns	643.84 ms +1.62% -2.05%	638.51 ms +1.01% -2.87%	0.83%
wpTotal	511.52 ms +1.52% -7.79%	521.6 ms +2.86% -6.47%	-1.93%
wpMemoryUsage	13.06 MB +0% -0%	13.02 MB +0% -0%	0.28%
wpDbQueries	54 +0% -1.85%	54 +0% -1.85%	0%

site-editor

Metric	0986696	trunk	% Change
serverResponse	514.14 ms +0.81% -7.39%	494.95 ms +3.4% -5.81%	3.88%
firstPaint	243.57 ms +25.27% -9.67%	224.85 ms +14.66% -9.1%	8.33%
domContentLoaded	1395.76 ms +1.25% -0.96%	1385.36 ms +1.17% -0.57%	0.75%
loaded	1396.96 ms +1.26% -0.96%	1386.85 ms +1.14% -0.58%	0.73%
firstContentfulPaint	431.97 ms +4.24% -0.66%	434.76 ms +1.15% -1.56%	-0.64%
firstBlock	4452.9 ms +0.85% -0.91%	4468.19 ms +0.96% -0.98%	-0.34%
type	15.92 ms +9.55% -17.4%	14.6 ms +9.59% -6.92%	9.04%
navigate	104.33 ms +7.3% -4.47%	106.56 ms +3.25% -12.11%	-2.09%
loadPatterns	1419.29 ms +7.58% -8.11%	1339.13 ms +10.52% -8.06%	5.99%
loadPages	1167.87 ms +6.2% -3.18%	1147.42 ms +8.39% -3.23%	1.78%
wpTotal	504.67 ms +0.71% -7.48%	485.36 ms +3.39% -5.96%	3.98%
wpMemoryUsage	12.07 MB +0% -0%	12.04 MB +0% -0%	0.23%
wpDbQueries	43 +2.33% -0%	43 +2.33% -0%	0%

_{10ce9e3 Run}

🏁 Flaky tests

Show the failures

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.

persists table layout across all tabs with unified view persistence (Site Editor v2) in /test/e2e/specs/site-editor/pages-view-persistence.spec.js, passed after 1 failed attempt.

Error: apiRequestContext.get: socket hang up
Call log:
  - → GET http://localhost:8889/wp-admin/themes.php
    - user-agent: Playwright/1.62.1 (x64; ubuntu 24.04) node/20.20 CI/1
    - accept: */*
    - accept-encoding: gzip,deflate,br
    - cookie: wordpress_test_cookie=WP%20Cookie%20check; wordpress_23778236db82f19306f247e20a353a99=admin%7C1788872858%7CFgL5lece8hzvlxfQ8x1ZwVDWQdsJokajwjjgq0d0Zud%7Ceae39dfd4c8547b839be0056d147d21b54b7203ce30cf94ac6fc8b1d4e297d52; wordpress_logged_in_23778236db82f19306f247e20a353a99=admin%7C1788872858%7CFgL5lece8hzvlxfQ8x1ZwVDWQdsJokajwjjgq0d0Zud%7C687ba134d51dc90247b6381a4892e0852072bca6f446a7dbe5c62b9ff99773f2; wp-settings-time-1=1788700331

    at RequestUtils.activateTheme (/home/runner/work/gutenberg/gutenberg/packages/e2e-test-utils-playwright/src/request-utils/themes.ts:10:36)
    at /home/runner/work/gutenberg/gutenberg/test/e2e/specs/site-editor/pages-view-persistence.spec.js:43:22

two users concurrently move list items (RTC WebSocket) in /test/e2e/specs/editor/collaboration/collaboration-stress.spec.ts, passed after 1 failed attempt.

TimeoutError: locator.click: Timeout 10000ms exceeded.
Call log:
  - waiting for locator('role=toolbar[name="Block tools"i]').locator('role=button[name="Move up"i]')
    - locator resolved to <button id=":r14:" type="button" tabindex="-1" aria-label="Move up" data-toolbar-item="true" aria-describedby="block-editor-block-mover-button__description-0" class="components-button block-editor-block-mover-button is-up-button is-next-40px-default-size has-icon">…</button>
  - attempting click action
    - waiting for element to be visible, enabled and stable
    - element is visible, enabled and stable
    - scrolling into view if needed
    - done scrolling
  - element was detached from the DOM, retrying

    at /home/runner/work/gutenberg/gutenberg/test/e2e/specs/editor/collaboration/collaboration-stress.spec.ts:623:7
    at /home/runner/work/gutenberg/gutenberg/test/e2e/specs/editor/collaboration/collaboration-stress.spec.ts:602:3

_{10ce9e3 Run}

[github-actions]

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: ciampo <mciampini@git.wordpress.org>
Co-authored-by: Kallyan01 <kallyansin@git.wordpress.org>
Co-authored-by: mirka <0mirka00@git.wordpress.org>
Co-authored-by: jameskoster <jameskoster@git.wordpress.org>

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