List: Support keyboard dragging between different Lists #7537

Csmith246 · 2023-08-16T18:10:05Z

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 · 2023-08-21T18:19:16Z

Effort should be considered with the effort in #7426

) **Related Issue:** #7537 ## Summary - depends on #10241 - updates `action` to allow cursor to be overriden - lists should set the `label` property for the "Move to" sorting menu to have a name for the list. - adds `calcite-sort-handle` component to handle sorting and moving between lists for non mouse users - internal component - adds stories - adds tests - list-item - deprecates `dragSelected` property: no longer needed. - deprecates `calciteListItemDragHandleChange` event. no longer needed. - removed setting `aria-posinset` and `aria-setsize`. These are only needed when only part of the items are availalbe in the DOM. So we can safely remove these. - https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-setsize - https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-posinset - replaces `calcite-handle` with `calcite-sort-handle` in the `list` component. - updates tests - adds tests - adds demo pages BREAKING CHANGE: Modifies the component's keyboard sorting experience by using a dropdown menu to move list items. The ListItem `dragSelected` property and `calciteListItemDragHandleChange` event have been removed due to no longer being relevant.

github-actions · 2024-10-31T20:44:29Z

Installed and assigned for verification.

ashetland · 2024-10-31T21:37:09Z

Now that we're using Action for the drag handle, we need to override it's icon color from text.3 to border.input to match our prior implementation. border.input is preferred to keep the drag handle less visually prominent while still meeting AA wcag standards. cc @driskull

**Related Issue:** #7537 ## Summary - adjust icon color to use border-input color.

driskull · 2024-10-31T22:05:22Z

Now that we're using Action for the drag handle, we need to override it's icon color from text.3 to border.input to match our prior implementation. border.input is preferred to keep the drag handle less visually prominent while still meeting AA wcag standards.

Done

geospatialem · 2024-11-06T18:56:51Z

It looks like where multiple lists are provided with the current implementation the label would be required to provide context on where the list-item would move to via https://codepen.io/geospatialem/pen/JjgmKVb:

No `label` value	With `label` value

Wondering what folks think, if we should consider:

Require the label prop/attr
Have a fallback if label isn't specified and/or
Update the documentation that specifies a label property should be accompanied when working with multiple lists

cc @driskull @jcfranco

driskull · 2024-11-06T18:59:05Z

I lean towards documentation or making label required. I'm not sure what the fallback would be.

geospatialem · 2024-11-06T20:04:29Z

I lean towards documentation or making label required. I'm not sure what the fallback would be.

We have several other components that have a required label prop (alert, card-group, carousel-, loader, etc.), maybe we should do the same here?

driskull · 2024-11-06T20:06:16Z

Yeah. I think we can also document that the label is needed for moving between lists.

…10702) **Related Issue:** #7537 ## Summary - Modifies the component's `label` property to be required - Provides context to the `label` property, where its value specifies the name when dragging between lists discussed in #7537 (comment) and the subsequent thread BREAKING CHANGE: The component's `label` property is required to provide context between lists when dragging.

github-actions · 2024-11-15T07:57:28Z

Installed and assigned for verification.

geospatialem · 2024-11-19T21:01:49Z

@DitwanP For verification see this comment for a sample to test out. 🧪

DitwanP · 2024-11-19T23:20:24Z

🍡 Verified on 3.0.0-next.7

Csmith246 added 0 - new New issues that need assignment. enhancement Issues tied to a new feature or request. needs triage Planning workflow - pending design/dev review. labels Aug 16, 2023

github-actions bot added ArcGIS Instant Apps Issues logged by ArcGIS Instant Apps team members. p3 - want for upcoming milestone calcite-components Issues specific to the @esri/calcite-components package. labels Aug 16, 2023

geospatialem mentioned this issue Aug 21, 2023

[List and List Item] Support sorting for AT users #7426

Closed

3 tasks

geospatialem added this to the 2024 January Priorities - Main release milestone Sep 6, 2023

geospatialem removed the needs milestone Planning workflow - pending milestone assignment, has priority and/or estimate. label Sep 6, 2023

geospatialem modified the milestones: 2024 January Priorities - Main release, 2024 April Priorities Dec 18, 2023

geospatialem assigned aPreciado88 Apr 22, 2024

geospatialem added 1 - assigned Issues that are assigned to a sprint and a team member. and removed 0 - new New issues that need assignment. labels Apr 22, 2024

aPreciado88 added 2 - in development Issues that are actively being worked on. and removed 1 - assigned Issues that are assigned to a sprint and a team member. labels Apr 22, 2024

geospatialem modified the milestones: 2024-04-30 - Apr Release, 2024-05-28 - May Main Release Apr 24, 2024

geospatialem added 0 - new New issues that need assignment. and removed 2 - in development Issues that are actively being worked on. labels Apr 24, 2024

geospatialem unassigned aPreciado88 Apr 24, 2024

macandcheese added the c-list Issues that pertain to the calcite-list component label May 1, 2024

geospatialem removed this from the 2024-05-28 - May Main Release milestone May 6, 2024

geospatialem added the needs milestone Planning workflow - pending milestone assignment, has priority and/or estimate. label May 6, 2024

geospatialem assigned driskull May 15, 2024

driskull added 3 - installed Issues that have been merged to master branch and are ready for final confirmation. and removed 2 - in development Issues that are actively being worked on. labels Oct 31, 2024

github-actions bot assigned geospatialem Oct 31, 2024

github-actions bot assigned DitwanP and unassigned driskull Oct 31, 2024

driskull added a commit that referenced this issue Oct 31, 2024

fix(sort-handle): adjust icon color. #7537

1c4ebfe

driskull mentioned this issue Oct 31, 2024

fix(sort-handle): adjust icon color #10663

Merged

driskull added a commit that referenced this issue Oct 31, 2024

fix(sort-handle): adjust icon color (#10663)

1c586f2

**Related Issue:** #7537 ## Summary - adjust icon color to use border-input color.

geospatialem mentioned this issue Nov 6, 2024

feat(list)!: require label for context when dragging between lists #10702

Merged

geospatialem added 2 - in development Issues that are actively being worked on. and removed 3 - installed Issues that have been merged to master branch and are ready for final confirmation. labels Nov 6, 2024

geospatialem unassigned DitwanP Nov 6, 2024

jcfranco added 3 - installed Issues that have been merged to master branch and are ready for final confirmation. and removed 2 - in development Issues that are actively being worked on. labels Nov 15, 2024

github-actions bot assigned DitwanP Nov 15, 2024

DitwanP closed this as completed Nov 19, 2024

DitwanP added 4 - verified Issues that have been released and confirmed resolved. and removed 3 - installed Issues that have been merged to master branch and are ready for final confirmation. labels Nov 19, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

List: Support keyboard dragging between different Lists #7537

List: Support keyboard dragging between different Lists #7537

Csmith246 commented Aug 16, 2023

geospatialem commented Aug 21, 2023

github-actions bot commented Oct 31, 2024

ashetland commented Oct 31, 2024 •

edited

Loading

driskull commented Oct 31, 2024

geospatialem commented Nov 6, 2024 •

edited

Loading

driskull commented Nov 6, 2024

geospatialem commented Nov 6, 2024

driskull commented Nov 6, 2024

github-actions bot commented Nov 15, 2024

geospatialem commented Nov 19, 2024

DitwanP commented Nov 19, 2024

List: Support keyboard dragging between different Lists #7537

List: Support keyboard dragging between different Lists #7537

Comments

Csmith246 commented Aug 16, 2023

Check existing issues

Description

Acceptance Criteria

Relevant Info

Which Component

Example Use Case

Priority impact

Calcite package

Esri team

geospatialem commented Aug 21, 2023

github-actions bot commented Oct 31, 2024

ashetland commented Oct 31, 2024 • edited Loading

driskull commented Oct 31, 2024

geospatialem commented Nov 6, 2024 • edited Loading

driskull commented Nov 6, 2024

geospatialem commented Nov 6, 2024

driskull commented Nov 6, 2024

github-actions bot commented Nov 15, 2024

geospatialem commented Nov 19, 2024

DitwanP commented Nov 19, 2024

ashetland commented Oct 31, 2024 •

edited

Loading

geospatialem commented Nov 6, 2024 •

edited

Loading