Unverified Commit 4ae7ef90 authored by lauriii's avatar lauriii
Browse files

Issue #3192903 by mherchel, Gauravmahlawat, andrewmacpherson: Mouseout event...

Issue #3192903 by mherchel, Gauravmahlawat, andrewmacpherson: Mouseout event should not close navigation sub-menu if focus is inside the sub-menu
parent b2686e3d
...@@ -225,7 +225,7 @@ ...@@ -225,7 +225,7 @@
border-left: solid 10px transparent; border-left: solid 10px transparent;
} }
body:not(.is-always-mobile-nav) .primary-nav__menu--level-2.is-active { body:not(.is-always-mobile-nav) .primary-nav__menu--level-2.is-active-menu-parent {
visibility: visible; visibility: visible;
margin-top: 0; margin-top: 0;
transform: translate(-50%, 0); transform: translate(-50%, 0);
......
...@@ -150,7 +150,7 @@ body:not(.is-always-mobile-nav) { ...@@ -150,7 +150,7 @@ body:not(.is-always-mobile-nav) {
border-left: solid 10px transparent; border-left: solid 10px transparent;
} }
&.is-active { &.is-active-menu-parent {
visibility: visible; visibility: visible;
margin-block-start: 0; margin-block-start: 0;
transform: translate(-50%, 0); transform: translate(-50%, 0);
......
...@@ -291,7 +291,7 @@ ...@@ -291,7 +291,7 @@
opacity: 0 opacity: 0
} }
.primary-nav__menu--level-2.is-active { .primary-nav__menu--level-2.is-active-menu-parent {
visibility: visible; visibility: visible;
max-height: none; max-height: none;
margin-top: 1.6875rem; margin-top: 1.6875rem;
......
...@@ -156,7 +156,7 @@ ...@@ -156,7 +156,7 @@
opacity: 0; opacity: 0;
border-inline-start: solid var(--sp) var(--color--blue-50); border-inline-start: solid var(--sp) var(--color--blue-50);
&.is-active { &.is-active-menu-parent {
visibility: visible; visibility: visible;
max-height: none; max-height: none;
margin-block-start: var(--sp1-5); margin-block-start: var(--sp1-5);
......
...@@ -28,20 +28,20 @@ ...@@ -28,20 +28,20 @@
'false', 'false',
); );
el.querySelector('.primary-nav__menu--level-2').classList.remove( el.querySelector('.primary-nav__menu--level-2').classList.remove(
'is-active', 'is-active-menu-parent',
); );
}); });
} }
button.setAttribute('aria-expanded', 'true'); button.setAttribute('aria-expanded', 'true');
topLevelMenuITem topLevelMenuITem
.querySelector('.primary-nav__menu--level-2') .querySelector('.primary-nav__menu--level-2')
.classList.add('is-active'); .classList.add('is-active-menu-parent');
} else { } else {
button.setAttribute('aria-expanded', 'false'); button.setAttribute('aria-expanded', 'false');
topLevelMenuITem.classList.remove('is-touch-event'); topLevelMenuITem.classList.remove('is-touch-event');
topLevelMenuITem topLevelMenuITem
.querySelector('.primary-nav__menu--level-2') .querySelector('.primary-nav__menu--level-2')
.classList.remove('is-active'); .classList.remove('is-active-menu-parent');
} }
} }
...@@ -87,7 +87,12 @@ ...@@ -87,7 +87,12 @@
}); });
el.addEventListener('mouseout', () => { el.addEventListener('mouseout', () => {
if (isDesktopNav()) { if (
isDesktopNav() &&
!document.activeElement.matches(
'[aria-expanded="true"], .is-active-menu-parent *',
)
) {
toggleSubNav(el, false); toggleSubNav(el, false);
} }
}); });
......
...@@ -18,16 +18,16 @@ ...@@ -18,16 +18,16 @@
if (isDesktopNav()) { if (isDesktopNav()) {
secondLevelNavMenus.forEach(function (el) { secondLevelNavMenus.forEach(function (el) {
el.querySelector(buttonSelector).setAttribute('aria-expanded', 'false'); el.querySelector(buttonSelector).setAttribute('aria-expanded', 'false');
el.querySelector('.primary-nav__menu--level-2').classList.remove('is-active'); el.querySelector('.primary-nav__menu--level-2').classList.remove('is-active-menu-parent');
}); });
} }
button.setAttribute('aria-expanded', 'true'); button.setAttribute('aria-expanded', 'true');
topLevelMenuITem.querySelector('.primary-nav__menu--level-2').classList.add('is-active'); topLevelMenuITem.querySelector('.primary-nav__menu--level-2').classList.add('is-active-menu-parent');
} else { } else {
button.setAttribute('aria-expanded', 'false'); button.setAttribute('aria-expanded', 'false');
topLevelMenuITem.classList.remove('is-touch-event'); topLevelMenuITem.classList.remove('is-touch-event');
topLevelMenuITem.querySelector('.primary-nav__menu--level-2').classList.remove('is-active'); topLevelMenuITem.querySelector('.primary-nav__menu--level-2').classList.remove('is-active-menu-parent');
} }
} }
...@@ -56,7 +56,7 @@ ...@@ -56,7 +56,7 @@
} }
}); });
el.addEventListener('mouseout', function () { el.addEventListener('mouseout', function () {
if (isDesktopNav()) { if (isDesktopNav() && !document.activeElement.matches('[aria-expanded="true"], .is-active-menu-parent *')) {
toggleSubNav(el, false); toggleSubNav(el, false);
} }
}); });
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment