Allow reordering in page carousel

[barklund]

Feature description

Allow pages in carousel to receive focus if clicked (as well as switch current page on the canvas above) and reordering if dragged.

Pages need not be focused first in order to be dragged.

There are some open issues around keyboard navigation (changing focus only or changing page as well) and similarly for keyboard-only reordering (maybe shift-arrow to move a page to the right or left in the order?).

This does not include page grid view or page grid view button.

---

Do not alter or remove anything below. The following sections will be managed by moderators only.

Acceptance criteria

NB: Focusing will be handled separately, ignore the following focus-related points!

1. Page outlines in carousel can be focused by clicking on them
   1a. This will of course still also change current page to the clicked one
   1b. Clicking anywhere else on the page removes focus from pages
2. Page not in focus, 25% opacity
3. Page currently in focus, 100% opacity
4. Drag page thumbnails to reorder pages
5. Focus can be manipulated with arrow keys or (shift +) tab.
6. The focused page can be opened (if not already open) with enter and/or deleted by pressing del or backspace.

Implementation brief

• NB: use tabindex and :focus for focus for accessibility and ease of implementation.

• Create a new DropZone component which will be used to wrap the element that needs dropzone.

• The DropZone implementation will have a placeholder for files drop as well but only implement general onDrop functionality

• Each Page icon below the Pages () will be wrapped into DropZone which will then decide where should the Page be dropped.

• Determine approach and UX for reordering with keyboard (dependent on Implement keyboard and focus management ampproject/amp-wp#3897).

QA testing instructions

Demo

Changelog entry

[barklund]

Focus work is partially done in ampproject/amp-wp#3826 and is dependent on that ticket.

[miina]

@barklund @dvoytenko @spacedmonkey @swissspidy

Added a short implementation brief, this does not have a PoC yet but will start creating it now and move this issue to In Progress if there are no objections to the general approach (creating a generally usable DropZone component which can later also used for dropping Media directly into Page (#3846) and anywhere else necessary ).

[spacedmonkey]

As mentioned in last meeting, PoC should be simple and not be final code. Is it required here, IB seem pretty simple as it is reimplementing existing functionality

[miina]

@barklund I'm actually thinking now that since ampproject/amp-wp#3897 is already handling the focus then it makes sense not to block this issue and just implement the missing part here (reordering via carousel). Thoughts?