Background
This task encompasses the work required to create a more accessible reduced motion experience for the new donate button on MinervaNeue.
User story
- Add a user who prefers an experience with reduced animations (due to vestibular conditions or otherwise) I expect Wikipedia to honour that preference and serve a mobile web UI with no animations.
Requirements
- Ensure the animation does not run if the OS or browser has "reduce motion" settings enabled.
BDD
Scenario 1: Animation does not run if motion reduction settings are enabled
Given I have enabled "Reduce Motion" settings in my OS or browser
When I load the page
Then The animation should not run
And The interface should remain static
Test Steps
- Open Chrome DevTools.
- Go to the Rendering Tab.
- Scroll down to Emulate CSS prefers-reduced-motion and select Reduce.
- Refresh the page.
- AC1: The static image (puzzle.png) is displayed.
Design
TODO: a static PNG version of the following image should be provided.
QA Results - Beta
| AC | Status | Details |
|---|---|---|
| 1 | ✅ | T388446#10631317 |
QA Results - Prod
| AC | Status | Details |
|---|---|---|
| 1 | ✅ | T388446#10676699 |
Acceptance criteria
- The animation does not run when motion reduction settings are enabled in the OS or browser.
This task was created by Version 1.2.0 of the Web team task template using phabulous
