Gutenberg: Sibling Inserter: "Add block" icon is accessible by keyboard but cannot be seen

[designsimply]

Steps to reproduce:

1. Create a new post and a few paragraph blocks.
2. Place the cursor into one of the paragraph blocks.
3. Press Shift+Tab until the "Add block" icon gets focus.

Result: I expected to see the "Add block" icon visually if I navigate to it from a paragraph block using the keyboard, but instead it is stuck behind the block toolbar. (20s)

^{Seen at http://alittletestblog.com/wp-admin/post.php?post=15423&action=edit&revision=15425 running WordPress 4.9.8 and Gutenberg 4.2.0-rc.1 using Firefox 63.0 on macOS 10.13.6.}

[afercia]

For reference, this is how it worked on Gutenberg 3.5 (the toolbar used to be shorter, without the "More" button):

And this is on Gutenberg 4.0: it was partially visible:

[LukePettway]

I can take a look at this today if no one has done so already

[LukePettway]

This may need design feedback now that the more button has been added to the toolbar. The Insert Block button overlaps it when it is focused.

[afercia]

Yep and there are a few more considerations that make this issue a bit more serious than it appeared at first sight:

1
Also when tabbing forwards (and the toolbar is not fully expanded yet), the button doesn't appear: only its tooltip is displayed:

2
When the block is selected, even when using the mouse the button is completely hidden behind the toolbar and can't be clicked:

3
When the inserter opens and then closes, focus must be moved back to the invoking context (the button). However, the button disappears so there's no place where the inserter popover can move focus back to. This produces a focus loss which needs to be avoided at all costs.

I'd kindly ask to give this issue some higher priority, as it appears to be not just a visual glitch.

[LukePettway]

Good catch. I'll play around with it more and see what I can find out. My guess is something else broke with the addition of that new menu. Maybe I can at least get it working consistently then it'll just be a matter of a new ux placement for it.

[chrisvanpatten]

I think this was fixed by #11685?

[LukePettway]

@chrisvanpatten Yep this appears to be fixed already.

[chrisvanpatten]

Great! I'll close this and if there's a regression or a browser compat issue or something else that pops up, we can reopen :)

[afercia]

The inserter button now appears but it's still hardly usable, as it's behind the toolbar 🙂 Testing before closing an issue may help.

[chrisvanpatten]

I’m sorry I interpreted Luke’s comment as confirmation the issue was fixed. Luckily with GitHub it’s painless and not a problem at all to reopen an issue even if a mistake is made.

[LukePettway]

@afercia @chrisvanpatten My apologies as well, I didn't realize that the fix only applied to blocks with shorter toolbars at the top!

[timwright12]

We're still waiting on design feedback for this, right? The only semi-obvious solution that jumps out at me would be to hide the toolbar with the "add block" button is focused

[mapk]

If we change the z-index on the sibling inserter, we can get it to appear above the toolbar. I'm not fond of this solution and still trying to think through it.

[kjellr]

If we change the z-index on the sibling inserter, we can get it to appear above the toolbar. I'm not fond of this solution and still trying to think through it.

Yeah, I agree — this works, but it is less than ideal. I'm going to change this to Needs Design for now, while we're sorting out the best solution.

[afercia]

while we're sorting out the best solution.

I'd just like to kindly note this issue is waiting for a solution since 7 months.

The root cause is that this button was originally placed after the block (no problems there) and then moved _before_.

Its placement is not ideal for usability and accessibility as well. As a user, when I tab into a block I'd like to get to the content area as soon as possible. Instead, the first thing in the source order within the block is this "Add block" button which doesn't make much sense from a work flow perspective. Not to mention that for keyboard and screen reader users, it doesn't really make sense.

[mapk]

The root cause is that this button was originally placed after the block (no problems there) and then moved before.

I'm in favor of exploring a solution that moves this below the block. We just need to be weary about how and when this inserter icon appears. I've run into times when it covers a toolbar link that I'm trying to get to as well.

[ZebulanStanphill]

I made #13571, which suggests an overhaul to the sibling inserter that would fix this issue.

[enriquesanchez]

I believe this was fixed in #19596:

The sibling inserter is no longer blocked by the toolbar.