Help/About: Try using ResizableBox for the image comparison

[ryelle]

This is another take on the image comparison UI in the About page. It uses the ResizeableBox from @wordpress/components for a draggable resize handle, which should be recognizable from the editor. It's much more obvious, and can be dragged from any point in the line:

This should work back to IE11, but if something happens and the JS can't load, it has a basic (static) presentation:

It still needs work for RTL

Trac ticket: https://core.trac.wordpress.org/ticket/52347

---

This Pull Request is for code review only. Please keep all other discussion in the Trac ticket. Do not merge this Pull Request. See GitHub Pull Requests for Code Review in the Core Handbook for more details.

[tikifez]

On one hand, the swiping is cool and demonstrates the color shift in a clearer fashion than two separate images would be. Particularly if you're looking at the change on a specific component like the shift in gray on the sidebar which might be lost in a side-by-side view.

On the other, the handle isn't selectable with the keyboard (and the target size is less than WCAG 2.1's success criterion 2.5.5, but that's another discussion). There should probably be alt text for the images as well.

I almost wish there was an alternate method for transitioning between the two, but I'm unaware of an existing one that would fit better.

I really want this approach to work because of how efficient the slider is -- if you can see the images clearly and manipulate the handle -- but maybe the suggestion made in slack to wrap the two images in a figure with a simple alt text would be better. Probably a good idea to add alt text to the images either way.

[Clorith]

Degrades to only a single static image of WP 5.7 when using IE 11 as described.

I did discover some issues in Microsoft Edge though (version 88.0.705.81), with lazy-loading and non-cached assets (these are not present in for example Chrome on Windows)

When loading the page with a non-cached set of images, the lazy load prevents the two images from loading at first, when you scroll, there's a quick layout shift as the image loads in and pushes the remaining content down, but the comparator control has already been initialized on the non-sized image, so there's nothing to compare except a nearly invisible thumbnail in the top corner.

The layout shift can be avoided by defining the width and height of the images, but that did not appear to have an impact on the strange controller behavior.

See behavior in example as well, if I refresh after the entire page has loaded the comparator works as expected though (this is with me having defined width and height, hence there not being a layout shift)

[ryelle]

The update I just pushed adds a caption & alt text to the images:

• [alt] Dashboard using old color scheme.
• [alt] Dashboard using new color scheme.
• [caption] Comparison of the Dashboard before and after the color update.

I really want this approach to work because of how efficient the slider is -- if you can see the images clearly and manipulate the handle -- but maybe the suggestion made in slack to wrap the two images in a figure with a simple alt text would be better.

Do you think this works now that it has the caption & alt text? So it has both the comparison handle, and caption/alt text? It won't really help a sighted user who uses a keyboard, but they can get the gist of it with the divider at least? (I'm not super thrilled about that, but I'm also trying to do this with the least amount of custom code, and it's just a quick demo)

[Clorith]

Ahh perfect, the figure wrap seems to have negated the strange controller-issue on Microsoft Edge as well

[ryelle]

Degrades to only a single static image of WP 5.7 when using IE 11 as described.

This actually should work on IE11, but apparently something's broken in IE11 for all Gutenberg things WordPress/gutenberg#28249. In any case, the fallback was missing the dividing border fallback, so I've added that and it should be more obvious that it's a static "comparison" of the two images now.

[ryelle]

Committed in r50478.