silverstripe-elemental: SPIKE: Keyboard accessible reordering of blocks

Sorry, I wasn’t trying to suggest that it would be simple, but rather that we should weigh up the effort versus reward. Here’s where I see the options for this issue now:

Option 1: replace react-dnd with react-beautiful-dnd

React with 🎉 to vote for option 1

Pros:

• It has better support for accessibility/screen readers/keyboards
• We aren’t implementing too much of our own custom accessibility code

Cons:

• An amount of work will be required to switch the library, regression test the drag and drop features, and ensure that the new library provides the support we need for accessibility

Option 2: keep react-dnd and implement out own keyboard accessibility events

React with ❤️ to vote for option 2

Pros:

• Lower impact to the existing code, since we aren’t switching libraries
• Potentially faster

Cons:

• Potentially introducing more maintenance burden by writing our own keyboard handling events for drag and drop
• It may end up being more work than replacing the library with react-beautiful-dnd

Option 3: add new options to the more actions menu to move elements

React with 🚀 to vote for option 3

Example:

Pros:

• Easy and fast to implement
• Low impact to existing code

Cons:

• Probably doesn’t match the UX designs
• Adds a little more bloat to the more actions menu

Option 4: add tab key accessible “up” and “down” options in the blue “add new element” bar somewhere on the element header

React with 👀 to vote for option 4

Example:

(Except use icons instead of text)

Pros:

• Same as option 3
• Doesn’t bloat the more actions menu like option 3 would
• SilverStripe Product UX team suggested it

Cons:

• Same as option 3 (minus the menu bloat)

---

@silverstripe/creative-commoners please vote on this so we can agree on the way forward, and then close this spike =) cc @silverstripeux

My suggestion would be to make an area near the drag icon tab-able with the arrow icon actions to move the item up or down. The drag handle would help to provide context as to what the actions do. The options dropdown is going to get overloaded with more actions soon or through a project’s development (duplicate, move, other tabs).

I voted ❤️ 🚀 and 👀 . I think that ❤️ is a bit of a pipe-dream but I like the idea of doing both 🚀 and 👀 . I even think 🚀 will be minimal effort.

Don’t think this requires designs, react-beautiful-dnd seems to have built-in drag-n drop for screen readers. https://github.com/atlassian/react-beautiful-dnd/blob/master/docs/guides/screen-reader.md