Make the HoverBar more visible

[maxime-rainville]

I've re factored the HoverBar to remove all the timeout logic. I've added a HoverBar at the start of the Elemental area as well. I made the HoverBar focusable and I added an aria label for accessibility.

Parent issues

• Easier findability of the functionality to add blocks between other blocks #704
• Ensure inline adding of blocks can be tabbed to #627

[maxime-rainville]

Need to fix some IE issue.

[maxime-rainville]

IE is happy. Ready for review.

[maxime-rainville]

I use the same label as the AddNewButton. We might want to add something more contextual like "Insert block".

[maxime-rainville]

https://youtu.be/hBRMkuMR0cM

[robbieaverill]

Nice work! Looks great. I've left a couple code related suggestions, and I have one qualm with the UI - the plus sign isn't aligned with the middle of the bar correctly. Tested on Mac with Chrome.

[bergice]

LGTM, but I do think the fade in should be 100ms instead of 200ms. For someone who moves their mouse around quickly, they may never notice the hover bar at all.

[maxime-rainville]

I've centred the (+) icon.

[maxime-rainville]

LGTM, but I do think the fade in should be 100ms instead of 200ms. For someone who moves their mouse around quickly, they may never notice the hover bar at all.

The original version had a much longer delay. I think the point of the delay is to avoid having the hover bar pop up everywhere has you move your mouse across the elemental area.

It's a compromise between making the feature easy to discover and having this bar jumping at you all the time. If we make the delay so small that it's absolutely impossible to miss it, then we'll probably end up having this aggressive blue bar irritatingly popping everywhere.

[robbieaverill]

A structural suggestion for your consideration

[robbieaverill]

If we're being picky, there's probably a pixel or so still needing to be moved in the alignment:

[maxime-rainville]

I've added one pixel. It seems to make things a little bit better in chrome and a little bit worst in Firefox.

[robbieaverill]

I like it, just confirming with Jared

[robbieaverill]

One quirk in IE11, when you tab into it and press enter it opens the new block dialog and flashes briefly (might be a reload of something), then the focus is lost and when you close the dialog (esc key) you continue to tab from the top of the screen again. Might be a separate issue, but worth mentioning.

[maxime-rainville]

So when you escape the popover in IE11, you would want the focus to be on the same hover bar?

[robbieaverill]

Yeah correct, this is how Chrome behaves for me

[maxime-rainville]

Firefox acts more or less the same as a Chrome.

Interestingly, the popover on the green "add block" button seems to return the focus to the start of the page in all browsers. We might need to add an onEscape handler a to the AddElementPopoverComponent that controls where the focus goes when you hit the escape key.

[robbieaverill]

Ok I'll raise another issue to track this - you should be able to spam enter then esc to toggle repeatedly