[Q1 FY25 | SEO] Discover More Cards #248

jsandland · 2025-03-12T21:54:04Z

Describe your specific features or fixes:

Implement New Discover More Cards Variant
Figma: https://www.figma.com/design/BZFcWZY01SWY9FRXB4cIVv/Standout-Create-Page-test---CCEX-120989?node-id=5037-146716&m=dev

Authoring Example: milo-discover-more-cards.docx

Resolves: MWPW-166954

Test URLs:

Pre Migration Link: https://adobe.com/express/
Before: https://main--express-milo--adobecom.aem.page/express/ (Variant does not exist though Discover Cards can be seen on homepage)
After: https://milo-discover-more-cards--express-milo--adobecom.aem.page/drafts/jsandlan/milo-discover-more-cards

…d per figma

… text on back of card

…dge, and on wide screens space between cards remains uniform

…f the view and gaps remain uniform on wide screens

… obfuscated

aem-code-sync · 2025-03-12T21:54:09Z

Hello, I'm the AEM Code Sync Bot and I will run some actions to deploy your branch and validate page speed.
In case there are problems, just click a checkbox below to rerun the respective action.

Re-run PSI checks
Re-sync branch

Commits

eb898eb ✅ (latest)
15ca064 ✅
c45dbcf ✅
bf7ca0d ✅
09049a9 ✅
c57392b ✅
ca5c68a ✅
36d5a45 ✅
f465eb9 ✅
60ee1e4 ✅
263d1f0 ✅
fd1ac47 ✅
7101164 ✅
53dc451 ✅
7004b60 ✅
5e06c8c ✅
b367f29 ✅
c124e2e ✅
2306f06 ✅
887bc3f ✅
7be2206 ✅
6f185d1 ✅
f50df92 ✅
cc7f13e ✅
ed0553a ❌
b6f944a ❌
f2ce602 ❌
944b389 ❌
c7d62d4 ❌
637b4ba ❌

aem-code-sync · 2025-03-12T21:54:40Z

	Page	Scores	Audits
📱	/drafts/jsandlan/milo-discover-more-cards
🖥️	/drafts/jsandlan/milo-discover-more-cards

codecov-commenter · 2025-03-12T21:55:06Z

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 66.43%. Comparing base (1d7887e) to head (33fc3e9).
Report is 60 commits behind head on stage.

Additional details and impacted files

@@            Coverage Diff             @@
##            stage     #248      +/-   ##
==========================================
- Coverage   67.12%   66.43%   -0.69%     
==========================================
  Files          63       62       -1     
  Lines       10353    10345       -8     
==========================================
- Hits         6949     6873      -76     
- Misses       3404     3472      +68

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

❄ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

express/code/blocks/discover-cards/discover-cards.css

JingleH · 2025-03-12T22:02:32Z

express/code/blocks/discover-cards/discover-cards.css

-    scroll-behavior: smooth;
-    padding: 0 16px;
-    scroll-padding: 0 16px;
+.gallery,


this might affect other galleries on the same page right? Maybe this line is not wanted?

these are the default rules that existed for the gallery - in order to avoid duplicating rules - I added the variant rule to all the rules that are identical

JingleH · 2025-03-12T22:03:22Z

express/code/blocks/discover-cards/discover-cards.css

+.discover-cards.more .card {
+  background-color: transparent;
+  min-width: 250px;
+  width: 250px;


do you have cases where both need to be defined to be the same values?

If I don't include min-width- the cards collapse when the view gets small - these rules ensure no matter how wide the viewport - the cards are always the same size

i see, there are conflicting rules for .discover-cards .cards-container .card

I would recommend making them min-width: initial to be clearer that you're intentionally overriding other rules tho

express/code/blocks/discover-cards/discover-cards.js

JingleH · 2025-03-12T22:05:47Z

express/code/blocks/discover-cards/discover-cards.js

+            const isFlipped = card.classList.contains('is-flipped');
+            card.setAttribute(
+              'aria-label',
+              isFlipped ? `Go back to ${card.cardTitle}` : `Learn more about ${card.cardTitle}`,


do these need to be authorable? What about localization?

No authoring requirements were given for these.

could you check with the designers and authors? Because technically as an accessibility practice, those labels should be in different languages when deployed internationally. Otherwise users will only hear about those labels in the hardcoded English values.
But it can be a follow up too, if it's going to be deployed on EN pages first.
@fullcolorcoder are you familiar with how Milo supports authoring for this?

@jsandland @JingleH Placeholders can handle this, and authoring is generally aware of that but if it can be avoided I'd favor that and I suspect they would too if given the option. Since this isn't just a test/jdi, I'd pair up with Earnest and come to an agreement since authoring efforts would be duplicated if we change the approach as a fast follow.

JingleH · 2025-03-12T22:07:07Z

express/code/blocks/discover-cards/discover-cards.js

+
+          card.setAttribute('tabindex', '0');
+          card.setAttribute('role', 'button');
+          card.setAttribute('aria-label', `Learn more about ${card.cardTitle}`);


same as below: do these need to be authorable? What about localization?

I have reached out to design but no heard back - can do a fast follow in a future pr

express/code/blocks/discover-cards/discover-cards.js

JingleH · 2025-03-12T22:11:28Z

express/code/blocks/discover-cards/discover-cards.js


  const cards = block.querySelectorAll(':scope > div:not(:first-child)');
+  const numCards = cards.length;
+  cardsWrapper.setAttribute('aria-label', `${numCards} cards in this section`);


same as below: do these need to be authorable? What about localization?

will do a fast follow

JingleH · 2025-03-12T22:11:38Z

express/code/blocks/discover-cards/discover-cards.js

    firstChild.classList.add('center-title');
+    const header = firstChild.querySelector('h1, h2, h3');
+    header.setAttribute('aria-label', `${header.textContent.trim()} cards`);


same as below: do these need to be authorable? What about localization?

will do a fast follow

express/code/blocks/discover-cards/discover-cards.css

jsandland added 30 commits March 10, 2025 13:55

check for discover more cards variant

637b4ba

cards flip, back and fron populated with more variant data

c7d62d4

set more card dimensions

944b389

remove background and border to ensure flips looks as expected

f2ce602

ensure nav appears when window width shrinks

b6f944a

ensure cards on mobile have figma aligned gap

ed0553a

add top margin to gallery in more card variant

cc7f13e

increase height of gallery for more variant

f50df92

adds icon to bottom right of front face

6f185d1

adds icon with black circle to bottom right of front face card - size…

7be2206

…d per figma

position icon in corner of front face card

887bc3f

add 32px padding to front face card

2306f06

reduce padding on left and right edges on back of card

c124e2e

ensure card visible through rotation - no clipping

b367f29

rotate in an 90 degree plane

5e06c8c

moves inline styles to stylesheet for plus and minus icon

7004b60

ensure minus icon appears per figma and on back of card

53dc451

adjust header size on mobile and desktop

7101164

allow vertical scroll for long text on back of card

fd1ac47

ensure minus icon does not move when vertical scroll enabled for long…

263d1f0

… text on back of card

ensure flip is 350ms and ease-out

60ee1e4

small screens keep left side of discover-cards.more variant at left e…

f465eb9

…dge, and on wide screens space between cards remains uniform

ensure no matter how small the view - the left card does not slide of…

36d5a45

…f the view and gaps remain uniform on wide screens

allows tab focus through discover-more cards

ca5c68a

remove comments

c57392b

add room above and below container to ensure tab focus outline is not…

09049a9

… obfuscated

adds aria-label to header

bf7ca0d

adds aria-labels to cards for number

c45dbcf

remove comment

15ca064

ensure gallery styles only apply to more variant

eb898eb

remove dupe css rule

fb5bc5d

fullcolorcoder approved these changes Mar 12, 2025

View reviewed changes

echen-adobe approved these changes Mar 12, 2025

View reviewed changes

JingleH requested changes Mar 12, 2025

View reviewed changes

jsandland added the Ready for Review Ready for peer review. label Mar 12, 2025

change variant to flip from more

2d4d305

aem-code-sync bot temporarily deployed to milo-discover-more-cards March 12, 2025 22:25 Inactive

change CSS rules to flip from more

0f3d9b0

aem-code-sync bot temporarily deployed to milo-discover-more-cards March 12, 2025 22:26 Inactive

review cleanup

f0ba79d

aem-code-sync bot temporarily deployed to milo-discover-more-cards March 12, 2025 22:36 Inactive

one liner for append

844247a

aem-code-sync bot temporarily deployed to milo-discover-more-cards March 12, 2025 22:39 Inactive

adds font-size var for header

33fc3e9

aem-code-sync bot deployed to milo-discover-more-cards March 12, 2025 22:41 View deployment

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Q1 FY25 | SEO] Discover More Cards #248

[Q1 FY25 | SEO] Discover More Cards #248

jsandland commented Mar 12, 2025 •

edited

Loading

aem-code-sync bot commented Mar 12, 2025 •

edited

Loading

aem-code-sync bot commented Mar 12, 2025 •

edited

Loading

codecov-commenter commented Mar 12, 2025 •

edited

Loading

JingleH Mar 12, 2025

jsandland Mar 12, 2025

JingleH Mar 12, 2025

jsandland Mar 12, 2025

JingleH Mar 12, 2025

JingleH Mar 12, 2025

jsandland Mar 12, 2025

JingleH Mar 12, 2025

fullcolorcoder Mar 13, 2025

JingleH Mar 12, 2025

jsandland Mar 12, 2025

JingleH Mar 12, 2025

jsandland Mar 12, 2025

JingleH Mar 12, 2025

jsandland Mar 12, 2025

[Q1 FY25 | SEO] Discover More Cards #248

Are you sure you want to change the base?

[Q1 FY25 | SEO] Discover More Cards #248

Conversation

jsandland commented Mar 12, 2025 • edited Loading

aem-code-sync bot commented Mar 12, 2025 • edited Loading

aem-code-sync bot commented Mar 12, 2025 • edited Loading

codecov-commenter commented Mar 12, 2025 • edited Loading

Codecov Report

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jsandland commented Mar 12, 2025 •

edited

Loading

aem-code-sync bot commented Mar 12, 2025 •

edited

Loading

aem-code-sync bot commented Mar 12, 2025 •

edited

Loading

codecov-commenter commented Mar 12, 2025 •

edited

Loading