Accessibility enhancement request: Add an option to apply flexbox's 'row-reverse' declaration to the grid block

[Graphnic]

When building layouts with repeating rows (two columns with an image next to a heading and text for example), it's sometimes desirable to alternate which side the image appears, for aesthetic reasons (left, right, left, right etc). The problem with doing this manually is that it's also reflected in the code semantics, making similar structures appear different to assistive technology such as screen readers. This can be confusing depending on the circumstance.

I can overcome this by adding a custom class to the grid that applies the flexbox flex-direction: row-reverse; declaration. This visually flips the layout while maintaining consistent markup between rows, which resolves the inconsistency in the screenreader announcements.

Could this be considered as a toggle in the block settings? I believe Kadence blocks does something similar (at least from memory), and is an approach I use for custom blocks.

[diggeddy]

Maybe we should consider exposing the Order Field on Desktop ( currently limited to Tablet and Mobile views ). This would allow users to visually re-order grid items.

[Graphnic]

Maybe a solution. The key thing is the consistency in the markup. I think the added challenge with the order field (although more flexible) is that it, arguably, further abstracts the visual layout from the code.

Ultimately, this is one of those areas of a11y that the user needs to understand what the options they click mean for the markup, and what that in turn means for assistive technology... which is a tall order for many. On my custom blocks I just offer it as a toggle, but they are single-purpose blocks so the thinking has been done for the user already!

[JeanPaiva]

In version 1.7 we are adding flexbox controls and you will have that option for custom "grids" created with containers only. The grid block itself will be updated in the future to have these controls and will inherit from the container.