Header menu should not close if menu item has focus

I mentioned during #3208186: Drupal Usability Meeting 2021-04-23 while we discussed the implementation in #3190120: Olivero: Focused level-2 nav items should always be in viewport during keyboard navigation. that I thought there was a way to essentially stop the browser from scrolling when the menu is open.

The method I have used to accomplish this in the past is, by applying overflow: hidden to the html tag when the menu is open, this temporarily removes the browsers scroll bars and so freezes the position of the browser. This might be possible using CSS selectors, I couldn't find the exact code I had used in the past.

The result of this would be that when the user has the menu open, if they scroll to the bottom of the menu, their browser would not continue to scroll the page and so they would not inadvertently close the menu.

This is fixed, Tested patch #5, If the menu item has focus then header is not collapsing.

Added after patch screen recording.

Moving to RTBC

If we scroll the window while menu item has focus then header is not closing, which is perfect as per issue. but if try this once then move focus to page title or any other component/element of the page and we scroll then header is not closing itself. it's an issue. this should be fixed.

Moving to NW.

Thanks @mherchel for the patch. Providing updated patch to resolve issue mentioned in #7 by @Gauravmahlawat

A screencast is attached for reference. Kindly review the attached patch.

Thanks!

As an accessibility issue, this is at least normal and possibly major.

Verified and tested patch #8.
Patch applied successfully and looks good to me.

Testing Steps:
# Goto: Appearance:- Set Olivero theme
# Create sub-menu under any main navigation menu
# Tab into the primary menu and open a submenu
# Scroll down the page.
# Note that the header menu will collapse.

Expected Results:
# Header menu should not collapse when the user evaluating accessibility while pressing the tab key.

Actual Results:
# Header menu is collapsing when the user evaluating accessibility while pressing the tab key.

Please refer attached videos.
Looks good to me.
Can be a move to RTBC.

Fixed the patch for failing test and retaining the behaviour of header being still visible in case there is focus on any of its children. Added a screenshot to show the behaviour after the patch.

Added a wrong patch. Updating with the right patch and interdiff. The comment and the screencast is same as #12.

#13 Patch applied. Please check the report video.
Report
1. patch has a fixed menu if focuses on the submenu.
2. Menu forgot his basic behavior after testing 1 point.
3. When I click on the left side menu toggle button. the basic behavior comes back.

In Drupal 10.1.x Header menu is not closing if menu item has focus. It is working fine as expected.
We can move this bug to RTBC.

The recording in #20 is deceptive. While that's the behavior we're aiming for, we need it to occur automatically. If a user hasn't already scrolled down and opened the header, this behavior does not occur. Patch #13 is pretty out-dated at this point and will need a reroll.

Tried to re-roll for 10.1.x.
Please review.

I have applied patch #22 on drupal 10.1.x version. Patch failed.

Checking patch core/themes/olivero/js/navigation-utils.js...
error: while searching for:
      entries.forEach((entry) => {
        // Firefox doesn't seem to support entry.isIntersecting properly,
        // so we check the intersectionRatio.
        fixableElements.forEach((el) =>
          el.classList.toggle('is-fixed', entry.intersectionRatio < 1),
        );

error: patch failed: core/themes/olivero/js/navigation-utils.js:128
error: core/themes/olivero/js/navigation-utils.js: patch does not apply

Yes, that could be a failure of a few SC https://www.w3.org/WAI/WCAG21/Techniques/failures/F55

Just tagging it for 2.1.1.

Updating attributions.

Still needs a test case from what I can see.

The Olivero theme was approved for removal in #3590816: [policy, no patch] Deprecate Olivero and move to contrib.

This is Postponed. The status is set according to two policies. The Remove a core extension and move it to a contributed project and the Extensions approved for removal policies.

The deprecation work is in #3595082: [meta] Tasks to deprecate the Olivero theme and the removal work in #3595085: [meta] Tasks to remove the Olivero theme.