This is split off from #3190262-22: [META] Assess Olivero for WCAG Resize Text and Reflow success criteria..
from @bnjmnm
I'd like there to be a followup issue filed for the specific scenario of the preview images next to content titles pushing the title into forcing a horizontal scroll.
I'd like this to get its own as because
- It is a far more likely scenario to occur as it's not dependent on unusually long words, just having a longer-than-average word. Taking care of this would get the non-reflow causing word length into the less-commonly-used section of the distribution curve
It appears that even in languages with a higher char distribution than English, the additional space allotted by addressing this changes it from a fairly likely event to more of an edge case. - This also seems like something reasonably easy to address, perhaps by stacking or hiding the image
While it's certainly possible that there are additional scenarios that weren't caught during this evaluation, the review was comprehensive enough + the results good enough to consider 1.4.12 Text spacing sufficiently assessed and issues filed as needed. Once that targeted followup is created, I can consider this fixed.
Comment | File | Size | Author |
---|---|---|---|
#8 | teaser-wrap-2.gif | 5.16 MB | mherchel |
#7 | interdiff-6_7.txt | 1.36 KB | Gauravvvv |
#7 | 3229094-7.patch | 2.78 KB | Gauravvvv |
#6 | interdiff-3229094-3-5.txt | 1012 bytes | rikki_iki |
#6 | 3229094-5.patch | 2.71 KB | rikki_iki |
Comments
Comment #2
mherchelThis is straightforward to fix. Movie showing the fix is attached.
Note that this patch ensures this only happens when the image is present (we don't want to limit the width if the title if the image isn't present).
Tugboat preview to test this on is https://3229094-teaser-wrap-mzhdfnl5gcrurhq8owbxwhqw3is2iclf.tugboat.qa/
Comment #3
mherchelI guess the patch would be helpful for the review...
Comment #4
mherchelComment #5
rikki_iki CreditAttribution: rikki_iki at PreviousNext commentedNice solution.
My only comment is there's no gap below the image, so the folded text sits up against it (evident in the vid from #1) - not sure if this really needs addressing, but moving the bottom margin from
.node__top-wrapper
to both children would easily address it.Comment #6
rikki_iki CreditAttribution: rikki_iki at PreviousNext commentedPatch to add moving the bottom margin to children. Otherwise same as #3 (interdiff of just pcss file)
There's a bit of space left to the right of the title after it folds (see screenshot)... not sure if it's worth addressing. It only really occurs under 300px
Comment #7
Gauravvvv CreditAttribution: Gauravvvv at OpenSense Labs commentedFixed custom commands failed, Attached interdiff for same.
Comment #8
mherchelThanks for the patches! This looks perfect.
Note that @rikki_iki removed the bottom margin from
.node__top-wrapper
and added it onto both of its descendants (which works great).Animated GIF attached.
Comment #11
lauriiiCommitted 3494a8f and pushed to 9.3.x. Also cherry-picked to 9.2.x because Olivero is experimental. Thanks!