chore(progress-circle): refine reduced motion animation

[cdransf]

Description

Progress Circle's indeterminate spin animation currently freezes completely (animation: none) under prefers-reduced-motion: reduce. This PR replaces that freeze with the same slowed, linear animation technique already shipped for Button's pending spinner (pending-spinner.css): the ring keeps rotating at ~15s per revolution instead of stopping, and the dash-offset "pulse" is disabled so the stroke length stays constant during the slow rotation.

Changes are scoped to 2nd-gen/packages/swc/components/progress-circle/progress-circle.css:

• swc-fills-rotate and swc-dashoffset-animation keyframes now read their rotate start/end and dash-offset values from overridable custom properties (--swc-progress-circle-rotate-start, --swc-progress-circle-rotate-end, --swc-progress-circle-dashoffset-30), defaulting to the existing normal-motion values.
• The prefers-reduced-motion: reduce block now overrides those custom properties to a full 0deg → 360deg rotation with no dash pulse, and sets animation-duration: 15s / animation-timing-function: linear, linear, instead of disabling the animation.
• Removed the stale @todo Come back to this when we discuss reduce motion animations comment, since this resolves it.

No changes to markup, public custom property names/values, class names, or any other component. Button, ActionButton, and the shared pending-spinner.css stylesheet are untouched.

Motivation and context

Static, fully-paused loading indicators under reduced motion satisfy the letter of WCAG 2.2.2 (Pause, Stop, Hide) but lose the animation's actual purpose: signaling "this is still in progress." Button's pending spinner already solves this with a slowed-but-still-moving animation that stays within an accessible motion threshold. This PR brings that same, already-agreed-upon solution to Progress Circle so both components handle reduced motion consistently.

An investigation into directly sharing pending-spinner.css between the two components (rather than mirroring the technique) was considered and set aside: Progress Circle exposes public, documented custom properties for track/fill color, size, and thickness, while pending-spinner.css hardcodes those privately with no consumer override (it was built only for use nested inside Button/ActionButton's shadow tree). Reusing it directly would either break Progress Circle's existing public API or require expanding pending-spinner.css's API for Button and ActionButton as well — well beyond this change's scope. Progress Circle also supports a determinate mode that the pending spinner has no equivalent for.

Related issue(s)

• SWC-2064

Screenshots

Not applicable — this change only affects animation timing under the OS-level prefers-reduced-motion setting, which isn't meaningfully conveyed by a static screenshot. See the manual review steps below for how to verify the behavior.

Author's checklist

• I have read the CONTRIBUTING and PULL_REQUESTS documents.
• I have reviewed at the Accessibility Practices for this feature, see: Aria Practices
• I have added automated tests to cover my changes. (No existing test in this codebase exercises prefers-reduced-motion CSS behavior — including Button's own pending-spinner reduced-motion handling — so none were added here either; verification is manual, see below.)
• I have included a well-written changeset if my change needs to be published. (2nd-gen packages are currently excluded from the changeset workflow per .changeset/config.json.)
• I have included updated documentation if my change required it. (No existing MDX/README content documents motion timing specifics, so none needed updating.)

Reviewer's checklist

• Includes a Github Issue with appropriate flag or Jira ticket number without a link
• Includes thoughtfully written changeset if changes suggested include patch, minor, or major features
• Automated tests cover all use cases and follow best practices for writing
• Validated on all supported browsers
• All VRTs are approved before the author can update Golden Hash

Manual review test cases

• Reduced-motion indeterminate animation slows down instead of freezing

  1. Enable "Reduce motion" in OS accessibility settings (macOS: System Settings → Accessibility → Display → Reduce motion; Windows: Settings → Accessibility → Visual effects → Animation effects off).
  2. In Storybook, open Progress Circle and view an indeterminate story (no progress value set).
  3. Expect the ring to keep rotating, but at a visibly slower, steady ~15s-per-revolution rate with no size-pulsing, instead of stopping/freezing.

• Normal-motion behavior is unchanged

  1. With the OS-level "Reduce motion" setting left at its default (disabled), open the same indeterminate Progress Circle story.
  2. Expect the ring to spin at the original ~1s cadence with the dash-offset pulse, identical to behavior before this PR.

• No regression to Button/ActionButton pending spinner

  1. In Storybook, open Button (or Action Button), trigger the pending state, and wait for the spinner to appear.
  2. Toggle the OS "Reduce motion" setting on and off.
  3. Expect no change in behavior from before this PR — pending-spinner.css was not touched.

Device review

• Did it pass in Desktop?
• Did it pass in (emulated) Mobile?
• Did it pass in (emulated) iPad?

Accessibility testing checklist

• Keyboard

  1. Progress Circle has no focusable parts (role="progressbar", non-interactive) — this PR does not add any. Open Storybook's Progress Circle page and Tab through it and its surrounding controls.
  2. Confirm the progress circle itself is skipped in the tab order (as before this change) and that nothing else on the page traps or redirects focus.

• Screen reader

  1. Open Storybook's Progress Circle indeterminate story with a screen reader running (VoiceOver on macOS, NVDA on Windows), with OS-level "Reduce motion" enabled.
  2. Move focus/cursor onto the progress circle and let the screen reader announce it.
  3. Confirm the announced role ("progress indicator"/"progress bar"), accessible name (from label, aria-label, or the default "Loading" fallback), and value text are unchanged from before this PR — this change only affects animation-duration / animation-timing-function under prefers-reduced-motion, not any ARIA attribute or accessible-name logic in ProgressCircle.ts/ProgressCircleBase.

[changeset-bot]

🦋 Changeset detected

Latest commit: 2d78090

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 2 packages

Name	Type
@adobe/spectrum-wc	Patch
@adobe/spectrum-wc-core	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[github-actions]

📚 Branch Preview Links

• Storybook (Gen2, dev mode)
• Storybook (Gen2, prod mode)
• Documentation Site (Gen1)
• Storybook (Gen1)

🔍 Gen1 Visual Regression Test Results

When a visual regression test fails (or has previously failed while working on this branch), its results can be found in the following URLs:

• Spectrum | Light | Medium | LTR
• Spectrum | Dark | Large | RTL
• Express | Light | Medium | LTR
• Express | Dark | Large | RTL
• Spectrum-two | Light | Medium | LTR
• Spectrum-two | Dark | Large | RTL
• High Contrast Mode | Medium | LTR

Deployed to Azure Blob Storage: pr-6533

If the changes are expected, update the current_golden_images_cache hash in the circleci config to accept the new images. Instructions are included in that file.
If the changes are unexpected, you can investigate the cause of the differences and update the code accordingly.

[5t3ph]

LGTM!

[coveralls]

Coverage Report for CI Build 29866708815

Warning

No base build found for commit a051630 on main.
Coverage changes can't be calculated without a base build.
If a base build is processing, this comment will update automatically when it completes.

Coverage: 96.243%

Details

• Patch coverage: No coverable lines changed in this PR.

Uncovered Changes

No uncovered changes found.

Coverage Regressions

Requires a base build to compare against. How to fix this →

---

Coverage Stats

Relevant Lines:	39208
Covered Lines:	37935
Line Coverage:	96.75%
Relevant Branches:	6466
Covered Branches:	6023
Branch Coverage:	93.15%
Branches in Coverage %:	Yes
Coverage Strength:	461.52 hits per line

---

💛 - Coveralls

[rise-erpelding]

This looks great!