Media & Text block: Incorrect focus order in mobile viewport when "Show media on right" is enabled

[t-hamano]

What problem does this address?

The Media & Text block has an option to set the media to the right. Depending on whether the media is on the left or right, the order in which media and content are rendered changes as follows:

<!-- Show media on left -->
<div class="wp-block-media-text is-stacked-on-mobile">
	<figure class="wp-block-media-text__media">
		<a href="#"><img /></a>
	</figure>
	<div class="wp-block-media-text__content">Contents</div>
</div>

<!-- Show media on right -->
<div class="wp-block-media-text has-media-on-the-right is-stacked-on-mobile">
	<div class="wp-block-media-text__content">Contents</div>
	<figure class="wp-block-media-text__media">
		<a href="#"><img /></a>
	</figure>
</div>

Focus ordering works well in the desktop viewport when the Media and Text in the content have links. However, when vertically stacked in the mobile layout, the order is simply visually reversed via the CSS grid, so the focus order is incorrect as shown below.

https://github.com/WordPress/gutenberg/assets/54422211/c3106183-618f-4e3e-9ea1-c77eb09cd4ba

What is your proposed solution?

I don't know if this is possible, but I'm imagining the following approach using JS (Possibly interactivity API).

• Detect changes in browser viewport width
• Swap the order of media and content if the browser viewport width is less than the breakpoint of the Media & Text block and the "Show media on right" option is enabled.

If this can be achieved, I think it will also solve accessibility concerns that arise when an option to change the vertical stacking order is added in the mobile layout, as attempted in the PR below.

• #55763
• #56279

Additionally, while this block is very similar to the Column block, the advantage of the Media & Text block is that even if the media is to the right in the desktop layout, it can be displayed above the content in the mobile layout.

If the Columns block can be reverse stacked in the mobile layout with accessibility cleared, as attempted in #55763, this block might be deprecated as suggested in this discussion.

[t-hamano]

@luisherranz @SantosGuillamot I would appreciate any advice on whether it is possible to reorder elements within a block depending on the width of the screen's viewport using the current interactive API 🙇

[luisherranz]

It'd be possible to do a focus trap, but can't this be achieved with just CSS/HTML? Things like flex-direction: column-reverse; or tabindex?

[t-hamano]

Sorry for get in touch with you so late. Indeed, CSS and a focus trap may be able to solve the problem. However, I think we need to match the visual order and the actual DOM order, as mentioned in this comment.

In other words, I imagine it would be possible to dynamically change the order of the sources as shown below....

Desktop:

<!-- Show media on right -->
<div class="wp-block-media-text has-media-on-the-right is-stacked-on-mobile">
	<div class="wp-block-media-text__content">Contents</div>
	<figure class="wp-block-media-text__media">
		<a href="#"><img /></a>
	</figure>
</div>

Mobile:

<!-- Show media on right -->
<div class="wp-block-media-text has-media-on-the-right is-stacked-on-mobile">
	<figure class="wp-block-media-text__media">
		<a href="#"><img /></a>
	</figure>
	<div class="wp-block-media-text__content">Contents</div>
</div>

[SantosGuillamot]

It seems that this is a common issue with CSS and they are working on solving it: link 1 & link 2.

In the meantime, if we want to solve it with JS, I would say we don't have a directive to change the order. First thing that comes to my mind is duplicating the wp-block-media-text__content, one before the image and another one after. If we wrap it with something like wp-show we could show one in mobile and other in desktop.

However, it doesn't seem ideal. So I am not sure it is the correct approach.

cc @DAreRodz @c4rl0sbr4v0 as they might have more context and ideas.

[DAreRodz]

I think we can use some logic that detects whether the elements are stacked, and then modify the tabindex attribute for those elements through data-wp-bind directives. That way, there's no need to duplicate/rearrange/create/remove elements. 🤔

I guess it's what Luis proposed in https://github.com/WordPress/gutenberg/issues/58881#issuecomment-1936168655.

[t-hamano]

Thank you everyone for your advice. I checked the link mentioned in this comment. In the future, when all browsers support CSS like focus-order/reading-order, it might be an ideal approach to implement it with that CSS 🤔

[t-hamano]

It seems that there is a proposal to add a new CSS property, reading-flow: https://github.com/whatwg/html/pull/10613

If this CSS is implemented in browsers, it may solve this issue.

[t-hamano]

Update: Chrome 137 added support for reading-flow and reading-order. Firefox and Safari don't support this feature yet, but I hope that it will be supported by all browsers in the future.