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

Status: RESOLVED FIXED

(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.

Comment 2

[Hanna Jones [:hjones]]

Hey :julian and :jules y'all mentioned a while back that the designs for this might change based on some Fable user testing, I think related to maybe having buttons or context menu items instead of or in addition to the "grabber". Is that still the case? Also I think we would need mockups for how the list should look when it's being reordered if we don't have those already. Some specific questions that come to mind:

• how do we visually indicate where an item is going to be dropped/inserted into the list? iirc Julian's WIP patch had some kind of blue line/marker
• do we expect any color changes or outlines for the items where the new element is being dropped (I'm picturing how tab groups work)?
• is the grabber a button? what should it look like in different states hovered, active, etc.?

Comment 3

[Hanna Jones [:hjones]]

Marking this as dependent on bug 1956853 as I expect we'll want to have the basic list structure in place before we start modifying/extending it for the reorderable group (e.g. switching from ul to ol or changing roles, adding aria-posinset, etc).

Comment 4

[Jules Simplicio [:jules]]

Clearing the ni? since we met about this today and I believe you took notes :)

Comment 5

[Hanna Jones [:hjones]]

Met with Jules and Julian about some of the questions above. Here's an approximate implementation plan:

• Julian is going to rebase/update their WIP patch, which this work will then be based on. Tentatively marking this bug as blocked on bug 1828933. That should provide the basic reorderable functionality, but we may need to adjust it to fit this use case.
  • the work for bug 1828933 will include a blue line that visually indicates where the item will be dropped. This will be enough of an indicator to start (we can maybe add fancy animations later)
• This bug will just encompass adding a reorderable property to the moz-box-list. We will need to use moz-reorderable-list under the hood when that property is set.
  • We may need to figure out how to make only part of the element in the moz-reorderable-list draggable as we only want users to be able to grab the :: indicator
  • the :: indicator is not a button. The cursor should change to the hand when it's hovered

We will also need to add an action button to each reorderable item that will surface a context menu that provides options to move items up or down by one in order to provide an alternative method of reordering. These options should also be present in the context menu if the user right clicks anywhere on the list item. I think this is enough of a lift that we can do this as a separate bug, along with ensureing the proper accessibility properties.

Comment 6

[Hanna Jones [:hjones]]

Attachment: Bug 1942107 - Part 1: format test_moz_reorderable_list.html r=#recomp-reviewers

Comment 7

[Hanna Jones [:hjones]]

Attachment: Bug 1942107 - Part 2: cleanup focusableSelector references r=#recomp-reviewers

Comment 8

[Hanna Jones [:hjones]]

Attachment: Bug 1942107 - Part 3: make moz-reorderable-list work better with shadow DOM r=julian,#recomp-reviewers

Comment 9

[Hanna Jones [:hjones]]

Attachment: Bug 1942107 - Part 4: add support for a dragSelector to moz-reorderable-list r=julian,#recomp-reviewers

Comment 10

[Hanna Jones [:hjones]]

Attachment: Bug 1942107 - Part 5: add support for making moz-box-group reorderable r=#recomp-reviewers

Comment 11

[Hanna Jones [:hjones]]

Attachment: Bug 1942107 - Part 6: provide more useful drag images for custom elements on about: pages r=#recomp-reviewers

Comment 12

[Pulsebot]

Pushed by [e-mail]:
https://github.com/mozilla-firefox/firefox/commit/5900a6e9d64c
https://hg.mozilla.org/integration/autoland/rev/03f757834bdf
Part 1: format test_moz_reorderable_list.html r=reusable-components-reviewers,mkennedy
https://github.com/mozilla-firefox/firefox/commit/e4ea70a159ec
https://hg.mozilla.org/integration/autoland/rev/79f26466f0f9
Part 2: cleanup focusableSelector references r=reusable-components-reviewers,mkennedy
https://github.com/mozilla-firefox/firefox/commit/97f7e250d58e
https://hg.mozilla.org/integration/autoland/rev/3cf052a42262
Part 3: make moz-reorderable-list work better with shadow DOM r=reusable-components-reviewers,akulyk
https://github.com/mozilla-firefox/firefox/commit/d6f4d6b9e91b
https://hg.mozilla.org/integration/autoland/rev/b71c70728ad4
Part 4: add support for a dragSelector to moz-reorderable-list r=reusable-components-reviewers,akulyk
https://github.com/mozilla-firefox/firefox/commit/5151f623db6a
https://hg.mozilla.org/integration/autoland/rev/fd29aab774b3
Part 5: add support for making moz-box-group reorderable r=reusable-components-reviewers,desktop-theme-reviewers,akulyk
https://github.com/mozilla-firefox/firefox/commit/5654a9a22103
https://hg.mozilla.org/integration/autoland/rev/0c59d736be0b
Part 6: provide more useful drag images for custom elements on about: pages r=reusable-components-reviewers,akulyk

Comment 13

[amarc]

https://hg.mozilla.org/mozilla-central/rev/03f757834bdf
https://hg.mozilla.org/mozilla-central/rev/79f26466f0f9
https://hg.mozilla.org/mozilla-central/rev/3cf052a42262
https://hg.mozilla.org/mozilla-central/rev/b71c70728ad4
https://hg.mozilla.org/mozilla-central/rev/fd29aab774b3
https://hg.mozilla.org/mozilla-central/rev/0c59d736be0b