Unverified Commit 4ae7ef90 authored by lauriii's avatar lauriii

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 @@
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;
margin-top: 0;
transform: translate(-50%, 0);
......
......@@ -150,7 +150,7 @@ body:not(.is-always-mobile-nav) {
border-left: solid 10px transparent;
}
&.is-active {
&.is-active-menu-parent {
visibility: visible;
margin-block-start: 0;
transform: translate(-50%, 0);
......
......@@ -291,7 +291,7 @@
opacity: 0
}
.primary-nav__menu--level-2.is-active {
.primary-nav__menu--level-2.is-active-menu-parent {
visibility: visible;
max-height: none;
margin-top: 1.6875rem;
......
......@@ -156,7 +156,7 @@
opacity: 0;
border-inline-start: solid var(--sp) var(--color--blue-50);
&.is-active {
&.is-active-menu-parent {
visibility: visible;
max-height: none;
margin-block-start: var(--sp1-5);
......
......@@ -28,20 +28,20 @@
'false',
);
el.querySelector('.primary-nav__menu--level-2').classList.remove(
'is-active',
'is-active-menu-parent',
);
});
}
button.setAttribute('aria-expanded', 'true');
topLevelMenuITem
.querySelector('.primary-nav__menu--level-2')
.classList.add('is-active');
.classList.add('is-active-menu-parent');
} else {
button.setAttribute('aria-expanded', 'false');
topLevelMenuITem.classList.remove('is-touch-event');
topLevelMenuITem
.querySelector('.primary-nav__menu--level-2')
.classList.remove('is-active');
.classList.remove('is-active-menu-parent');
}
}
......@@ -87,7 +87,12 @@
});
el.addEventListener('mouseout', () => {
if (isDesktopNav()) {
if (
isDesktopNav() &&
!document.activeElement.matches(
'[aria-expanded="true"], .is-active-menu-parent *',
)
) {
toggleSubNav(el, false);
}
});
......
......@@ -18,16 +18,16 @@
if (isDesktopNav()) {
secondLevelNavMenus.forEach(function (el) {
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');
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 {
button.setAttribute('aria-expanded', 'false');
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 @@
}
});
el.addEventListener('mouseout', function () {
if (isDesktopNav()) {
if (isDesktopNav() && !document.activeElement.matches('[aria-expanded="true"], .is-active-menu-parent *')) {
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