mirror of
https://github.com/BradGroux/veritas-kanban.git
synced 2026-10-10 05:37:53 +00:00
Merge pull request #1491 from BradGroux/fix/reduced-motion-layout-1490
fix: disable unintended reduced-motion layout transitions
This commit is contained in:
commit
7ed70e11b2
3 changed files with 11 additions and 1 deletions
|
|
@ -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 |
|
||||
|
|
|
|||
|
|
@ -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 })
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue