Crud, MR widget, settings block: Add preference for reduced motion
What does this MR do and why?
Crud, MR widget, settings block:
Adds animation to chevron where missing. Will be done in gitlab-ui!5017 (merged)- Adds check for reduced motion user settings for a11y.
- Fixes inconsistency for the divider to separate
actionsfrom the collapse/expand button in Crud vs. MR widgets - Exposes the
is_collapsibleoption of Crud in the Lookbook (http://gdk.test:3000/rails/lookbook/inspect/layouts/crud/default?is_collapsible=true) [JS generally doesn't work in the Lookbook unfortunately]
Screenshots or screen recordings
| Before | After |
|---|---|
prefers-reduced-motion: no-preference |
|
![]() |
![]() |
prefers-reduced-motion: reduced |
|
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
How to set up and validate locally
- Open Developer tools in your browser
- Press Command+Shift+P (Mac), type in
Rendering, Enter - In the
Renderingmenu, Toggle theEmulate CSS media feature prefers-reduced-motionooption
Tests:
- Crud: http://gdk.test:3000/flightjs/Flight/-/issues/3 (any issuable widget that is collapsible/expandable)
- MR Widget: http://gdk.test:3000/flightjs/Flight/-/merge_requests/1
- Settings block: http://gdk.test:3000/flightjs/Flight/edit
MR acceptance checklist
Evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.
Related to #512691 (closed)
Edited by Julia Miocene




