Media & Text block - 'Show media on right' tab/focus order issue

[LukaszJaro]

Description

This is a user introduced accessibility issue to do with the tab order(left to right).

In certain scenarios, when using media-text block with either a video or image with link attribute and aligning the media to the right the DOM order does not match up with the visual reading order.

Breaks the following guideline: WCAG 2.0 - 2.4.3 Focus Order (Level A): If a Web page can be navigated sequentially and the navigation sequences affect meaning or operation, focusable components receive focus in an order that preserves meaning and operability.

I attached a image demonstrating the tabbing order on a right aligned media.

I'm not sure what other blocks use some form of grid/flex content re-ordering but it's something to be on the lookout for.

Here's some resources on the matter:

• https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility
• https://rachelandrew.co.uk/archives/2019/06/04/grid-content-re-ordering-and-accessibility/

May impact the following issues as well:

• https://github.com/WordPress/gutenberg/issues/13363
• https://github.com/WordPress/gutenberg/issues/26215
• https://github.com/WordPress/gutenberg/issues/16698

I used some basic JS to swap the dom order of the media and text which solved the issue on desktop but later realized on Mobile the tabbing order was incorrect again.

If anyone is interested I used chrome extension to show the tabbing order(would be another neat thing if Gutenberg had some sort of tab order check) https://accessibilityinsights.io/

Step-by-step reproduction instructions

1. Open insertor and select media-text block
2. Add text content and add video or image with link
3. Align media to right(show media on right)
4. Publish and view tab order on front-end

Expected: Tab focus order should read left to right. Result: Tab order is right to left.

Screenshots, screen recording, code snippet

Environment info

Latest Gutenberg version on any browser

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

[carolinan]

I believe that since we want to avoid JavaScript on the front, the markup of the block needs to change. We can change the order of the markup depending on the image position in the edit and save, but in my test, I was not able to make it backwards compatible through deprecation...

[kraftner]

Please do not deprecate the block. It is very helpful to have a different block that has an intentionally very limited scope in contrast to the endless possibilities of a construct of nested other blocks.

At least not until there are ways to create something that enforces the various constraints this block offers like:

• only 2 columns
• one has to be media
• control stacking behavior on mobile

So basically right now this would break existing content and remove functionality without a replacement apart from shipping and maintaining a custom fork of the block.

[t-hamano]

This issue was discussed again in this comment. I think the focus problem when stacked in mobile layout is still not resolved, so I will reopen it again.