Ensure inline adding of blocks can be tabbed to

[brynwhyman]

Overview

It is currently not possible to tab to the function to add blocks inline. This is important as the current drag and drop library doesn't allow for reordering with keyboard actions.

Feature in discussion:

Split from #455 so this gets more visibility.

Acceptance Criteria

• A user is able to add new blocks inline, with keyboard actions

Note

• Design prototypes would be implemented in Easier findability of the functionality to add blocks between other blocks #704

Pull requests

• Make the HoverBar more visible #724

[clarkepaul]

My recommendation here is to show the add block action before and after each block if a block is hovered (maybe in the middle of the block rather than on the far right?). This means the user doesn't need to hover between the blocks to see the actions. We can also improve the look and feel of the transition (remove the light grey in-between faded look). A design will be required prior to this one being implemented.

[brynwhyman]

Before looking at this issue, we plan to investigate #455

[newleeland]

My recommendation here is to show the add block action before and after each block if a block is hovered (maybe in the middle of the block rather than on the far right?). This means the user doesn't need to hover between the blocks to see the actions. We can also improve the look and feel of the transition (remove the light grey in-between faded look). A design will be required prior to this one being implemented.

I've made two interactive prototypes to illustrate this
https://codepen.io/newleeland/pen/ormVYx

Prototype 1: Line design.

• Bigger cursor hitbox
• Smaller hover delay
• High contrast line

Prototype 2:

• Add block buttons always on
• However, can be less obvious this is adding a block

[clarkepaul]

I think we should probably separate the design improvements to the tabbing issue. Opened a different issue to cover them here #704

[robbieaverill]

Nice @maxime-rainville