Skip to content

[Release] Stage to Main 04/13 #970

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
nkthakur48 merged 8 commits into from
Apr 13, 2026
Merged

[Release] Stage to Main 04/13 #970

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
903245c
MWPW-189460-width changes for editorial card for tablet (#936)
hkhatana26 Apr 6, 2026
adf4d96
MWPW-189449: reducing the padding below the carosuel for mobile (#958)
suhjainadobe Apr 6, 2026
8b54275
MWPW-191644: Include "firefly-howto" in iconsExclusionBlocks (#963)
nkthakur48 Apr 6, 2026
a8d5be3
[MWPW-190523, MWPW-187015]: [Accessibility] Fix axe devtools and nvda…
hkuraware Apr 8, 2026
e768f0b
MWPW-191633: Adds to setLibs array to allow the use of milolibs= on s…
JasonHowellSlavin Apr 9, 2026
40809f0
MWPW-192019: Avoid applying grid styles to .aside.promobar (#971)
nkthakur48 Apr 9, 2026
d8e59cd
Revert "MWPW-191633: Adds to setLibs array to allow the use of miloli…
Blainegunn Apr 10, 2026
7e72975
Merge branch 'main' into stage
nkthakur48 Apr 13, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 16 additions & 4 deletions creativecloud/blocks/firefly-carousel/firefly-carousel.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@
width: 100%;
overflow: hidden;
position: relative;
padding-bottom: 160px;
padding-bottom: 80px;
}

.firefly-carousel .firefly-carousel-track {
Expand All @@ -36,7 +36,7 @@
border-radius: var(--ff-card-border-radius);
background: #111;
outline: none;
box-shadow: 0 16px 24px 0 rgb(0 0 0 / 8%), 0 4px 10px 0 rgb(0 0 0 / 5%);
box-shadow: 0 8px 12px 0 rgb(0 0 0 / 8%), 0 2px 5px 0 rgb(0 0 0 / 5%);
transition: box-shadow 180ms ease-in-out;
}

Expand All @@ -51,8 +51,7 @@
}

.firefly-carousel .firefly-carousel-card.active {
/* Slightly reduced shadow extent (5px) to avoid clipping by content below */
box-shadow: 0 95px 75px 0 rgb(0 0 0 / 19%), 0 64.815px 46.852px 0 rgb(0 0 0 / 14%), 0 38.519px 25.481px 0 rgb(0 0 0 / 12%), 0 20px 13px 0 rgb(0 0 0 / 9%), 0 8.148px 6.519px 0 rgb(0 0 0 / 7%), 0 1.852px 3.148px 0 rgb(0 0 0 / 5%);
box-shadow: 0 48px 38px 0 rgb(0 0 0 / 19%), 0 32px 23px 0 rgb(0 0 0 / 14%), 0 19px 13px 0 rgb(0 0 0 / 12%), 0 10px 7px 0 rgb(0 0 0 / 9%), 0 4px 3px 0 rgb(0 0 0 / 7%), 0 1px 2px 0 rgb(0 0 0 / 5%);
}

.firefly-carousel .firefly-carousel-media {
Expand Down Expand Up @@ -192,6 +191,19 @@
}

@media screen and (min-width: 600px) {
.firefly-carousel .firefly-carousel-viewport {
padding-bottom: 160px;
}

.firefly-carousel .firefly-carousel-card {
box-shadow: 0 16px 24px 0 rgb(0 0 0 / 8%), 0 4px 10px 0 rgb(0 0 0 / 5%);
}

.firefly-carousel .firefly-carousel-card.active {
/* Slightly reduced shadow extent (5px) to avoid clipping by content below */
box-shadow: 0 95px 75px 0 rgb(0 0 0 / 19%), 0 64.815px 46.852px 0 rgb(0 0 0 / 14%), 0 38.519px 25.481px 0 rgb(0 0 0 / 12%), 0 20px 13px 0 rgb(0 0 0 / 9%), 0 8.148px 6.519px 0 rgb(0 0 0 / 7%), 0 1.852px 3.148px 0 rgb(0 0 0 / 5%);
}

.firefly-carousel {
--ff-card-width: 70vw;
--ff-card-height: calc(var(--ff-card-width) / 1.6);
Expand Down
13 changes: 7 additions & 6 deletions creativecloud/blocks/prm-yt-gallery/prm-yt-gallery.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -143,7 +143,7 @@
max-width: calc(100% - var(--button-max-width-offset));
overflow: hidden;
text-overflow: ellipsis;
opacity: 0;
visibility: hidden;
display: var(--button-display);
}

Expand Down Expand Up @@ -171,7 +171,7 @@
align-items: center;
justify-content: center;
z-index: 2;
opacity: 0;
visibility: hidden;
}

.pre-yt-card-inner .pre-yt-close-card-button {
Expand All @@ -189,6 +189,7 @@
align-items: center;
justify-content: center;
z-index: 4;
visibility: hidden;
}

.pre-yt-card-inner .pre-yt-info-overlay {
Expand Down Expand Up @@ -273,8 +274,9 @@
}

.pre-yt-card.expanded .pre-yt-button,
.pre-yt-card.expanded .pre-yt-info-button {
opacity: 1;
.pre-yt-card.expanded .pre-yt-info-button,
.pre-yt-card.expanded .pre-yt-close-card-button {
visibility: visible;
}

.pre-yt-card.expanded .pre-yt-free-tag {
Expand All @@ -288,8 +290,7 @@

.pre-yt-card.info-visible .pre-yt-info-button,
.pre-yt-card.info-visible .pre-yt-close-card-button {
opacity: 0;
pointer-events: none;
visibility: hidden;
}

.pre-yt-card.info-visible .pre-yt-button {
Expand Down
56 changes: 36 additions & 20 deletions creativecloud/blocks/prm-yt-gallery/prm-yt-gallery.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,15 @@ const CLASSES = {
INFO_VISIBLE: 'info-visible',
};

// Centralized accessible names (aria-label) for the gallery block.
const ARIA_LABELS = {
CARD_LOADING: 'Loading template',
CARD_UNAVAILABLE: 'Templates unavailable',
SHOW_INFO: 'Show info',
CLOSE_CARD: 'Close card',
OVERLAY_CLOSE: 'Close text description',
};

// SVG Icons
const ICONS = {
close: `
Expand Down Expand Up @@ -203,13 +212,13 @@ const collapseCard = (card, video) => {
};

// Creates a reusable close button.
const createCloseButton = (className, ariaLabel, onClick, tabIndex = 0) => {
const createCloseButton = (className, ariaLabel, onClick, tabindex = 0, ariaHidden = 'false') => {
const button = createTag('button', {
class: className,
'aria-label': ariaLabel,
type: 'button',
tabIndex,
'aria-hidden': 'true',
tabindex,
'aria-hidden': ariaHidden,
});
button.insertAdjacentHTML('beforeend', ICONS.close);
button.addEventListener('click', (e) => {
Expand All @@ -232,29 +241,26 @@ const createCloseButton = (className, ariaLabel, onClick, tabIndex = 0) => {
const createInfoButton = () => {
const button = createTag('button', {
class: CLASSES.INFO_BUTTON,
'aria-label': 'Show info',
'aria-label': ARIA_LABELS.SHOW_INFO,
type: 'button',
tabindex: '0',
'aria-hidden': 'true',
});
button.insertAdjacentHTML('beforeend', ICONS.info);
return button;
};

// Creates the "Edit this template" button.
const createEditButton = (buttonText) => {
const button = createTag('a', {
class: CLASSES.BUTTON,
tabindex: '0',
'aria-hidden': 'true',
});
const button = createTag('a', { class: CLASSES.BUTTON });
button.textContent = buttonText;
return button;
};

// Creates the info overlay with text container.
const createInfoOverlay = () => {
const overlay = createTag('div', { class: CLASSES.INFO_OVERLAY });
const overlay = createTag('div', {
class: CLASSES.INFO_OVERLAY,
'aria-hidden': 'true',
});
const overlayText = createTag('p', { class: CLASSES.OVERLAY_TEXT, tabindex: '-1' });
overlay.append(overlayText);
return overlay;
Expand Down Expand Up @@ -283,7 +289,7 @@ const createCloseCardButton = (card) => {
const video = card.querySelector(`.${CLASSES.VIDEO_WRAPPER} video`);
return createCloseButton(
CLASSES.CLOSE_CARD_BUTTON,
'Close card',
ARIA_LABELS.CLOSE_CARD,
() => {
collapseCard(card, video);
if (window.innerWidth > CONFIG.VIEWPORT.mobile) { card?.querySelector('.pre-yt-info-button')?.focus(); }
Expand All @@ -296,7 +302,8 @@ const createShimmerCard = (buttonText) => {
const card = createTag('div', {
class: `${CLASSES.CARD} ${CLASSES.SHIMMER}`,
tabindex: '0',
role: 'presentation',
role: 'group',
'aria-label': ARIA_LABELS.CARD_LOADING,
});
const cardInner = createTag('div', { class: CLASSES.CARD_INNER });
const imageWrapper = createTag('div', { class: CLASSES.IMAGE_WRAPPER });
Expand Down Expand Up @@ -349,19 +356,15 @@ const updateCardWithData = (card, item, eager = false) => {
const img = createImageElement(item.image, eager);
handleImageLoad(card, img);
imageWrapper.append(img);
const overlayTextId = `overlay-text-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;

// Update overlay text
if (overlayText) {
overlayText.textContent = item.altText;
overlayText.ariaLive = 'polite';
overlayText.id = overlayTextId;
}

// Update button deep link and aria-describedby
// Update button deep link URL
if (button && item.deepLinkUrl) {
button.href = item.deepLinkUrl;
button.setAttribute('aria-describedby', overlayTextId);
}

// Add video if available
Expand All @@ -373,6 +376,10 @@ const updateCardWithData = (card, item, eager = false) => {
// Shows info overlay and pauses video.
const showInfoOverlay = (card, video, closeOverlayButton) => {
card.classList.add(CLASSES.INFO_VISIBLE);
const infoOverlay = card.querySelector(`.${CLASSES.INFO_OVERLAY}`);
if (infoOverlay) {
infoOverlay.setAttribute('aria-hidden', 'false');
}
if (video) video.pause();
if (closeOverlayButton) {
closeOverlayButton.tabindex = 0;
Expand All @@ -384,6 +391,10 @@ const showInfoOverlay = (card, video, closeOverlayButton) => {
// Hides info overlay and resumes video.
const hideInfoOverlay = (card, video) => {
card.classList.remove(CLASSES.INFO_VISIBLE);
const infoOverlay = card.querySelector(`.${CLASSES.INFO_OVERLAY}`);
if (infoOverlay) {
infoOverlay.setAttribute('aria-hidden', 'true');
}
setAriaHidden(`.${CLASSES.OVERLAY_CLOSE}`, true, card);
if (video) {
video.play().catch((error) => {
Expand Down Expand Up @@ -447,7 +458,7 @@ const setupInfoOverlay = (card) => {

const closeOverlayButton = createCloseButton(
CLASSES.OVERLAY_CLOSE,
'Close text description',
ARIA_LABELS.OVERLAY_CLOSE,
() => {
hideInfoOverlay(card, video);
if (window.innerWidth > CONFIG.VIEWPORT.mobile) {
Expand All @@ -457,6 +468,7 @@ const setupInfoOverlay = (card) => {
}
},
-1,
'true',
);
overlay.appendChild(closeOverlayButton);

Expand Down Expand Up @@ -595,5 +607,9 @@ export default async function init(el) {
});
if (data) {
updateCardsWithData(grid, data, cardLimit, blockProps.freeTagText, blockProps.branchLinkTestId);
} else {
grid.querySelectorAll(`.${CLASSES.CARD}`).forEach((card) => {
card.setAttribute('aria-label', ARIA_LABELS.CARD_UNAVAILABLE);
});
}
}
2 changes: 1 addition & 1 deletion creativecloud/scripts/utils.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -388,7 +388,7 @@ const CONFIG = {
contentRoot: '/cc-shared',
codeRoot: '/creativecloud',
imsClientId: 'adobedotcom-cc',
iconsExcludeBlocks: ['unity', 'cc-forms', 'interactive-metadata'],
iconsExcludeBlocks: ['unity', 'cc-forms', 'interactive-metadata', 'firefly-howto'],
locales,
geoRouting: 'on',
prodDomains: ['www.adobe.com', 'helpx.adobe.com', 'business.adobe.com'],
Expand Down
25 changes: 15 additions & 10 deletions creativecloud/styles/doodlebug.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,47 +61,47 @@
}

/* ---- Aside ---- */
.aside .foreground.container {
.aside:not(.promobar) .foreground.container {
display: grid;
align-items: center;
gap: 165px;
width: 85%;
grid-template-columns: minmax(45%, 1fr) minmax(55%, 1fr);
}

.aside .foreground.container:has(> .image:first-child) {
.aside:not(.promobar) .foreground.container:has(> .image:first-child) {
grid-template-columns: minmax(55%, 1fr) minmax(45%, 1fr);
}

.aside .foreground.container .text {
.aside:not(.promobar) .foreground.container .text {
margin-inline: 180px 0;
}

.aside .foreground.container:has(> .image:first-child) .text {
.aside:not(.promobar) .foreground.container:has(> .image:first-child) .text {
margin-inline: 0 180px;
}

.aside .foreground.container .image :is(img, video) {
.aside:not(.promobar) .foreground.container .image :is(img, video) {
border-radius: 20px;
border: var(--glass-border);
}

@media (max-width: 1199px) {
.aside .foreground.container {
.aside:not(.promobar) .foreground.container {
display: grid;
align-items: center;
gap: 8.5%;
width: 85%;
grid-template-columns: minmax(45%, 1fr) minmax(55%, 1fr);
}

.aside .foreground.container .text {
.aside:not(.promobar) .foreground.container .text {
margin-inline: 9.5% 0;
}

.aside .foreground.container:has(> .image:first-child) .text {
margin-inline: 0 9.5%;
}
.aside:not(.promobar) .foreground.container:has(> .image:first-child) .text {
margin-inline: 0 9.5%;
}
}

/* ---- Carousel (Tablet Hinting) ---- */
Expand Down Expand Up @@ -351,6 +351,11 @@
justify-content: center;
}

@media (min-width: 600px) and (max-width: 1199px) {
.section.show-4-desktop {
padding-right: calc(var(--grid-margins-width));
}
}

@media (min-width: 1200px) {
.editorial-card .foreground .body-l {
Expand Down
Loading