MWPW-161865: adds alt text attribute to background images of merch cards #3272

Axelcureno · 2024-11-27T20:40:02Z

Adds alt attribute to background images of slice merch card.

M@S Studio test URL: https://main--mas--adobecom.hlx.live/studio.html?milolibs=MWPW-161865--milo--adobecom#path=ccd

Test URLs:

* MWPW-159374: Update hydrate logic to support all cta styles organise code and code coverage Update tests * add workaround for ccd-suggested cards * remove source maps * improve code coverage * merge MWPW-159374 * MWPW-161355: Update MAS documentation * Example with contextual menu * Checkout click event with correct event target when the CTA contains a text wrapped by a span * cleanup all attributes during card hydration * remove deps/mas/mas.js * update test * update doc * allow list libs/features/mas/mas/dist/mas.js * change order in ignore * trying with wildcard * allow list dist * update hlxignore rules * update hlxignore rules * MWPW-161176: restructure ccd gallery (#3169) restructure ccd gallery * fix mas path * fix undefined error in merch-icon * fix regression in ctas size * update doc * fix css with checkout-link * fix random rtl issue * revert removal of mas.js from deps * update ccd gallery --------- Co-authored-by: Mariia Lukianets <lukianet@adobe.com>

* MWPW-161845: add analytics * fix review changes * add build files

* initial freyja commit * increase codecov * trival * add qa support to ccd page * improve page performance * update ccd.html

Refactor merch-card styles to improve structure and specificity

…3196) * Added space after price recurrence label for display-per-unit prices * more specific selector * built * fix cr * built

* MWPW-162933: merge mas modules + consonant-templates module from tacocat.js into a single module

* MWPW-160755 - add tests for CCD cards * refactor and prepare dark mode checks * add tests for slice cards * activate dark for suggested and eslint fixes * add check for cta variant * fix multi mnemonic check * fix lint * add analytics check * remove comment

…feedback

aem-code-sync · 2024-11-27T20:40:05Z

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

dd05ab2 ✅ (latest)
cac15d5 ✅
630f44f ✅
7d84619 ✅
ffc620e ✅
9243a90 ✅
be7acfd ✅
f94a809 ✅

aem-code-sync · 2024-11-27T20:40:31Z

	Page	Scores	Audits	Google
📱	/docs/library/kitchen-sink/merch-card?martech=off
🖥️	/docs/library/kitchen-sink/merch-card?martech=off

github-actions · 2024-11-27T20:40:37Z

libs/features/mas/src/hydrate.js

⚠️ [eslint] _{reported by reviewdog 🐶}
File ignored because of a matching ignore pattern. Use "--no-ignore" to override.

codecov · 2024-11-27T20:41:32Z

Codecov Report

Attention: Patch coverage is 98.82199% with 18 lines in your changes missing coverage. Please review.

Project coverage is 96.44%. Comparing base (9884681) to head (dd05ab2).
Report is 16 commits behind head on stage.

Files with missing lines	Patch %	Lines
libs/features/mas/src/log.js	92.79%	8 Missing ⚠️
libs/features/mas/src/lana.js	95.37%	5 Missing ⚠️
libs/features/mas/src/price/utilities.js	99.27%	2 Missing ⚠️
libs/blocks/merch-card/merch-card.js	0.00%	1 Missing ⚠️
libs/features/mas/src/price/template.js	99.76%	1 Missing ⚠️
libs/features/mas/src/variants/product.js	85.71%	1 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##            stage    #3272      +/-   ##
==========================================
- Coverage   98.84%   96.44%   -2.40%     
==========================================
  Files          70      253     +183     
  Lines        8660    58735   +50075     
==========================================
+ Hits         8560    56648   +48088     
- Misses        100     2087    +1987

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

* MWPW-163041: fix analytics & add docs * add tests for analytics * add analytics docu * fix test

* bump to 10 seconds * new change

3ch023 · 2024-11-29T16:38:53Z

libs/features/mas/src/hydrate.js

-        }
-    }
+  if (fields.backgroundImage) {
+      switch (variant) {


i suggest to base the decision on backgroundImageConfig.

if (backgroundImageConfig.tag) { // create tag } if (backgroundImageConfig.attribute) { merchCard.setAttribute(backgroundImageConfig.attribute, fields.backgroundImage); }

then you only need to add this to ccd-suggested.js AEM_FRAGMENT_MAPPING:

backgroundImage: { attribute: 'background-image' },

this shifts control to the specific variant, leaving hydrate simple and unaware of ccd or adobe home or any other consumer.

That's actually a great suggestion. I've made the change and the function is now variant-agnostic. I've also updated UTs accordingly. Thx.

3ch023 · 2024-11-29T16:42:35Z

libs/features/mas/src/hydrate.js

+                      loading: 'lazy',
+                      src: fields.backgroundImage,
+                  };
+                  if (fields.backgroundImageAltText) {


jira mentions that if backgroundImageAltText is missing we still need to set role="none" attribute

Ensure elements have alternate text or a role of none or presentation

https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles

RIght, added.

github-actions · 2024-12-02T23:18:58Z

libs/features/mas/src/variants/ccd-suggested.js

⚠️ [eslint] _{reported by reviewdog 🐶}
File ignored because of a matching ignore pattern. Use "--no-ignore" to override.

github-actions · 2024-12-02T23:18:59Z

libs/features/mas/test/hydrate.test.js

⚠️ [eslint] _{reported by reviewdog 🐶}
File ignored because of a matching ignore pattern. Use "--no-ignore" to override.

github-actions · 2024-12-02T23:21:25Z

libs/deps/mas/mas.js

⚠️ [eslint] _{reported by reviewdog 🐶}
File ignored because of a matching ignore pattern. Use "--no-ignore" to override.

github-actions · 2024-12-02T23:21:25Z

libs/deps/mas/merch-card.js

⚠️ [eslint] _{reported by reviewdog 🐶}
File ignored because of a matching ignore pattern. Use "--no-ignore" to override.

github-actions · 2024-12-02T23:21:26Z

libs/features/mas/dist/mas.js

⚠️ [eslint] _{reported by reviewdog 🐶}
File ignored because of a matching ignore pattern. Use "--no-ignore" to override.

* MWPW-161645: lana logging for CCD with <mas-commerce-service data-lana-tags="consumer=ccd" ...> lana will be enabled. TODO: Update docs * Update tests * fix review comments * add host env attribute, fix lana override * fix docs * fix unit tests * start loggin missing osi's * fix message * fix message * Update libs/features/mas/src/lana.js Co-authored-by: Axel Cureno Basurto <axelcureno@gmail.com> * PR review changes * avoid duplicate logging, log wcs url, limit page length in log * fix formatString error * fix render * add tests * fix loggin * revert ccd comments * fix milo tags --------- Co-authored-by: Mariia Lukianets <mariia.lukianets@gmail.com> Co-authored-by: Axel Cureno Basurto <axelcureno@gmail.com>

Roycethan · 2024-12-09T18:48:59Z

@Axelcureno

Plz resolve js conflicts.
I get this error when saving the alt-text some times-
https://main--mas--adobecom.hlx.live/studio.html?milolibs=MWPW-161865--milo--adobecom#path=ccd

cc @yesil @3ch023 @npeltier @afmicka

Axelcureno · 2024-12-09T22:46:20Z

@Axelcureno

Plz resolve js conflicts.

I get this error when saving the alt-text some times-
https://main--mas--adobecom.hlx.live/studio.html?milolibs=MWPW-161865--milo--adobecom#path=ccd

cc @yesil @3ch023 @npeltier @afmicka

Fixed @Roycethan , please retest.

3ch023

PR shows 278 changes, you branch needs to be fixed.
will DM in slack

Axelcureno · 2024-12-11T15:25:41Z

Closing this one, new PR with these changes: #3360

npeltier and others added 17 commits November 15, 2024 09:34

MWPW-162385 add wcsApiKey attribute

2ae5836

Merge branch 'stage' of github.com:adobecom/milo into MWPW-162385

541f98e

Merge branch 'ccd' into MWPW-162385

b99fc0e

MWPW-161845: basic analytics on mas cards (#3206)

935341c

* MWPW-161845: add analytics * fix review changes * add build files

MWPW-159191: MAS Freyja support (#3209)

6f22877

* initial freyja commit * increase codecov * trival * add qa support to ccd page * improve page performance * update ccd.html

MWPW-161804: Merch card style auditing (#3216)

da55e2f

Refactor merch-card styles to improve structure and specificity

Added space after price recurrence label for display-per-unit prices (#…

ec2d95f

…3196) * Added space after price recurrence label for display-per-unit prices * more specific selector * built * fix cr * built

Merge branch 'main' of github.com:adobecom/milo into MWPW-162385

08c281e

adding example

2dd8fd8

Merge branch 'ccd' of github.com:adobecom/milo into MWPW-162385

df69264

MWPW-162933: merge mas modules (#3248)

4c688d0

* MWPW-162933: merge mas modules + consonant-templates module from tacocat.js into a single module

Merge branch 'ccd' of github.com:adobecom/milo into MWPW-162385

2b8083b

Enhance background image processing to include alt text support

f94a809

Update hydrate.js

be7acfd

Refactor user authentication flow to improve error handling and user …

9243a90

…feedback

Axelcureno added commerce merch card labels Nov 27, 2024

Axelcureno requested review from yesil, npeltier, 3ch023 and st-angelo-adobe November 27, 2024 20:40

Axelcureno self-assigned this Nov 27, 2024

github-actions bot reviewed Nov 27, 2024

View reviewed changes

afmicka and others added 2 commits November 28, 2024 11:18

MWPW-162385 add wcsApiKey attribute (#3203)

3bcaa80

MWPW-163041: analytics fix (#3257)

211c7d4

* MWPW-163041: fix analytics & add docs * add tests for analytics * add analytics docu * fix test

Bump timeout from 2 to 10 sec (#3282)

94a424e

* bump to 10 seconds * new change

3ch023 reviewed Nov 29, 2024

View reviewed changes

Axelcureno added 2 commits December 2, 2024 13:56

Merge branch 'ccd' into MWPW-161865

ffc620e

made processBackgroundImage variant-agnostic

7d84619

aem-code-sync bot temporarily deployed to MWPW-161865 December 2, 2024 23:18 Inactive

github-actions bot reviewed Dec 2, 2024

View reviewed changes

updated deps

630f44f

aem-code-sync bot temporarily deployed to MWPW-161865 December 2, 2024 23:20 Inactive

github-actions bot reviewed Dec 2, 2024

View reviewed changes

Axelcureno requested a review from 3ch023 December 2, 2024 23:22

yesil and others added 4 commits December 3, 2024 16:54

Merge remote-tracking branch 'upstream/stage' into ccd

68a4328

add build artifacts

dc0f9c7

Merge branch 'stage' of github.com:adobecom/milo into ccd

1c86cc2

Axelcureno added 2 commits December 9, 2024 14:10

Merge branch 'ccd' into MWPW-161865

cac15d5

updated deps

dd05ab2

aem-code-sync bot deployed to MWPW-161865 December 9, 2024 22:12 View deployment

Roycethan added the verified PR has been E2E tested by a reviewer label Dec 10, 2024

Base automatically changed from ccd to stage December 10, 2024 10:14

overmyheadandbody requested a review from a team as a code owner December 10, 2024 10:14

3ch023 requested changes Dec 11, 2024

View reviewed changes

Axelcureno mentioned this pull request Dec 11, 2024

MWPW-161865: adds alt text attribute to background images of merch cards #3360

Merged

Axelcureno closed this Dec 11, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

MWPW-161865: adds alt text attribute to background images of merch cards #3272

MWPW-161865: adds alt text attribute to background images of merch cards #3272

Axelcureno commented Nov 27, 2024 •

edited

Loading

aem-code-sync bot commented Nov 27, 2024 •

edited

Loading

aem-code-sync bot commented Nov 27, 2024 •

edited

Loading

github-actions bot Nov 27, 2024

codecov bot commented Nov 27, 2024 •

edited

Loading

3ch023 Nov 29, 2024 •

edited

Loading

Axelcureno Dec 2, 2024

3ch023 Nov 29, 2024

Axelcureno Dec 2, 2024

github-actions bot Dec 2, 2024

github-actions bot Dec 2, 2024

github-actions bot Dec 2, 2024

github-actions bot Dec 2, 2024

github-actions bot Dec 2, 2024

Roycethan commented Dec 9, 2024

Axelcureno commented Dec 9, 2024

3ch023 left a comment

Axelcureno commented Dec 11, 2024

MWPW-161865: adds alt text attribute to background images of merch cards #3272

MWPW-161865: adds alt text attribute to background images of merch cards #3272

Conversation

Axelcureno commented Nov 27, 2024 • edited Loading

aem-code-sync bot commented Nov 27, 2024 • edited Loading

aem-code-sync bot commented Nov 27, 2024 • edited Loading

github-actions bot Nov 27, 2024

Choose a reason for hiding this comment

codecov bot commented Nov 27, 2024 • edited Loading

Codecov Report

3ch023 Nov 29, 2024 • edited Loading

Choose a reason for hiding this comment

Axelcureno Dec 2, 2024

Choose a reason for hiding this comment

3ch023 Nov 29, 2024

Choose a reason for hiding this comment

Axelcureno Dec 2, 2024

Choose a reason for hiding this comment

github-actions bot Dec 2, 2024

Choose a reason for hiding this comment

github-actions bot Dec 2, 2024

Choose a reason for hiding this comment

github-actions bot Dec 2, 2024

Choose a reason for hiding this comment

github-actions bot Dec 2, 2024

Choose a reason for hiding this comment

github-actions bot Dec 2, 2024

Choose a reason for hiding this comment

Roycethan commented Dec 9, 2024

Axelcureno commented Dec 9, 2024

3ch023 left a comment

Choose a reason for hiding this comment

Axelcureno commented Dec 11, 2024

Axelcureno commented Nov 27, 2024 •

edited

Loading

aem-code-sync bot commented Nov 27, 2024 •

edited

Loading

aem-code-sync bot commented Nov 27, 2024 •

edited

Loading

codecov bot commented Nov 27, 2024 •

edited

Loading

3ch023 Nov 29, 2024 •

edited

Loading