fix(D9): respect reduced motion preference
This commit is contained in:
parent
6013df411d
commit
fce0228992
@ -62,6 +62,17 @@ body {
|
|||||||
to { transform: rotate(360deg); }
|
to { transform: rotate(360deg); }
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@media (prefers-reduced-motion: reduce) {
|
||||||
|
*,
|
||||||
|
*::before,
|
||||||
|
*::after {
|
||||||
|
animation-duration: 0.001ms !important;
|
||||||
|
animation-iteration-count: 1 !important;
|
||||||
|
scroll-behavior: auto !important;
|
||||||
|
transition-duration: 0.001ms !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.dashboard-shell {
|
.dashboard-shell {
|
||||||
display: flex;
|
display: flex;
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
|
|||||||
14
web/src/reducedMotionCss.test.ts
Normal file
14
web/src/reducedMotionCss.test.ts
Normal file
@ -0,0 +1,14 @@
|
|||||||
|
import { readFileSync } from 'node:fs';
|
||||||
|
import { describe, expect, it } from 'vitest';
|
||||||
|
|
||||||
|
describe('reduced-motion CSS guard', () => {
|
||||||
|
it('disables animations and transitions when requested by the user', () => {
|
||||||
|
const cssPath = `${process.cwd()}/src/index.css`;
|
||||||
|
const css = readFileSync(cssPath, 'utf8');
|
||||||
|
|
||||||
|
expect(css).toContain('@media (prefers-reduced-motion: reduce)');
|
||||||
|
expect(css).toContain('animation-duration: 0.001ms !important');
|
||||||
|
expect(css).toContain('animation-iteration-count: 1 !important');
|
||||||
|
expect(css).toContain('transition-duration: 0.001ms !important');
|
||||||
|
});
|
||||||
|
});
|
||||||
Loading…
Reference in New Issue
Block a user