1942107 - Support reordering moz-box-items in moz-box-group

Status: NEW

(Toolkit :: UI Widgets, enhancement)

Description

[Mark Striemer [:mstriemer]]

In the settings redesign we will need to be able to reorder some moz-box-items. We may need to file more fine-grained bugs to break this down more.

When a moz-box-group is reorderable all of its moz-box-item children should have a "grabber" at the start of the item to allow dragging and dropping the item.

In some cases only some of the items of a list will be reorderable. This could potentially be another bug.

Special care will be needed for keyboard a11y, and the implementation should be discussed with the a11y team. Some options include (but are not limited to): 1) pressing space/enter on the grabber enables up/down arrow reordering 2) pressing space/enter on the grabber opens a menu with move up/down/top/bottom options. This could potentially be another bug.

https://www.figma.com/design/2b02v18AppIpsTceWac2T3/Settings-Desktop?node-id=2947-98504&m=dev

Comment 1

[Hanna Jones [:hjones]]

There's some prior art for creating a reusable reorderable element that Julian was working on a while back. The WIP patch can be found here. We may want to revive that patch as part of the work on this bug. If it adds too much scope we could also file a separate bug for creating a reorderable component/reusable solution that we can then put to use to achieve moz-box-item reorderability.

Another thing to note - only moz-box-items should be reorderable. We don't need to reorder moz-box-buttons or moz-box-links.