mirror of
https://github.com/elastic/kibana.git
synced 2025-06-27 18:51:07 -04:00
f5b185a28f
## Summary Adds keyboard navigation for drag-and-drop interactions Fixes https://github.com/elastic/kibana/issues/211925 Fixes https://github.com/elastic/kibana/issues/190448 ### Supported features 1. Resize panels https://github.com/user-attachments/assets/ba7add16-a0c6-4f15-9f3b-0f8ef7caf8ac 2. Drag panels within the same section (dragging between sections is pending) https://github.com/user-attachments/assets/a1fd80af-63ca-4fa2-bded-3db9968a8366 3. Move rows up/down https://github.com/user-attachments/assets/8d7e8d7d-b1bf-4abe-9cc2-28eeea9b43f8 ### Interaction Flow 1. Start interaction with `Space` or `Enter` 2. Move using arrow keys 3. Finish by confirming (`Enter`/`Space`) or canceling (`Escape`) (blurring also confirms the changes) ### Scrolling Behavior: * Default browser scrolling is disabled in interaction mode to avoid unexpected behavior and edge cases that would overcomplicate this simple implementation. * Scrolling occurs when the user reaches the edge of the screen while resizing or dragging, allowing them to continue the interaction smoothly. * When the operation is confirmed, we also scroll to the element to make sure it's in view. ### Missing (planned for another PR): * A11y announcements * Dragging between sections * This feature is not well unit-tested, but it's very difficult to do it without mocking the crucial pieces of functionality. I'd vote to leave it for now and add a few functional tests once we decide a strategy for it, since drag and drop interactions are anyway quite difficult to unit-test reliably anyway. --------- Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com> |
||
|---|---|---|
| .. | ||
| public | ||
| kibana.jsonc | ||
| README.md | ||
| tsconfig.json | ||
Grid Example
This plugin is a playground and learning tool that demonstrates the Dashboard layout engine.