MWPW-162956: Setting accessibleLabel as sr-only #3738
Conversation
|
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
There was a problem hiding this comment.
File ignored because of a matching ignore pattern. Use "--no-ignore" to override.
There was a problem hiding this comment.
File ignored because of a matching ignore pattern. Use "--no-ignore" to override.
There was a problem hiding this comment.
File ignored because of a matching ignore pattern. Use "--no-ignore" to override.
There was a problem hiding this comment.
File ignored because of a matching ignore pattern. Use "--no-ignore" to override.
There was a problem hiding this comment.
File ignored because of a matching ignore pattern. Use "--no-ignore" to override.
|
This pull request is not passing all required checks. Please see this discussion for information on how to get all checks passing. Inconsistent checks can be manually retried. If a test absolutely can not pass for a good reason, please add a comment with an explanation to the PR. |
# Conflicts: # libs/deps/mas/commerce.js # libs/deps/mas/mas.js # libs/deps/mas/merch-card.js # libs/features/mas/dist/mas.js
There was a problem hiding this comment.
File ignored because of a matching ignore pattern. Use "--no-ignore" to override.
There was a problem hiding this comment.
File ignored because of a matching ignore pattern. Use "--no-ignore" to override.
| @@ -742,7 +742,7 @@ header.global-navigation + .feds-localnav { | |||
| height: var(--global-height-navPromo); | |||
| } | |||
|
|
|||
| .feds-sr-only { | |||
| sr-only, .feds-sr-only { | |||
There was a problem hiding this comment.
this should move to global.css.js from MAS otherwise, outside Milo, sr-only will be shown to MAS consumers.
| @@ -136,11 +137,10 @@ function renderContainer( | |||
| taxInclusivityLabel, | |||
| true, | |||
| ); | |||
|
|
|||
| return renderSpan(cssClass, markup, { | |||
| const regularlySRLabel = accessibleLabel ? `<sr-only class="strikethrough-aria-label">${accessibleLabel}</sr-only>` : ''; | |||
There was a problem hiding this comment.
can we instead do at the line 127:
let markup = accessibleLabel ? <sr-only class="strikethrough-aria-label">${accessibleLabel}</sr-only> : '';
|
|
||
| // Adding logic for <sr-only>Alternatively at</sr-only> | ||
| const htmlPattern = /<\/?[^>]+(>|$)/g; | ||
| async function formatLiteral(key, parameters) { |
There was a problem hiding this comment.
formatLiteral is already in template.js, please do not duplicate it.
inline-price is used only in the Milo implementation.
Dexter, and current Offer Selector Tool will not run this logic while rendering a price.
Please find way to move this logic to template.js
| @@ -15,6 +15,9 @@ const priceOptical = createPriceTemplate({ | |||
| const priceStrikethrough = createPriceTemplate({ | |||
| displayStrikethrough: true, | |||
| }); | |||
| const priceAlternative = createPriceTemplate({ | |||
There was a problem hiding this comment.
instead of creating priceAlternative, can we
const priceStrikethrough = createPriceTemplate({
displayStrikethrough: true,
alternativePrice: true|false
});
alternativePrice could be an option set in inline-price.js based on some attributes or offer data.
Also, likely we need to add this to some of other price rendering function, maybe pricePromoWithAnnual ?
happy to discuss this.
Resolves: MWPW-162956
Test URLs:
Consumer site to test:
Before: https://main--cc--adobecom.aem.live/products/photoshop/plans
After: https://main--cc--adobecom.aem.live/products/photoshop/plans?milolibs=MWPW-162956
Before: https://main--cc--adobecom.aem.page/es/products/special-offers
After: https://main--cc--adobecom.aem.page/es/products/special-offers?milolibs=MWPW-162956