Resolve unintended click behavior in editorial card

[jsmitrah26]

Resolves: MWPW-199911

Description

Hi While exploring the Adobe Blog components in Milo, I came across an interaction issue in the Editorial Card footer. Since this was a good opportunity to contribute, I implemented a fix for the issue.

When the Editorial Card footer contains only a text-based call-to-action, the entire footer area becomes interactive instead of just the intended link. This change limits the clickable area to the call-to-action element, ensuring consistent interaction behavior across all footer variants.

Steps to Reproduce

1. Add an Editorial Card (default or open variant).
2. Add a text-based call-to-action in the card footer.

Expected: Only the CTA text is clickable.

Actual: The entire footer area is clickable.

Test URLs

Before: https://main--mitrah-milo-hub--jsmitrah26.aem.live/

After: https://main--mitrah-milo-hub--jsmitrah26.aem.live/?milolibs=fix-editorial-cta-click--milo--jsmitrah26

[narcis-radu]

Hi @jsmitrah26 - do you have a real life example of the issue?

[jsmitrah26]

Hi @narcis-radu, I haven't found a production page using this exact configuration yet. I identified the behavior while exploring the Editorial Card component and reproduced it using a demo page to validate the fix.

[vhargrave]

Approved — thanks for the contribution! 🎉

The fix is correct. The footer's inner div is a flex column, so a lone link stretches to the full width (default align-items: stretch) — that's why the whole footer was clickable. Adding .action-area flips it to a row so the link only takes up its own width.

One friendly suggestion (non-blocking): this could be done in pure CSS without the JS, which is a bit cleaner:

.editorial-card .card-footer > div > a:only-child { align-self: end; }

align-self: end overrides the column's align-items: stretch for just that lone link, so it shrinks to its content and right-aligns (matching the footer's text-align: end) — same result, no JS. Using .action-area also works, though that class is used elsewhere in Milo mainly for button CTAs (see decorateButtons), so the CSS-only route keeps things a little more focused. Totally your call.

Other optional notes:

• A quick unit test for the footer link no longer stretching would be nice — the current suite doesn't cover it.
• A bare link in .foreground > div (also a flex column) would have the same issue, if you want to cover it too. Out of scope here, just flagging.

[jsmitrah26]

Hi @vhargrave , thanks for the review and the suggestions! I've updated the implementation to follow the CSS-only approach as suggested and have pushed the latest changes, Thanks!

[github-actions]

Reminder to set the Ready for Stage label - to queue this to get merged to stage & production.

[jsmitrah26]

Hi @vhargrave , I don't have the required permissions to add the Ready for Stage label. Could you please add it? Thanks!

[vhargrave]

Hi @vhargrave , I don't have the required permissions to add the Ready for Stage label. Could you please add it? Thanks!

@jsmitrah26 one of our QAs will take a look and assign the label 🙌

[jsmitrah26]

@vhargrave Great, thanks for letting me know!