Workday / canvas-kit

Development kits to implement UI following the Workday Canvas Design System (https://canvas.workday.com/). See our Component Storybook -
https://workday.github.io/canvas-kit/
Apache License 2.0
301 stars 221 forks source link

Add removal support to the Collection System #3025

Closed NicholasBoll closed 2 weeks ago

NicholasBoll commented 2 weeks ago

🚀 Feature Proposal

Add a elemProps hook for deleting an item from a list that is compatible with the Collection system. Focus management should be handled by the hook. I couldn't find a specification for the focus management that I could point to. The Tabs pattern example covers some specifications:

Delete (Optional): If deletion is allowed, deletes (closes) the current tab element and its associated tab panel, sets focus on the tab following the tab that was closed, and optionally activates the newly focused tab. If there is not a tab that followed the tab that was deleted, e.g., the deleted tab was the right-most tab in a left-to-right horizontal tab list, sets focus on and optionally activates the tab that preceded the deleted tab. If the application allows all tabs to be deleted, and the user deletes the last remaining tab in the tab list, the application moves focus to another element that provides a logical work flow. As an alternative to Delete, or in addition to supporting Delete, the delete function is available in a context menu.

Other examples have the same focus management: https://www.w3.org/WAI/ARIA/apg/patterns/listbox/examples/listbox-rearrangeable/

Motivation

We have a Tabs example that allows removal of tabs. We've received requests and questions around removing items from a list. We need to do this on MultiSelect. The focus management can be difficult to do correctly in user-land. It makes sense to cover this functionality in Canvas Kit via a hook.