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
actions
from the collapse/expand button in Crud vs. MR widgets - Exposes the
is_collapsible
option 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
Rendering
menu, Toggle theEmulate CSS media feature prefers-reduced-motion
ooption
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