Improve the sibling inserter UI and feedback for users

[afercia]

Breaking this down from Eric Wright (@ewaccess) testing session with Dragon NaturallySpeaking (speech recognition software). Please refer to the video-recorded session posted here:
https://make.wordpress.org/accessibility/2018/03/28/accessibility-of-gutenberg-the-state-of-play/

min. 6:40

not really sure what the horizontal separators between the blocks are

Users of speech recognition software need to know what the name of an UI control is to be able to voice commands. The "sibling inserter" (the "line" that shows up between blocks) is a button and it's correctly labeled with aria-label="Insert block". However, this label is not apparent to users, no tooltip appears and there's no way to understand what the name of this control is.

This is how it looks on hover:

And this is how it looks on focus:

I'm not sure what the plans for this inserter are, but I'd say there's room for improvements. Apart from the fact it's partially hidden by other elements of the UI, I'd say also mouse users wouldn't have any clue what this UI control is meant for other than "trying to click on it and see what happens".

Ideally, any UI control should have a visible label, or at least a tooltip. I'd propose to consider to redesign this inserter in a way that it shows a visible label ("Insert block"). Also, it shouldn't get partially hidden by other UI elements. I'm afraid this part of the UI has become a bit cluttered over time and maybe needs some rethinking.

[ZebulanStanphill]

I agree that the sibling inserter is not really that intuitive.

When you first hover over the area where it is, your cursor changes, but you do not know why, because you cannot see anything. If you are just moving your mouse quickly, the inserter never appears. In fact, if you click on the seemingly blank area, you end up creating a new block and wondering how you created a new block, because you never noticed your cursor change and the visual bar had not yet appeared.

Even when the visual bar does appear, it does not make it clear that it is intended to insert a block there. There is no "+" icon like there is for pretty much every other block inserter.

I think the sibling inserter could be greatly improved by making it appear quicker (or just get rid of the animation and make it instant) and by adding either a "+" icon or some tooltip or other visual indicator that the bar is used for inserting a block there.

[afercia]

Also, see below the clickable area of the sibling inserter:

• in red: the clickable area
• the heading is focused ("selected")
• the paragraph is hovered
• in both cases, other elements of the UI overlay and reduce the actual clickable area

[aduth]

Related: #5396

[afercia]

For reference, see the previous implementation below: it exposed the accessible name of the control via a tooltip (always visible text would be better though):

[jorgefilipecosta]

I think with the iterations on the sibling inserter, this issue may have been solved.

[afercia]

Yep, I'd agree. The recent iterations improved a lot this UI control. When tabbing, the sibling inserter now displays its name in its tooltip. Although not 100% ideal because the inserter appears only on hover/focus, at least there's now a way for users to know what the name of the control is.