[SR][Hub Hero][A11Y] Treat xs screen w/zoom as reduced motion by denlight · Pull Request #6177 · adobecom/milo

denlight · 2026-06-16T17:09:34Z

xs w/zoom screen treated as reduced motion
adjusted aria attributes

Resolves: MWPW-198654 | MWPW-198655 | MWPW-198651

Test URLs:

Before: https://main--milo--adobecom.aem.page/?martech=off
After: https://--milo--adobecom.aem.page/?martech=off

aem-code-sync · 2026-06-16T17:09:37Z

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

Re-sync branch

Commits

29d6951 ✅ (latest)
5d9181d ✅
88ad179 ✅
161c27f ✅
9c4dd27 ✅
b6de724 ✅
cc51e61 ✅
0ceaf04 ✅
828a924 ✅
dba8bce ✅
676d6ec ✅

rgclayton · 2026-06-16T18:35:24Z

+  .hub-hero-carousel-header > div,
+  .hub-hero-carousel-header > div > *,
+  .hub-hero-carousel-item {
+    animation: none !important;


Absolutely needed? Anyway around using !important?

zagi25 · 2026-06-17T09:31:19Z

 }

+/** extra small screens (320px = 640px at 200% zoom) — same static fallback as reduced-motion */
+@media (width <= 480px) {


If this is exactly the same as reduced motion, we should be able to combine it with
@media (prefers-reduced-motion: reduce) or (width <= 480px)
to avoid duplication.

zagi25 · 2026-06-17T09:41:28Z

When using Tab for navigation on tablet/mobile viewport, slides are not visually changed but VoiceOver announces the change.

Screen.Recording.2026-06-17.at.11.38.57.mov

overmyheadandbody

Approving, since it addresses critical Accessibility issues. However, I think the comments I've added deserve a follow-up story, to make this easier to maintain and reduce code footprint.

overmyheadandbody · 2026-06-17T09:30:31Z

+  .hub-hero-header,
+  .hub-hero-header > *,
+  .hub-hero-carousel,
+  .hub-hero-carousel-header,
+  .hub-hero-carousel-container,
+  .hub-hero-carousel-item,
+  .hub-hero-carousel-item-container {


How about

Suggested change

.hub-hero-header,

.hub-hero-header > *,

.hub-hero-carousel,

.hub-hero-carousel-header,

.hub-hero-carousel-container,

.hub-hero-carousel-item,

.hub-hero-carousel-item-container {

[class*="hub-hero-"],

[class*="hub-hero-"] * {

or something similar to streamline things for any future updates

I had it like that at first, but that would require to have an "!important" statement on "animation: none". So i had to convert it to specific ones

overmyheadandbody · 2026-06-17T09:32:43Z

  .hub-hero-image-grid-container-col:nth-child(1),
  .hub-hero-image-grid-container-col:nth-child(2),
  .hub-hero-image-grid-container-col:nth-child(3),
  .hub-hero-image-grid-container-col:nth-child(4),
  .hub-hero-image-grid-container-col:nth-child(5),
-  .hub-hero-image-grid-container-col:nth-child(5),
-  .hub-hero-carousel,
-  .hub-hero-carousel-header,
-  .hub-hero-carousel-header>div,
-  .hub-hero-carousel-header>div>*,
-  .hub-hero-carousel-item {
-    animation: none !important;
+  .hub-hero-carousel-item:nth-child(1),
+  .hub-hero-carousel-item:nth-child(2),
+  .hub-hero-carousel-item:nth-child(3),
+  .hub-hero-carousel-item:nth-child(4),
+  .hub-hero-carousel-item:nth-child(5) {
+    animation: none;
    transition: none;
    position: relative;
    --hub-hero-height: auto;
  }


This looks quite similar to the above suggestion of

[class*="hub-hero-"], [class*="hub-hero-"] *, {

The declarations are identical, so might as well use a more general rule. If specificity needs to be increased, it could be prefixed with a .hub-hero selector.

same as above

overmyheadandbody · 2026-06-17T09:34:45Z

+  .hub-hero-image-grid-container-col div:nth-child(2) {
+    animation: none;
+  }
+
+  .hub-hero-carousel-item:nth-child(1) .hub-hero-carousel-item-header,
+  .hub-hero-carousel-item:nth-child(1) .hub-hero-carousel-item-footer {
+    animation: none;
+  }
+
+  .hub-hero-image-grid-container-col:nth-child(3) div:nth-child(1),
+  .hub-hero-image-grid-container-col:nth-child(3) div:nth-child(2) {
+    animation: none;
+  }


Similar for these, an umbrella selector would be easier to follow and maintain.

same as above

overmyheadandbody · 2026-06-17T09:36:08Z

+  .hub-hero,
+  .hub-hero-header,
+  .hub-hero-header > *,
+  .hub-hero-carousel,
+  .hub-hero-carousel-header,
+  .hub-hero-carousel-container,
+  .hub-hero-carousel-item,
+  .hub-hero-carousel-item-container {
+    animation: none;
+    transition: none;
+    position: relative;
+    --hub-hero-height: auto;
+  }
+
+  .hub-hero-carousel-header > div,
+  .hub-hero-carousel-header > div > * {
+    animation: none;
+    position: relative;
+  }
+
+  .hub-hero-image-grid-container-col:nth-child(1),
+  .hub-hero-image-grid-container-col:nth-child(2),
+  .hub-hero-image-grid-container-col:nth-child(3),
+  .hub-hero-image-grid-container-col:nth-child(4),
+  .hub-hero-image-grid-container-col:nth-child(5),
+  .hub-hero-carousel-item:nth-child(1),
+  .hub-hero-carousel-item:nth-child(2),
+  .hub-hero-carousel-item:nth-child(3),
+  .hub-hero-carousel-item:nth-child(4),
+  .hub-hero-carousel-item:nth-child(5) {
+    animation: none;
+    transition: none;
+    position: relative;
+    --hub-hero-height: auto;
+  }
+
+  .hub-hero-image-grid-container-col div:nth-child(2) {
+    animation: none;
+  }
+
+  .hub-hero-carousel-item:nth-child(1) .hub-hero-carousel-item-header,
+  .hub-hero-carousel-item:nth-child(1) .hub-hero-carousel-item-footer {
+    animation: none;
+  }
+
+  .hub-hero-image-grid-container-col:nth-child(3) div:nth-child(1),
+  .hub-hero-image-grid-container-col:nth-child(3) div:nth-child(2) {
+    animation: none;
+  }


The more general selector would reduce the code footprint here as well.

avoiding !important as well

overmyheadandbody · 2026-06-17T09:38:17Z

@@ -1452,8 +1648,22 @@
    .hub-hero {
      height: auto;
    }
-    .hub-hero-carousel-item {
-      animation: none !important;
+    .hub-hero-carousel-item,
+    .hub-hero-carousel-item-container {
+      animation: none;
+    }
+
+    .hub-hero-carousel-item:nth-child(1),
+    .hub-hero-carousel-item:nth-child(2),
+    .hub-hero-carousel-item:nth-child(3),
+    .hub-hero-carousel-item:nth-child(4),
+    .hub-hero-carousel-item:nth-child(5) {
+      animation: none;
+    }
+
+    .hub-hero-carousel-item:nth-child(1) .hub-hero-carousel-item-header,
+    .hub-hero-carousel-item:nth-child(1) .hub-hero-carousel-item-footer {
+      animation: none;


Similar comment once more, it's likely these can be summarized to a more general selector, it'd save a few dozen lines of code and would make maintenance easier.

avoiding !Important

zagi25 · 2026-06-17T09:51:52Z

Also on the proposed zoom, first card is larger then the rest

@overmyheadandbody , should this and my previous comment for 'Tab' also be a part of the follow up ticket or should they be addressed now ?

overmyheadandbody · 2026-06-17T12:00:18Z

@zagi25 - good catch! Since this does solve some a11y issues and we're under a bit of time crunch, I'd vote we flag as a different issue and get back with a fix ASAP.

robert-bogos

Approving for a11y, but I see a few issues on firefox desktop:

there's a jamming happening to the scroll when you reach the .hub-hero-carousel

and a missing side padding issue for the logos

and on mobile firefox:

logos moving on scroll is not working

there is this big white space in the middle of the grid. Maybe one card should've been there?

P.S. tested on stage with ?milolibs=sr-hub-hero-a11y-fix

biljana-cvijanovic · 2026-06-17T15:52:59Z

@denlight The comment in this ticket MWPW-198651 should be addressed before the PR is merged

github-actions · 2026-06-18T04:21:55Z

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

nishantka · 2026-06-19T04:21:50Z

@denlight Please check below PRs to 'sr-hub-hero-a11y-fix' for the issues reported by @biljana-cvijanovic

#6197
#6198

biljana-cvijanovic

Validated. The PR is now ready to be merged.

github-actions · 2026-06-20T04:04:32Z

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.

github-actions Bot added the zero-impact label Jun 16, 2026

rgclayton reviewed Jun 16, 2026

View reviewed changes

rgclayton approved these changes Jun 16, 2026

View reviewed changes

aem-code-sync Bot temporarily deployed to sr-hub-hero-a11y-fix June 17, 2026 05:49 Inactive

denlight requested a review from rgclayton June 17, 2026 05:49

aem-code-sync Bot temporarily deployed to sr-hub-hero-a11y-fix June 17, 2026 06:01 Inactive

zagi25 reviewed Jun 17, 2026

View reviewed changes

overmyheadandbody approved these changes Jun 17, 2026

View reviewed changes

nishantka approved these changes Jun 17, 2026

View reviewed changes

narcis-radu added the Site Redesign label Jun 17, 2026

narcis-radu temporarily deployed to milo_pr_merge June 17, 2026 10:29 — with GitHub Actions Inactive

zagi25 approved these changes Jun 17, 2026

View reviewed changes

Denys Fedotov added 4 commits June 17, 2026 07:05

[SR][Hub Hero][A11Y] Treat xs screen w/zoom as reduced motion

676d6ec

[SR][Hub Hero][A11Y] removed important

dba8bce

[SR][Hub Hero][A11Y] reduced motion fixes

828a924

[SR][Hub Hero][A11Y] combined css rules

0ceaf04

denlight force-pushed the sr-hub-hero-a11y-fix branch from 770b148 to 0ceaf04 Compare June 17, 2026 13:05

aem-code-sync Bot temporarily deployed to sr-hub-hero-a11y-fix June 17, 2026 13:05 Inactive

denlight requested review from nishantka, overmyheadandbody and zagi25 June 17, 2026 13:05

zagi25 approved these changes Jun 17, 2026

View reviewed changes

robert-bogos approved these changes Jun 17, 2026

View reviewed changes

overmyheadandbody approved these changes Jun 17, 2026

View reviewed changes

[SR][Hub Hero][A11Y] aria labels

cc51e61

aem-code-sync Bot temporarily deployed to sr-hub-hero-a11y-fix June 17, 2026 14:00 Inactive

Denys Fedotov added 2 commits June 17, 2026 10:31

[SR][Hub Hero][A11Y] aria labels

b6de724

[SR][Hub Hero][A11Y] firefox adjustments

9c4dd27

aem-code-sync Bot temporarily deployed to sr-hub-hero-a11y-fix June 17, 2026 17:58 Inactive

nishantka added 2 commits June 18, 2026 18:31

Add fix for a11y

161c27f

Add z-index on focused cards to display

88ad179

nishantka mentioned this pull request Jun 18, 2026

Add z-index on focused cards in hub hero #6198

Merged

Add fix for a11y hub hero (#6197)

5d9181d

aem-code-sync Bot temporarily deployed to sr-hub-hero-a11y-fix June 19, 2026 08:54 Inactive

Add z-index on focused cards in hub hero (#6198)

29d6951

biljana-cvijanovic approved these changes Jun 19, 2026

View reviewed changes

Conversation

denlight commented Jun 16, 2026 • edited by github-actions Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

aem-code-sync Bot commented Jun 16, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

zagi25 commented Jun 17, 2026

Uh oh!

overmyheadandbody left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

zagi25 commented Jun 17, 2026

Uh oh!

overmyheadandbody commented Jun 17, 2026

Uh oh!

robert-bogos left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Approving for a11y, but I see a few issues on firefox desktop:

and on mobile firefox:

Uh oh!

biljana-cvijanovic commented Jun 17, 2026

Uh oh!

github-actions Bot commented Jun 18, 2026

Uh oh!

nishantka commented Jun 19, 2026

Uh oh!

biljana-cvijanovic left a comment

Choose a reason for hiding this comment

Uh oh!

github-actions Bot commented Jun 20, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

8 participants

denlight commented Jun 16, 2026 •

edited by github-actions Bot

Loading

aem-code-sync Bot commented Jun 16, 2026 •

edited

Loading

robert-bogos left a comment •

edited

Loading