Implement reorderable layers by mouse

[barklund]

This completes the work in #51 by implementing mouse-reorderable layers.

Accessibility is tricky at the moment though.

There will not be keyboard-access to the reordering, so that's not the problem (it'll be a global reorder shortcut, that they'll use), but mouse users still need to be informed for the potential drop targets as well as the result of the reordering. I've currently added some speak() when dragging about potential drop targets, but not much more than that.

Suggestions?

[swissspidy]

Isn't this kind of reordering with indicators/separators what DropZoneProvider is for? Is it possible to re-use that one somehow / or why not?

As for speak(), that one seems to make more sense when using keyboard shortcuts and not when dragging using the mouse and seeing indicators/separators and the dragged element's clone.

[dvoytenko]

Isn't this kind of reordering with indicators/separators what DropZoneProvider is for? Is it possible to re-use that one somehow / or why not?

As we went through the UX review of this feature, there are some UX requirements that made native DND inapplicable. Specifically dragging only within the bounds/axis. I'm afraid that will also mean that we will have to revisit page carousel/grid once we are done with layers.

[barklund]

Isn't this kind of reordering with indicators/separators what DropZoneProvider is for? Is it possible to re-use that one somehow / or why not?

I couldn't see how this fit in with regular reordering. We don't want keyboard accessibility for it (we do that elsewhere) and we aren't actually dragging anything anywhere. This custom approach seemed much simpler to use here.

As for speak(), that one seems to make more sense when using keyboard shortcuts and not when dragging using the mouse and seeing indicators/separators and the dragged element's clone.

I have no idea if screen readers are only for keyboard users. I would assume there are mouse users who don't see well, so want to have things read out loud to them, but I have no idea. I'd gladly remove it again, as it was a bit weird.

[dvoytenko]

Couple of threads are still ongoing, but the PR itself is LGTM.

[swissspidy]

As we went through the UX review of this feature, there are some UX requirements that made native DND inapplicable. Specifically dragging only within the bounds/axis. I'm afraid that will also mean that we will have to revisit page carousel/grid once we are done with layers.

Thanks for clarification! I was not aware of that, so that's good to know.

[barklund]

This PR currently has two open issues, that I don't really know how to address:

1. Maybe sometimes in random situations, you cannot correctly drag layers. I haven't been able to reproduce, so can't fix it.
2. Do we want the speak() thing or not? It's a very partial solution as is (doesn't speak what you're about to do, doesn't speak about the result).

Open for thoughts here!

[swissspidy]

Let‘s defer speak() to later.

I‘ll try to reproduce the other thing