Merge pull request #1491 from BradGroux/fix/reduced-motion-layout-1490

fix: disable unintended reduced-motion layout transitions
This commit is contained in:
Brad Groux 2026-09-04 10:04:35 -05:00 • committed by GitHub
commit 7ed70e11b2
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 11 additions and 1 deletions

View file

@ -8,6 +8,8 @@ The task workspace retains one mounted content tree through drawer, expanded, an
Task confirmations and forms use shared widths and insets, a primary scrolling body, fixed action footers, and quiet Cancel actions. Nested Preview and Conflict Resolver panels become authoring dialogs. Their control bars remain outside the primary scroller. Conflict Resolver's Abort confirmation is inside the shared depth provider, so closing it reactivates the resolver rather than the task behind it.
Reduced-motion preferences make CSS transitions immediate, with no transition delay. A tiny nonzero duration on every element would introduce default `all` transitions and temporarily retain old modal widths, padding, and gaps when text size changes. Footer checks retain exact before/after-scroll geometry rather than waiting away that layout regression. Explicit keyframe animations retain their finite reduced duration for animation-event compatibility.
| Family | Source | Browser geometry evidence | Packaged macOS evidence |
| ------------------------------------------------- | --------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------- | ----------------------- |
| Task root | `TaskDetailPanel`, `UiTaskSurface` | Expanded mode retains section, scroll, board opener | Pending |

View file

@ -97,6 +97,12 @@ for (const theme of ['light', 'dark']) {
}, geometry.fontSize);
const footer = dialog.locator('.vk-overlay-footer');
const scroll = dialog.locator('.vk-overlay-scroll');
if (reducedMotion === 'reduce') {
// A tiny nonzero duration introduces default `all` transitions,
// deferring rem-based padding and width changes by a frame.
await expect(footer).toHaveCSS('transition-duration', '0s');
await expect(footer).toHaveCSS('transition-delay', '0s');
}
for (const action of actions) {
await expect(
footer.getByRole('button', { name: action, exact: true })

View file

@ -287,7 +287,9 @@
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
/* Nonzero duration would introduce default `all` layout transitions. */
transition-duration: 0s !important;
transition-delay: 0s !important;
scroll-behavior: auto !important;
}
}