Mwpw 169999 header obscures content

[zagi25]

Issue: When navigating a page by using Tab or Shift + Tab , focused element that is hidden by gnav, sticky element, cookie banner etc. remains hidden.

• Element gets scrolled to the middle of the screen when focused by Tab or Shift + Tab
• Cookie banner get's position sticky, when there is visible focus on the page and focus is not inside cookie banner, so that when page is scrolled to the end using Tab all elements in the footer can be focused and are not covered by the cookie banner ( This was done with the assumption that if the cookie banner is present it is always the last element in the body )

I tried setting scroll-padding-top and scroll-padding-bottom to the exact height of the elements that are hiding other content, but this requires JS and it will bring unnecessary complexity trying to cover all the use cases.

Resolves: MWPW-169999 , MWPW-170165

Test URLs:

• Before: https://main--milo--adobecom.aem.page/drafts/ratko/mwpw-169999-header-obscures-content/dev?martech=off
• After: https://mwpw-169999-header-obscures-content--milo--adobecom.aem.page/drafts/ratko/mwpw-169999-header-obscures-content/dev?martech=off

Homepage URLs:

• Before: https://main--homepage--adobecom.aem.page/homepage/index-loggedout
• After: https://main--homepage--adobecom.aem.page/homepage/index-loggedout?milolibs=MWPW-169999-header-obscures-content

CC URLs:

• Before: https://main--cc--adobecom.aem.page/creativecloud
• After: https://main--cc--adobecom.aem.page/creativecloud?milolibs=MWPW-169999-header-obscures-content

QE NOTE: Please close the MWPW-170165 with the reason fixed by MWPW-169999 if this also resolves the issue described in that ticket.

[aem-code-sync]

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

• 3828f4a ✅ (latest)
• d539c10 ✅
• dd66ed7 ✅
• e3ef19d ✅
• 4c7f8c5 ✅
• 4eb5a93 ✅
• bc7deb8 ✅
• 58b5115 ✅

[aem-code-sync]

	Page	Scores	Audits	Google
📱	/drafts/ratko/mwpw-169999-header-obscures-content/dev?martech=off
🖥️	/drafts/ratko/mwpw-169999-header-obscures-content/dev?martech=off

[github-actions]

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.

[zagi25]

@mokimo I pushed solution using JS.

• Value of scroll padding is taken from sticky sections / cookie banner height
• Values are updated on resize, sticky section closing and hiding of the cookie banner

I left some comments for easier review, will remove them later. I added the code to accessibility file, if you think it should be added somewhere else let me know (same goes for calling of the function)

[overmyheadandbody]

I quite like this approach and it has worked well during my testing. Just a few small nits, but looking great otherwise and much more straightforward than the previous implementation 👌

[overmyheadandbody]

I'm still not getting what this achieves. I've removed it entirely and things seem to continue working. What use-case is this trying to address?

[zagi25]

Don't know if this will ever happen, but without z-index if user scrolls while focus is in footer

[mokimo]

The experience is a lot better when tabbing, glad this went through a few iterations and we really managed to improve it!