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.

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

mherchel created an issue. See original summary.

mherchel’s picture

Status: Active » Needs review
FileSize
3.5 MB

This 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/

mherchel’s picture

I guess the patch would be helpful for the review...

mherchel’s picture

Issue tags: +Olivero stable blocker
rikki_iki’s picture

Nice 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.

rikki_iki’s picture

Patch 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

Gauravvvv’s picture

Fixed custom commands failed, Attached interdiff for same.

mherchel’s picture

Issue summary: View changes
Status: Needs review » Reviewed & tested by the community
FileSize
5.16 MB

Thanks 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.

  • lauriii committed 3494a8f on 9.3.x
    Issue #3229094 by mherchel, rikki_iki, Gauravmahlawat: Olivero: Titles...

  • lauriii committed 221a70a on 9.2.x
    Issue #3229094 by mherchel, rikki_iki, Gauravmahlawat: Olivero: Titles...
lauriii’s picture

Version: 9.3.x-dev » 9.2.x-dev
Status: Reviewed & tested by the community » Fixed

Committed 3494a8f and pushed to 9.3.x. Also cherry-picked to 9.2.x because Olivero is experimental. Thanks!

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.