[kbn-grid-layout][dashboard] Basic keyboard interaction #208286
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
mbondyra
added
Team:Presentation
mbondyra
force-pushed
the
collapsable_panels/keyboard_navigation
branch
2 times, most recently
from
a51cf39 to
92ba30d
Compare
mbondyra
force-pushed
the
collapsable_panels/keyboard_navigation
branch
5 times, most recently
from
561cb55 to
8821b63
Compare
mbondyra
changed the title
mbondyra
changed the title
mbondyra
changed the title
mbondyra
changed the title
mbondyra
added
release_note:enhancement
backport:skip
mbondyra
commented
Mar 25, 2025
src/platform/packages/private/kbn-grid-layout/grid/use_grid_layout_events/sensors/index.ts
Show resolved
Hide resolved
mbondyra
commented
Mar 25, 2025
mbondyra
force-pushed
the
collapsable_panels/keyboard_navigation
branch
from
8821b63 to
486e967
Compare
…bondyra/kibana into collapsable_panels/keyboard_navigation
…ble_panels/keyboard_navigation
…eyboard_navigation
Heenawter
reviewed
Mar 31, 2025
src/platform/packages/private/kbn-grid-layout/grid/grid_panel/grid_panel.tsx
Outdated
Show resolved
Hide resolved
mbondyra
force-pushed
the
collapsable_panels/keyboard_navigation
branch
from
8db20de to
02f7d31
Compare
mbondyra
added a commit
that referenced
this pull request
Mar 31, 2025
) ## Summary While working on [PR #208286](#208286), I found a small but noticeable bug: When using keyboard navigation with compacted hover actions, the element shifts slightly left when moving up/down. https://github.com/user-attachments/assets/71e44671-c98a-4e09-a0a0-1c79efeefa25 #### Cause: * `sensorOffsets` are calculated before activation, when the panel has a 1px border. * Activating the element increases the border to 2px, throwing off the position calculation. #### Why we cannot use outline (that is used for panels to avoid shifting the layout): For panels, this problem is avoided by using outline, but here we can't because `outline` applies uniformly to all sides. Here, we need to avoid displaying a bottom border. #### Before fix (Notice how hover actions get slightly wider) https://github.com/user-attachments/assets/a6b8dd02-4be2-4425-bf28-2af6dde3b023 https://github.com/user-attachments/assets/03c5aa71-cd3c-4181-bb4c-05a2003775f5 After Fix: The dimensions of the whole active panel and actions are stable: https://github.com/user-attachments/assets/d7ba766e-2567-4c3e-a2d6-9c95de2e2f9a https://github.com/user-attachments/assets/220ee96f-29b8-4f68-bd9c-1d2ee15b9e5d I know this makes the implementation slightly more complex, but I couldn't find a simpler solution that covers all cases (dotted line forces us to us `outline` or `border` for panel, but no bottom border forces us to use `border` (which causes this problem) or `box-shadow`)
kibanamachine
pushed a commit
to kibanamachine/kibana
that referenced
this pull request
Mar 31, 2025
…tic#216412) ## Summary While working on [PR elastic#208286](elastic#208286), I found a small but noticeable bug: When using keyboard navigation with compacted hover actions, the element shifts slightly left when moving up/down. https://github.com/user-attachments/assets/71e44671-c98a-4e09-a0a0-1c79efeefa25 #### Cause: * `sensorOffsets` are calculated before activation, when the panel has a 1px border. * Activating the element increases the border to 2px, throwing off the position calculation. #### Why we cannot use outline (that is used for panels to avoid shifting the layout): For panels, this problem is avoided by using outline, but here we can't because `outline` applies uniformly to all sides. Here, we need to avoid displaying a bottom border. #### Before fix (Notice how hover actions get slightly wider) https://github.com/user-attachments/assets/a6b8dd02-4be2-4425-bf28-2af6dde3b023 https://github.com/user-attachments/assets/03c5aa71-cd3c-4181-bb4c-05a2003775f5 After Fix: The dimensions of the whole active panel and actions are stable: https://github.com/user-attachments/assets/d7ba766e-2567-4c3e-a2d6-9c95de2e2f9a https://github.com/user-attachments/assets/220ee96f-29b8-4f68-bd9c-1d2ee15b9e5d I know this makes the implementation slightly more complex, but I couldn't find a simpler solution that covers all cases (dotted line forces us to us `outline` or `border` for panel, but no bottom border forces us to use `border` (which causes this problem) or `box-shadow`) (cherry picked from commit b2c8762)
cqliu1
pushed a commit
to cqliu1/kibana
that referenced
this pull request
Mar 31, 2025
…tic#216412) ## Summary While working on [PR elastic#208286](elastic#208286), I found a small but noticeable bug: When using keyboard navigation with compacted hover actions, the element shifts slightly left when moving up/down. https://github.com/user-attachments/assets/71e44671-c98a-4e09-a0a0-1c79efeefa25 #### Cause: * `sensorOffsets` are calculated before activation, when the panel has a 1px border. * Activating the element increases the border to 2px, throwing off the position calculation. #### Why we cannot use outline (that is used for panels to avoid shifting the layout): For panels, this problem is avoided by using outline, but here we can't because `outline` applies uniformly to all sides. Here, we need to avoid displaying a bottom border. #### Before fix (Notice how hover actions get slightly wider) https://github.com/user-attachments/assets/a6b8dd02-4be2-4425-bf28-2af6dde3b023 https://github.com/user-attachments/assets/03c5aa71-cd3c-4181-bb4c-05a2003775f5 After Fix: The dimensions of the whole active panel and actions are stable: https://github.com/user-attachments/assets/d7ba766e-2567-4c3e-a2d6-9c95de2e2f9a https://github.com/user-attachments/assets/220ee96f-29b8-4f68-bd9c-1d2ee15b9e5d I know this makes the implementation slightly more complex, but I couldn't find a simpler solution that covers all cases (dotted line forces us to us `outline` or `border` for panel, but no bottom border forces us to use `border` (which causes this problem) or `box-shadow`)
kibanamachine
added a commit
that referenced
this pull request
Mar 31, 2025
…#216412) (#216543) # Backport This will backport the following commits from `main` to `8.x`: - [[Dashboard] do not change the geometry of hover actions on drag (#216412)](#216412) <!--- Backport version: 9.6.6 --> ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sorenlouv/backport) <!--BACKPORT [{"author":{"name":"Marta Bondyra","email":"[email protected]"},"sourceCommit":{"committedDate":"2025-03-31T20:34:41Z","message":"[Dashboard] do not change the geometry of hover actions on drag (#216412)\n\n## Summary\n\nWhile working on [PR\n#208286](#208286), I found a small\nbut noticeable bug: When using keyboard navigation with compacted hover\nactions, the element shifts slightly left when moving up/down.\n\n\nhttps://github.com/user-attachments/assets/71e44671-c98a-4e09-a0a0-1c79efeefa25\n\n#### Cause:\n* `sensorOffsets` are calculated before activation, when the panel has a\n1px border.\n* Activating the element increases the border to 2px, throwing off the\nposition calculation.\n\n#### Why we cannot use outline (that is used for panels to avoid\nshifting the layout):\n\nFor panels, this problem is avoided by using outline, but here we can't\nbecause `outline` applies uniformly to all sides.\nHere, we need to avoid displaying a bottom border.\n\n#### Before fix\n(Notice how hover actions get slightly wider)\n\n\nhttps://github.com/user-attachments/assets/a6b8dd02-4be2-4425-bf28-2af6dde3b023\n\n\nhttps://github.com/user-attachments/assets/03c5aa71-cd3c-4181-bb4c-05a2003775f5\n\nAfter Fix:\nThe dimensions of the whole active panel and actions are stable:\n\n\nhttps://github.com/user-attachments/assets/d7ba766e-2567-4c3e-a2d6-9c95de2e2f9a\n\n\nhttps://github.com/user-attachments/assets/220ee96f-29b8-4f68-bd9c-1d2ee15b9e5d\n\nI know this makes the implementation slightly more complex, but I\ncouldn't find a simpler solution that covers all cases (dotted line\nforces us to us `outline` or `border` for panel, but no bottom border\nforces us to use `border` (which causes this problem) or `box-shadow`)","sha":"b2c8762dce71cf030aeec7d5575794e8cca5b86f","branchLabelMapping":{"^v9.1.0$":"main","^v8.19.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["Team:Presentation","release_note:skip","backport:version","v9.1.0","v8.19.0"],"title":"[Dashboard] do not change the geometry of hover actions on drag","number":216412,"url":"https://github.com/elastic/kibana/pull/216412","mergeCommit":{"message":"[Dashboard] do not change the geometry of hover actions on drag (#216412)\n\n## Summary\n\nWhile working on [PR\n#208286](#208286), I found a small\nbut noticeable bug: When using keyboard navigation with compacted hover\nactions, the element shifts slightly left when moving up/down.\n\n\nhttps://github.com/user-attachments/assets/71e44671-c98a-4e09-a0a0-1c79efeefa25\n\n#### Cause:\n* `sensorOffsets` are calculated before activation, when the panel has a\n1px border.\n* Activating the element increases the border to 2px, throwing off the\nposition calculation.\n\n#### Why we cannot use outline (that is used for panels to avoid\nshifting the layout):\n\nFor panels, this problem is avoided by using outline, but here we can't\nbecause `outline` applies uniformly to all sides.\nHere, we need to avoid displaying a bottom border.\n\n#### Before fix\n(Notice how hover actions get slightly wider)\n\n\nhttps://github.com/user-attachments/assets/a6b8dd02-4be2-4425-bf28-2af6dde3b023\n\n\nhttps://github.com/user-attachments/assets/03c5aa71-cd3c-4181-bb4c-05a2003775f5\n\nAfter Fix:\nThe dimensions of the whole active panel and actions are stable:\n\n\nhttps://github.com/user-attachments/assets/d7ba766e-2567-4c3e-a2d6-9c95de2e2f9a\n\n\nhttps://github.com/user-attachments/assets/220ee96f-29b8-4f68-bd9c-1d2ee15b9e5d\n\nI know this makes the implementation slightly more complex, but I\ncouldn't find a simpler solution that covers all cases (dotted line\nforces us to us `outline` or `border` for panel, but no bottom border\nforces us to use `border` (which causes this problem) or `box-shadow`)","sha":"b2c8762dce71cf030aeec7d5575794e8cca5b86f"}},"sourceBranch":"main","suggestedTargetBranches":["8.x"],"targetPullRequestStates":[{"branch":"main","label":"v9.1.0","branchLabelMappingKey":"^v9.1.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/216412","number":216412,"mergeCommit":{"message":"[Dashboard] do not change the geometry of hover actions on drag (#216412)\n\n## Summary\n\nWhile working on [PR\n#208286](#208286), I found a small\nbut noticeable bug: When using keyboard navigation with compacted hover\nactions, the element shifts slightly left when moving up/down.\n\n\nhttps://github.com/user-attachments/assets/71e44671-c98a-4e09-a0a0-1c79efeefa25\n\n#### Cause:\n* `sensorOffsets` are calculated before activation, when the panel has a\n1px border.\n* Activating the element increases the border to 2px, throwing off the\nposition calculation.\n\n#### Why we cannot use outline (that is used for panels to avoid\nshifting the layout):\n\nFor panels, this problem is avoided by using outline, but here we can't\nbecause `outline` applies uniformly to all sides.\nHere, we need to avoid displaying a bottom border.\n\n#### Before fix\n(Notice how hover actions get slightly wider)\n\n\nhttps://github.com/user-attachments/assets/a6b8dd02-4be2-4425-bf28-2af6dde3b023\n\n\nhttps://github.com/user-attachments/assets/03c5aa71-cd3c-4181-bb4c-05a2003775f5\n\nAfter Fix:\nThe dimensions of the whole active panel and actions are stable:\n\n\nhttps://github.com/user-attachments/assets/d7ba766e-2567-4c3e-a2d6-9c95de2e2f9a\n\n\nhttps://github.com/user-attachments/assets/220ee96f-29b8-4f68-bd9c-1d2ee15b9e5d\n\nI know this makes the implementation slightly more complex, but I\ncouldn't find a simpler solution that covers all cases (dotted line\nforces us to us `outline` or `border` for panel, but no bottom border\nforces us to use `border` (which causes this problem) or `box-shadow`)","sha":"b2c8762dce71cf030aeec7d5575794e8cca5b86f"}},{"branch":"8.x","label":"v8.19.0","branchLabelMappingKey":"^v8.19.0$","isSourceBranch":false,"state":"NOT_CREATED"}]}] BACKPORT--> Co-authored-by: Marta Bondyra <[email protected]>
💛 Build succeeded, but was flaky
Failed CI StepsTest Failures
Metrics [docs]Module Count
Public APIs missing comments
Async chunks
Page load bundle
History
|
|
Starting backport for target branches: 8.x |
kibanamachine
pushed a commit
to kibanamachine/kibana
that referenced
this pull request
Apr 1, 2025
## Summary Adds keyboard navigation for drag-and-drop interactions Fixes elastic#211925 Fixes elastic#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 <[email protected]> (cherry picked from commit f5b185a)
💚 All backports created successfully
Note: Successful backport PRs will be merged automatically after passing CI. Questions ?Please refer to the Backport tool documentation |
kibanamachine
added a commit
that referenced
this pull request
Apr 2, 2025
… (#216603) # Backport This will backport the following commits from `main` to `8.x`: - [[kbn-grid-layout][dashboard] Basic keyboard interaction (#208286)](#208286) <!--- Backport version: 9.6.6 --> ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sorenlouv/backport) <!--BACKPORT [{"author":{"name":"Marta Bondyra","email":"[email protected]"},"sourceCommit":{"committedDate":"2025-04-01T09:29:02Z","message":"[kbn-grid-layout][dashboard] Basic keyboard interaction (#208286)\n\n## Summary\nAdds keyboard navigation for drag-and-drop interactions\nFixes https://github.com/elastic/kibana/issues/211925\nFixes https://github.com/elastic/kibana/issues/190448\n\n### Supported features \n1. Resize panels\n\n\nhttps://github.com/user-attachments/assets/ba7add16-a0c6-4f15-9f3b-0f8ef7caf8ac\n\n2. Drag panels within the same section (dragging between sections is\npending)\n\n\nhttps://github.com/user-attachments/assets/a1fd80af-63ca-4fa2-bded-3db9968a8366\n\n3. Move rows up/down\n\n\nhttps://github.com/user-attachments/assets/8d7e8d7d-b1bf-4abe-9cc2-28eeea9b43f8\n\n### Interaction Flow\n\n1. Start interaction with `Space` or `Enter`\n2. Move using arrow keys\n3. Finish by confirming (`Enter`/`Space`) or canceling (`Escape`)\n(blurring also confirms the changes)\n\n### Scrolling Behavior:\n* Default browser scrolling is disabled in interaction mode to avoid\nunexpected behavior and edge cases that would overcomplicate this simple\nimplementation.\n* Scrolling occurs when the user reaches the edge of the screen while\nresizing or dragging, allowing them to continue the interaction\nsmoothly.\n* When the operation is confirmed, we also scroll to the element to make\nsure it's in view.\n\n### Missing (planned for another PR):\n* A11y announcements \n* Dragging between sections\n* This feature is not well unit-tested, but it's very difficult to do it\nwithout mocking the crucial pieces of functionality. I'd vote to leave\nit for now and add a few functional tests once we decide a strategy for\nit, since drag and drop interactions are anyway quite difficult to\nunit-test reliably anyway.\n\n---------\n\nCo-authored-by: kibanamachine <[email protected]>","sha":"f5b185a28f9b1af41ca6a36f010b50b470e34ddb","branchLabelMapping":{"^v9.1.0$":"main","^v8.19.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["Feature:Dashboard","Team:Presentation","loe:large","impact:medium","release_note:feature","Project:Collapsable Panels","backport:version","v9.1.0","v8.19.0"],"title":"[kbn-grid-layout][dashboard] Basic keyboard interaction","number":208286,"url":"https://github.com/elastic/kibana/pull/208286","mergeCommit":{"message":"[kbn-grid-layout][dashboard] Basic keyboard interaction (#208286)\n\n## Summary\nAdds keyboard navigation for drag-and-drop interactions\nFixes https://github.com/elastic/kibana/issues/211925\nFixes https://github.com/elastic/kibana/issues/190448\n\n### Supported features \n1. Resize panels\n\n\nhttps://github.com/user-attachments/assets/ba7add16-a0c6-4f15-9f3b-0f8ef7caf8ac\n\n2. Drag panels within the same section (dragging between sections is\npending)\n\n\nhttps://github.com/user-attachments/assets/a1fd80af-63ca-4fa2-bded-3db9968a8366\n\n3. Move rows up/down\n\n\nhttps://github.com/user-attachments/assets/8d7e8d7d-b1bf-4abe-9cc2-28eeea9b43f8\n\n### Interaction Flow\n\n1. Start interaction with `Space` or `Enter`\n2. Move using arrow keys\n3. Finish by confirming (`Enter`/`Space`) or canceling (`Escape`)\n(blurring also confirms the changes)\n\n### Scrolling Behavior:\n* Default browser scrolling is disabled in interaction mode to avoid\nunexpected behavior and edge cases that would overcomplicate this simple\nimplementation.\n* Scrolling occurs when the user reaches the edge of the screen while\nresizing or dragging, allowing them to continue the interaction\nsmoothly.\n* When the operation is confirmed, we also scroll to the element to make\nsure it's in view.\n\n### Missing (planned for another PR):\n* A11y announcements \n* Dragging between sections\n* This feature is not well unit-tested, but it's very difficult to do it\nwithout mocking the crucial pieces of functionality. I'd vote to leave\nit for now and add a few functional tests once we decide a strategy for\nit, since drag and drop interactions are anyway quite difficult to\nunit-test reliably anyway.\n\n---------\n\nCo-authored-by: kibanamachine <[email protected]>","sha":"f5b185a28f9b1af41ca6a36f010b50b470e34ddb"}},"sourceBranch":"main","suggestedTargetBranches":["8.x"],"targetPullRequestStates":[{"branch":"main","label":"v9.1.0","branchLabelMappingKey":"^v9.1.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/208286","number":208286,"mergeCommit":{"message":"[kbn-grid-layout][dashboard] Basic keyboard interaction (#208286)\n\n## Summary\nAdds keyboard navigation for drag-and-drop interactions\nFixes https://github.com/elastic/kibana/issues/211925\nFixes https://github.com/elastic/kibana/issues/190448\n\n### Supported features \n1. Resize panels\n\n\nhttps://github.com/user-attachments/assets/ba7add16-a0c6-4f15-9f3b-0f8ef7caf8ac\n\n2. Drag panels within the same section (dragging between sections is\npending)\n\n\nhttps://github.com/user-attachments/assets/a1fd80af-63ca-4fa2-bded-3db9968a8366\n\n3. Move rows up/down\n\n\nhttps://github.com/user-attachments/assets/8d7e8d7d-b1bf-4abe-9cc2-28eeea9b43f8\n\n### Interaction Flow\n\n1. Start interaction with `Space` or `Enter`\n2. Move using arrow keys\n3. Finish by confirming (`Enter`/`Space`) or canceling (`Escape`)\n(blurring also confirms the changes)\n\n### Scrolling Behavior:\n* Default browser scrolling is disabled in interaction mode to avoid\nunexpected behavior and edge cases that would overcomplicate this simple\nimplementation.\n* Scrolling occurs when the user reaches the edge of the screen while\nresizing or dragging, allowing them to continue the interaction\nsmoothly.\n* When the operation is confirmed, we also scroll to the element to make\nsure it's in view.\n\n### Missing (planned for another PR):\n* A11y announcements \n* Dragging between sections\n* This feature is not well unit-tested, but it's very difficult to do it\nwithout mocking the crucial pieces of functionality. I'd vote to leave\nit for now and add a few functional tests once we decide a strategy for\nit, since drag and drop interactions are anyway quite difficult to\nunit-test reliably anyway.\n\n---------\n\nCo-authored-by: kibanamachine <[email protected]>","sha":"f5b185a28f9b1af41ca6a36f010b50b470e34ddb"}},{"branch":"8.x","label":"v8.19.0","branchLabelMappingKey":"^v8.19.0$","isSourceBranch":false,"state":"NOT_CREATED"}]}] BACKPORT--> Co-authored-by: Marta Bondyra <[email protected]>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary
Adds keyboard navigation for drag-and-drop interactions
Fixes #211925
Fixes #190448
Supported features
resize4.mp4
drag2.mp4
dragrows.mp4
Interaction Flow
SpaceorEnterEnter/Space) or canceling (Escape) (blurring also confirms the changes)Scrolling Behavior:
Missing (planned for another PR):
Quoting rtl creator: