Add toggle to reverse column order on mobile #40967
Conversation
kmonahan
requested review from
ajitbohra,
ryanwelcher and
juanmaguitar
as code owners
github-actions
bot
added
the
First-time Contributor
|
👋 Thanks for your first Pull Request and for helping build the future of Gutenberg and WordPress, @kmonahan! In case you missed it, we'd love to have you join us in our Slack community, where we hold regularly weekly meetings open to anyone to coordinate with each other. If you want to learn more about WordPress development in general, check out the Core Handbook full of helpful information. |
|
I added the |
https://rachelandrew.co.uk/archives/2019/06/04/grid-content-re-ordering-and-accessibility/ Rachel Andrew addresses this as well - its an interesting issue as CSS based row re-ordering is very useful and is featured in most 3rd party block sets, but doesn't account for a11y. Unsure how devs would want to approach it. |
I agree accessibility is important, however does anyone actually tab through content on mobile? I assume the majority of users scroll on mobile devices. I even tried multiple google searches on how to tab on mobile devices and I keep getting results on how to open multiple tabs. I think the value this feature offers to allow content editors to reverse the column stack on mobile is very much needed and this solution looks like a good one. |
|
Perhaps we could look at this from mobile-first perspective, instead of changing order on mobile, change it on wide screensizes. Another idea is to make this feature optional and let the developers decide whether order is an issue for a11y. |
|
I'd think it would definitely be beneficial to offer this as it's such a common thing for websites to want/need (creating staggered content/layout [or similar] on a desktop design to find it then stacks/collapses oddly on mobile where reversing the order of the column group on mobile addresses the issue) as already established here. With this missing, people are then left to find a different plugin that either provides a block that adds this or they need to add an entire block/pattern/enhancement/editor-overhaul plugin that really does more than what's needed to the editor just to get this one feature. Importantly, this feature missing here doesn't make it so people aren't doing it... it just makes it so people need to make a potentially less-than-ideal setup (per adding potential bloat & unused aspects of the plugin they chose to add this, as mentioned) to accommodate what they want while they still just go ahead and do it. Why would we want to remove the choice and force people to then look elsewhere for a less-than-ideal option that they proceed with anyway? As such, I think this should ideally still be implemented (a simple option on the Columns block to reverse the column order on mobile) and simply have a note mentioning that accessibility may be affected by changing it from the default via descriptive text that's accompanying the Columns block's new setting field for this. This could/would be similar to how Gravity Forms has the option for hiding the form field label (it lets you do what one will end up doing anyway [then via a better, official, method] while then just showing a notice if/when that setting is set to something that the site's accessibility may be affected.) Here's a screenshot of that example: View Screenshot Again, people are already doing this, but they're doing so in a way that would be made much nicer if it was included here as standard while we then can make them aware of the accessibility implications if/when they change it from the default column order (something many of those other plugins that add this fail to mention so it's doubly-nice to do it this way.) At that point, one can only hope that screen readers & other accessibility tools eventually (if not already) become intelligent enough to abide by custom/reverse column ordering per the page's CSS so that the DOM order differing from the visual order no longer has a real-world impact. It does seem like the happy medium is to add this simple option while then informing the person choosing that about the accessibility impact it might have. Sites are then able to be kept simpler & lightweight (no need to add another plugin to make it so this is possible [or, heaven forbid, need to manage this for the various columns manually via the theme's CSS] with this one new setting being reasonably lightweight), sites that need / care about accessibility don't accidentally break their accessibility, etc. FYI, this (being able to reverse/change column ordering) is also being discussed at Automattic/block-experiments#211 when it comes to the Layout Grid block in the Automattic Block Experiments plugins (with that potentially becoming more advanced with a drag & drop for individual column ordering while this is probably better off being the more straightforward reverse order option [keeing it way more simple to use & manage while meeting most needs.]) |
|
Thank you for writing this, @kmonahan :) It looks like this PR is no longer compatible with the current branch. Personally, I would love to see this feature added to the Columns block but, if we are not planning to do it, we should close it. What do you think @ryanwelcher? Thank you all! |
Yes. A few of the resources that explain a need or preference for a physical keyboard with a mobile device include:
Also, when desktop users zoom in, they can get the 'mobile' view. |
|
Not sure if this is a bit out if the box but, in most scenarios the client decides in the end. There are often good reasons why a certain column needs to be above another in mobile, usual incentives are monetary or marketing. |
|
Would it be less of a problem if it was "Reverse order on Desktop"? Then the mobile order would always be correct. On Desktop, the content is at least at the same height and visible on one screen, so the difference between DOM order and visual order is less drastic. |
I think this is not bad for a short term solution. On the other hand, there is a lot to be said about discerning between mobile and desktop while working in the editor. I think it is better to refer to breakpoints, because tablet views are usually the ones that need a lot of custom css to work properly in my projects. Also, there are many more cases where a mobile only (or desktop) setting would be necessary. For instance the collapsing breakpoints of columns in a grid for finer control on tablet views. I think we need a global interface solution in the editor where breakpoints come in play, so that more block settings can opt in and benefit from it. It would be neat if we could split theme.json values in breakpoints (to generate media queried css variables). I’d even go with extra sets of theme.json (same as we now have multiple for styles), that only load on specified breakpoints that override current theme.json. But that will only add to complexity, and the question still remains; how does this fit in the current UI. |
People with visual impairments use screen-readers on mobile, and those work by "tabbing". |
Just to add some context many may not know that users do use keyboard with mobile devices. Considering only screen reader users, according to the WebAIM Screen Reader User Survey #7 from October 2017, about 40% of screen reader users do use an external keyboard connected to their mobile devices form "sometimes" to "always". Reference: For the complete list of the WebAIM Screen Reader User Surveys, see: |
What?
Adds a toggle to reverse the column stacking order on mobile, so that the rightmost column will be listed first instead of the leftmost column.
Why?
Addresses #40706. The example use case given there is for alternating/zig-zag content on desktop where the stacking order on mobile makes more sense if alternate columns stack in reverse order.
How?
Adds a new attribute, reverseMobileStackingOrder, a toggle to set that value if stack columns on mobile is also selected, and adds a class, .is-reversed-on-mobile, that applies only if both isStackedOnMobile and reverseMobileStackingOrder are true.
Testing Instructions
Expected outcome: in both the editor and the front-end page, on mobile widths when the columns stack, the right column should appear above the left one.