Top toolbar: adjust tab order

[ellatrix]

Description

This PR changes the tab order of the top toolbar. To test, enable the "Top toolbar" under "More tools & options".

The idea is to make tab order the same for the contextual toolbar and the top toolbar: when you press Shift+Tab from a block, first the block toolbar should receive focus and only then the settings, publish button and so on.

This may look a lot counter-intuitive because the block toolbar is left and appears visually before the publish buttons on the right side, but it could be thought of a separate column/area.

In addition to making it easier to access the block toolbar when "Top toolbar" is enabled, it will also allow us to unify the top toolbar, mobile, and contextual toolbar.

Would love feedback from accessibility experts.

How has this been tested?

Screenshots

Types of changes

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.
• I've updated all React Native files affected by any refactorings/renamings in this PR. .

[ellatrix]

Alternatively, and I don't know if this is possible with CSS, the publish button etc. could move after the block editor, but still display in its current block. Cc @jasmussen

[ellatrix]

I will try to create an alternative PR where the publish button etc. appears in the same area as the publish sidebar/region, and where it is still positioned above the block/document settings. That might be better than this PR.

[MarcoZehe]

Tab order follows the DOM order, not the CSS order. So, if it is clearly visible that the publish button and other items from the top toolbar are not part of the current block, but positioned higher up, the shift+tab order first to the items in the Block toolbar, and then further up makes sense. I don't know how this is aligned visually, though, especially when the block gets bigger (a long paragraph, for example). But intuitively, I'd say even when the top toolbar is activated, which I'd always associate with the entire post/page editing session, not the current block, this change makes sense.

[ellatrix]

I changed my mind on this. I think we should move these buttons to the publish region. See #19625.

[MarcoZehe]

@ellatrix and I discussed this on Slack, and I was concerned that the alternative approach from #19625 would feel like it getting in the way between the active block in editing mode and its side bar. This was one of the well-received changes from version 7.2.0, and the alternative PR felt like we were taking away that advantage again. Also, it is more logical in that both the stuff in the top toolbar that is always there, and the publishing and other options items, pertain to the whole document and thus make sense grouped together at the top. So the order would be across the top first, and then into the title and current block or the blocks (when in navigation mode), and into the side bar from the active block directly.

[MarcoZehe]

Approving these changes based on above comment.

[ellatrix]

Sounds good. #19427 will make the connection between the selected block and sidebar even better.

[gziolo]

Interesting approach, I wouldn’t think that you can tweak DOM order and change it back visually with CSS to make the experience better for keybord-only users 😃

I’m looking forward to the next plugin release to see how it plays out.

[ellatrix]

Yes, I'm curious. It's debatable whether this is ok visually, but the large gap between the two areas and the fact that it's almost split at the column boundary may make it ok.

[afercia]

Unfortunately, this change seriously broke accessibility on the desktop view, whether the "top toolbar" setting is enabled or not.

In the DOM order, the header "settings" and the header "toolbar" have been swapped.
However, visually they're in the same position as before because the CSS uses the flex property flex-direction: row-reverse;.

This is a serious WCAG failure as the visual order doesn't match the DOM order any longer.

Tabbing into the editor toolbar now sets focus on the Preview, Publish, Settings buttons as first elements, which are visually displayed on the right.

Keeping tabbing moves focus to the Add block, Undo, Redo, etc. buttons which are displayed on the left.

WordPress is in Beta 3 now and this is a serious accessibility regression that should be fixed for 5.4. Will create a Trac ticket.