Fix: Move the "View Posts..." anchor out of the role=toolbar section in the header

[gziolo]

Description

Partially fixes #15331.

Screenshot from full report:

Keyboard-only users who enter the Editor Top Bar must Tab from button to
button. Although this is manageable when there's a small number of
buttons, the group of buttons is given the role of toolbar, whose
purpose (besides grouping related controls) is to lessen the number of
Tab stops keyboard users must make to navigate past widgets.

This PR follows the recommendation:

Move the "View Posts..." anchor out of the role=toolbar section,
so the toolbar only has <button> children.

Testing

Enabled Fullscreen Mode through More Menu item. Ensure that the header looks like before and View Posts anchor is outside of the toolbar.

Screenshots

Checklist:

• My code is tested.
• My code follows the WordPress code style.
• My code follows the accessibility standards.
• My code has proper inline documentation.
• I've included developer documentation if appropriate.

[gziolo]

@kjellr or @jasmussen - I don't know if this is the best idea to wrap them with div but I took as little steps as possible to make it look close to what we had before. I would love to hear your recommendations because I also noticed that the border is slightly broken now:

[jasmussen]

Yep was about to note the same. There's a height difference to the toolbar. Even outside of fullscreen. This branch:

Master:

Let me take a look.

[jasmussen]

It looks like if this particular div is assigned display: flex;, and .edit-post-fullscreen-mode-close__toolbar is also assigned display: flex; (instead of inline-block as it is now), both issues are fixed:

I could use a sanity check by Kjell though.

[kjellr]

It looks like if this particular div is assigned display: flex;, and .edit-post-fullscreen-mode-close__toolbar is also assigned display: flex; (instead of inline-block as it is now), both issues are fixed:

Yep, that fixes it for me too. 👍

[gziolo]

I applied changes as recommended by @jasmussen and @kjellr, many thanks for your help 🙇

It seems like UI wise everything looks exactly the same now:

Branch:

Master:

Well, there might be a slight difference in the left margin of the inserter. It's hard to confirm 😅

[jasmussen]

Nice work. Be sure to test all mobile breakpoints, and Firefox and Safari. Otherwise, 👍👍

[gziolo]

It seems to work the same on Firefox, Safar. At mobile breakpoints, there is no Fullscreen Mode so nothing to test there, well I did it, it just works :)

One more check and I think it confirms it works the same as in master.

Branch:

Master:

[kjellr]

Tested in Safari, Chrome, + FF, across a wide range of screen widths. Looks great to me!