clean-and-green-philly
clean-and-green-philly copied to clipboard
A11y: Disable animation in Pagination when user `prefers-reduced-motion`
Describe the task
When a user has prefers-reduced-motion turned on, they don't want to see animations and other unnecessary movement, since it might trigger seizures or other issues.
The NextUI pagination component we use can take the prop disableAnimation. We should pass this as true when the user has prefers-reduced-motion on. Or also we could just always disable the animation... :D
Acceptance Criteria
- [ ] Go to your settings and turn on reduced-motion. On Mac you can search for "reduce motion" - it's under the Display settings.
- [ ] Go to the properties list page and click on pagination to the left and right.
- [ ] You should not see the animation, the change should look instant.
Additional context
- NextUI Pagination component docs
- prefers-reduced-motion docs
- https://dev.to/natclark/checking-for-reduced-motion-preference-in-javascript-4lp9