List: Support keyboard dragging between different Lists

[Csmith246]

Check existing issues

• I have checked for existing issues to avoid duplicates

Description

Be able to use the keyboard to drag between lists. Currently, you can only drag via keyboard within a List.

Acceptance Criteria

Grouping multiple lists together, be able to perform drag and drop of different list items with only the keyboard.

In terms of implementation, I'd assume using the left/right arrows when in keyboard drag mode on a List Item would just find the next List in the page (to the left or right) and then move the item to that List, if it exists.

Relevant Info

Ref to similar issue: #7046

Which Component

Calcite List

Example Use Case

In Instant Apps, our Position Manager ties 4 Calcite Lists together. The desire is to support keyboard only movement between the lists for accessibility.

Priority impact

p3 - want for upcoming milestone

Calcite package

• @esri/calcite-components
• @esri/calcite-components-react

Esri team

ArcGIS Instant Apps

[geospatialem]

Effort should be considered with the effort in #7426

[geospatialem]

Dependent on the spike for #9261.

[driskull]

@geospatialem I'd like to implement a menu to be able to move items up, down, first, last and between lists.

Something like: https://atlassian.design/components/pragmatic-drag-and-drop/examples/#list

However, to do this, the current space bar key for starting movement would need to change to open a menu.

Would we want to pursue this route in place of the existing functionality of moving with arrow keys?

[geospatialem]

@geospatialem I'd like to implement a menu to be able to move items up, down, first, last and between lists.

Something like: https://atlassian.design/components/pragmatic-drag-and-drop/examples/#list

However, to do this, the current space bar key for starting movement would need to change to open a menu.

Would we want to pursue this route in place of the existing functionality of moving with arrow keys?

@driskull This sounds like a great approach! But would think this would fall into a breaking change, is it something we could hold off on until late 2024?

[driskull]

Yes, if we want to move this issue to another milestone.

[driskull]

This is going to require a new internal component to handle the dropdown menu.

I can't use calcite-handle because it would require a large refactor and calcite-sortable-list requires it as is.

[driskull]

@geospatialem if we don't want a dropdown menu to move, we could go with a dialog like shown

Dialog design: https://atlassian.design/components/pragmatic-drag-and-drop/examples/#tree
Menu design: https://atlassian.design/components/pragmatic-drag-and-drop/examples/#board

@ashetland @SkyeSeitz what are your thoughts?

[ashetland]

I think I'm missing the nuance, both those example look the same. In these examples [enter], [space], and [down-arrow] all open the menu. I do like the gropings in the menu for in-list and between-list:

[driskull]

@ashetland sorry, see the tree example: https://atlassian.design/components/pragmatic-drag-and-drop/examples/#tree

[ashetland]

Oh! Thanks, @driskull. I definitely prefer the dropdown menu of the Dialog. It's harder to track context in the state.

[ashetland]

What's the issue with the dropdown approach? In the linked examples, [enter], [space], and [down-arrow] all open the menu.

[driskull]

What's the issue with the dropdown approach? In the linked examples, [enter], [space], and [down-arrow] all open the menu.

Nothing, I just wanted to consult some designers to make sure we're taking the right approach.

[ashetland]

Awesome. Really like this direction. Also like that click+drag doesn't open the menu, but a simple click does open it.

[driskull]

When moving lists, do you think it should move to the top or the bottom of the list? My initial feeling was the bottom but the demos linked move to the top.

[ashetland]

Top of the list feels more expected to me. This would also match the behavior of Combobox with allow-custom-values. Would we also be adding an auto-scroll to the top when moved?