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> |
||
|---|---|---|
| .. | ||
| content_management_examples | ||
| controls_example | ||
| data_view_field_editor_example | ||
| developer_examples | ||
| discover_customization_examples | ||
| embeddable_examples | ||
| error_boundary | ||
| eso_model_version_example | ||
| esql_ast_inspector | ||
| esql_validation_example | ||
| expressions_explorer | ||
| feature_control_examples | ||
| feature_flags_example | ||
| field_formats_example | ||
| files_example | ||
| grid_example | ||
| guided_onboarding_example | ||
| hello_world | ||
| locator_examples | ||
| locator_explorer | ||
| partial_results_example | ||
| portable_dashboards_example | ||
| preboot_example | ||
| resizable_layout_examples | ||
| response_stream | ||
| routing_example | ||
| screenshot_mode_example | ||
| search_examples | ||
| share_examples | ||
| sse_example | ||
| state_containers_examples | ||
| ui_action_examples | ||
| ui_actions_explorer | ||
| unified_doc_viewer | ||
| unified_field_list_examples | ||
| unified_tabs_examples | ||
| user_profile_examples | ||
| v8_profiler_examples | ||
| README.asciidoc | ||
[[example-plugins]] == Example plugins This folder contains example plugins. To run the plugins in this folder, use the `--run-examples` flag (without a basepath), via [source,bash] ---- yarn start --run-examples ----