Unverified Commit 11af82a6 authored by lauriii's avatar lauriii
Browse files

Issue #3190120 by mherchel, KapilV, pragati_kanade, djsagar, andy-blum,...

Issue #3190120 by mherchel, KapilV, pragati_kanade, djsagar, andy-blum, bnjmnm, andrewmacpherson, Abhijith S, KarinG, Gauravmahlawat, benjifisher, AndyF, katannshaw: Olivero: Focused level-2 nav items should always be in viewport during keyboard navigation
parent fac878ce
......@@ -42,6 +42,7 @@
--content-left: 90px;
--container-padding: var(--sp);
--container-padding-nav: var(--sp2);
--site-header-height-wide: var(--sp10);
/* Drupal administrative toolbar heights and width. */
--toolbar-height: 39px;
......
......@@ -34,7 +34,7 @@
@media (--nav) {
min-width: calc((2 * var(--grid-col-width--nav)) + (2 * var(--grid-gap--nav)) + var(--container-padding-nav));
height: var(--sp10);
height: var(--site-header-height-wide);
margin-inline-start: calc(-1 * var(--container-padding-nav));
padding-block: 0;
padding-inline-start: var(--container-padding-nav);
......
......@@ -193,7 +193,8 @@ html:not(.js) {
* Styles for traditional dropdown primary navigation when JS is disabled.
*/
}
html:not(.js) body:not(.is-always-mobile-nav) .primary-nav__menu-item--level-1:hover .primary-nav__menu--level-2 {
html:not(.js) body:not(.is-always-mobile-nav) .primary-nav__menu-item--level-1:hover .primary-nav__menu--level-2,
html:not(.js) body:not(.is-always-mobile-nav) .primary-nav__menu-item--level-1:hover .primary-nav__menu-🥕 {
visibility: visible;
transform: translate(-50%, 0);
opacity: 1;
......@@ -205,7 +206,8 @@ html:not(.js) {
* because it will break IE11 and earlier versions of MS Edge.
*/
}
html:not(.js) body:not(.is-always-mobile-nav) .primary-nav__menu-item--level-1:focus-within .primary-nav__menu--level-2 {
html:not(.js) body:not(.is-always-mobile-nav) .primary-nav__menu-item--level-1:focus-within .primary-nav__menu--level-2,
html:not(.js) body:not(.is-always-mobile-nav) .primary-nav__menu-item--level-1:focus-within .primary-nav__menu-🥕 {
visibility: visible;
transform: translate(-50%, 0);
opacity: 1;
......
......@@ -125,7 +125,8 @@ html:not(.js) {
*/
& body:not(.is-always-mobile-nav) {
& .primary-nav__menu-item--level-1:hover {
& .primary-nav__menu--level-2 {
& .primary-nav__menu--level-2,
& .primary-nav__menu-🥕 {
visibility: visible;
transform: translate(-50%, 0);
opacity: 1;
......@@ -137,7 +138,8 @@ html:not(.js) {
* because it will break IE11 and earlier versions of MS Edge.
*/
& .primary-nav__menu-item--level-1:focus-within {
& .primary-nav__menu--level-2 {
& .primary-nav__menu--level-2,
& .primary-nav__menu-🥕 {
visibility: visible;
transform: translate(-50%, 0);
opacity: 1;
......
......@@ -184,14 +184,16 @@
body:not(.is-always-mobile-nav) .primary-nav__menu--level-2 {
position: absolute;
z-index: 105; /* Appear above search container. */
/* stylelint-disable csstools/use-logical */
top: calc(100% - 0.5625rem);
left: 50%;
/* stylelint-enable csstools/use-logical */
visibility: hidden;
overflow: visible;
overflow: auto;
width: 15.625rem;
max-height: none;
/**
* Ensure that long level-2 menus will never overflow viewport (focused
* elements should always be in viewport per accessibility guidelines).
*/
max-height: calc(100vh - 12.375rem);
margin-top: 0;
padding-top: 3.375rem;
padding-bottom: 3.375rem;
......@@ -206,24 +208,7 @@
border-radius: 0 0 2px 2px;
background: #fff;
box-shadow: 0 1px 36px rgba(0, 0, 0, 0.08)
/* Arrow */
}
body:not(.is-always-mobile-nav) .primary-nav__menu--level-2:after {
position: absolute;
/* stylelint-disable csstools/use-logical */
bottom: calc(100% + 0.5625rem);
left: 50%;
/* stylelint-enable csstools/use-logical */
width: 0;
height: 0;
content: "";
transform: translateX(-50%);
/* Intentionally not using CSS logical properties. */
border-right: solid 10px transparent;
border-bottom: solid 10px #2494db;
border-left: solid 10px transparent;
}
}
body:not(.is-always-mobile-nav) .primary-nav__menu--level-2.is-active-menu-parent {
visibility: visible;
......@@ -265,18 +250,87 @@
transform-origin: left;
border-top-width: 3px;
}
body:not(.is-always-mobile-nav) {
/**
* Arrow is placed outside of submenu because the submenu has the
* `overflow: hidden` CSS rule applied.
*/
}
body:not(.is-always-mobile-nav) .primary-nav__menu-🥕 {
position: absolute;
z-index: 105; /* Match level 2 menus. */
top: calc(100% - 1.125rem);
left: 50%;
visibility: hidden;
width: 0;
height: 0;
transform: translate(-50%, -1.25rem);
opacity: 0;
/* Intentionally not using CSS logical properties. */
border-right: solid 10px transparent;
border-bottom: solid 10px #2494db;
border-left: solid 10px transparent
}
body:not(.is-always-mobile-nav) .primary-nav__menu-🥕.is-active-menu-parent {
visibility: visible;
transform: translate(-50%, 0);
opacity: 1;
}
body:not(.is-always-mobile-nav) {
/**
* When ensuring that long menus don't overflow viewport, we can give a
* little extra room when the toolbar is fixed (and is shorter).
*/
}
body:not(.is-always-mobile-nav) .js-fixed .primary-nav__menu--level-2 {
max-height: calc(100vh - 7.875rem);
}
}
/*
* Only apply transition styles to menu when JS is loaded. This
* works around https://bugs.chromium.org/p/chromium/issues/detail?id=332189
* Take into account Drupal's admin toolbars when ensuring that long level-2
* menus will never overflow viewport.
*/
@media (min-width: 75rem) {
body:not(.is-always-mobile-nav) {
/* Toolbar is fixed, and tray is vertical or toolbar is horizontal and tray is closed. */
}
body:not(.is-always-mobile-nav).toolbar-vertical .primary-nav__menu--level-2, body:not(.is-always-mobile-nav).toolbar-horizontal.toolbar-fixed .primary-nav__menu--level-2 {
max-height: calc(100vh - 14.8125rem);
}
body:not(.is-always-mobile-nav).toolbar-vertical .js-fixed .primary-nav__menu--level-2, body:not(.is-always-mobile-nav).toolbar-horizontal.toolbar-fixed .js-fixed .primary-nav__menu--level-2 {
max-height: calc(100vh - 10.3125rem);
}
body:not(.is-always-mobile-nav) {
/* Toolbar is horizontal fixed, and tray is open. */
}
body:not(.is-always-mobile-nav).toolbar-horizontal.toolbar-fixed.toolbar-tray-open .primary-nav__menu--level-2 {
max-height: calc(100vh - 17.3125rem);
}
html.js body:not(.is-always-mobile-nav) .primary-nav__menu--level-2 {
transition: visibility 0.2s, transform 0.2s, opacity 0.2s
body:not(.is-always-mobile-nav).toolbar-horizontal.toolbar-fixed.toolbar-tray-open .js-fixed .primary-nav__menu--level-2 {
max-height: calc(100vh - 12.8125rem);
}
}
/*
* Only apply transition styles to menu when JS is loaded. This
* works around https://bugs.chromium.org/p/chromium/issues/detail?id=332189
*/
@media (min-width: 75rem) {
html.js body:not(.is-always-mobile-nav) .primary-nav__menu--level-2,
html.js body:not(.is-always-mobile-nav) .primary-nav__menu-🥕 {
transition: visibility 0.2s, transform 0.2s, opacity 0.2s;
}
}
@media (min-width: 75rem) {
......
......@@ -108,14 +108,16 @@ body:not(.is-always-mobile-nav) {
& .primary-nav__menu--level-2 {
position: absolute;
z-index: 105; /* Appear above search container. */
/* stylelint-disable csstools/use-logical */
top: calc(100% - (0.5 * var(--sp)));
left: 50%;
/* stylelint-enable csstools/use-logical */
visibility: hidden;
overflow: visible;
overflow: auto;
width: 250px;
max-height: none;
/**
* Ensure that long level-2 menus will never overflow viewport (focused
* elements should always be in viewport per accessibility guidelines).
*/
max-height: calc(100vh - var(--site-header-height-wide) - var(--sp));
margin-block-start: 0;
margin-inline-start: 0;
padding-block: calc(3 * var(--sp));
......@@ -133,23 +135,6 @@ body:not(.is-always-mobile-nav) {
background: var(--color--white);
box-shadow: 0 1px 36px rgba(0, 0, 0, 0.08);
/* Arrow */
&:after {
position: absolute;
/* stylelint-disable csstools/use-logical */
bottom: calc(100% + (0.5 * var(--sp)));
left: 50%;
/* stylelint-enable csstools/use-logical */
width: 0;
height: 0;
content: "";
transform: translateX(-50%);
/* Intentionally not using CSS logical properties. */
border-right: solid 10px transparent;
border-bottom: solid 10px var(--color--blue-50);
border-left: solid 10px transparent;
}
&.is-active-menu-parent {
visibility: visible;
margin-block-start: 0;
......@@ -176,6 +161,71 @@ body:not(.is-always-mobile-nav) {
}
}
}
/**
* Arrow is placed outside of submenu because the submenu has the
* `overflow: hidden` CSS rule applied.
*/
& .primary-nav__menu-🥕 {
position: absolute;
z-index: 105; /* Match level 2 menus. */
top: calc(100% - var(--sp));
left: 50%;
visibility: hidden;
width: 0;
height: 0;
transform: translate(-50%, -20px);
opacity: 0;
/* Intentionally not using CSS logical properties. */
border-right: solid 10px transparent;
border-bottom: solid 10px var(--color--blue-50);
border-left: solid 10px transparent;
&.is-active-menu-parent {
visibility: visible;
transform: translate(-50%, 0);
opacity: 1;
}
}
/**
* When ensuring that long menus don't overflow viewport, we can give a
* little extra room when the toolbar is fixed (and is shorter).
*/
& .js-fixed .primary-nav__menu--level-2 {
max-height: calc(100vh - var(--site-header-height-wide) - var(--sp) + var(--sp4));
}
}
}
/*
* Take into account Drupal's admin toolbars when ensuring that long level-2
* menus will never overflow viewport.
*/
@media (--nav) {
body:not(.is-always-mobile-nav) {
/* Toolbar is fixed, and tray is vertical or toolbar is horizontal and tray is closed. */
&.toolbar-vertical,
&.toolbar-horizontal.toolbar-fixed {
& .primary-nav__menu--level-2 {
max-height: calc(100vh - var(--site-header-height-wide) - var(--sp) - var(--toolbar-height));
}
& .js-fixed .primary-nav__menu--level-2 {
max-height: calc(100vh - var(--site-header-height-wide) - var(--sp) - var(--toolbar-height) + var(--sp4));
}
}
/* Toolbar is horizontal fixed, and tray is open. */
&.toolbar-horizontal.toolbar-fixed.toolbar-tray-open {
& .primary-nav__menu--level-2 {
max-height: calc(100vh - var(--site-header-height-wide) - var(--sp) - var(--toolbar-height) - var(--toolbar-tray-height));
}
& .js-fixed .primary-nav__menu--level-2 {
max-height: calc(100vh - var(--site-header-height-wide) - var(--sp) - var(--toolbar-height) - var(--toolbar-tray-height) + var(--sp4));
}
}
}
}
......@@ -183,9 +233,12 @@ body:not(.is-always-mobile-nav) {
* Only apply transition styles to menu when JS is loaded. This
* works around https://bugs.chromium.org/p/chromium/issues/detail?id=332189
*/
html.js body:not(.is-always-mobile-nav) .primary-nav__menu--level-2 {
html.js body:not(.is-always-mobile-nav) {
@media (--nav) {
transition: visibility 0.2s, transform 0.2s, opacity 0.2s;
& .primary-nav__menu--level-2,
& .primary-nav__menu-🥕 {
transition: visibility 0.2s, transform 0.2s, opacity 0.2s;
}
}
}
......
......@@ -10,7 +10,7 @@
@media (--nav) {
/* Necessary to keep the content from jumping up when header transitions to fixed. */
min-height: var(--sp10);
min-height: var(--site-header-height-wide);
border-block-end: solid 1px transparent; /* Will show in Windows high contrast mode. */
}
}
......
......@@ -30,18 +30,27 @@
el.querySelector('.primary-nav__menu--level-2').classList.remove(
'is-active-menu-parent',
);
el.querySelector('.primary-nav__menu-🥕').classList.remove(
'is-active-menu-parent',
);
});
}
button.setAttribute('aria-expanded', 'true');
topLevelMenuItem
.querySelector('.primary-nav__menu--level-2')
.classList.add('is-active-menu-parent');
topLevelMenuItem
.querySelector('.primary-nav__menu-🥕')
.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-menu-parent');
topLevelMenuItem
.querySelector('.primary-nav__menu-🥕')
.classList.remove('is-active-menu-parent');
}
}
......
......@@ -19,15 +19,18 @@
secondLevelNavMenus.forEach(function (el) {
el.querySelector(buttonSelector).setAttribute('aria-expanded', 'false');
el.querySelector('.primary-nav__menu--level-2').classList.remove('is-active-menu-parent');
el.querySelector('.primary-nav__menu-🥕').classList.remove('is-active-menu-parent');
});
}
button.setAttribute('aria-expanded', 'true');
topLevelMenuItem.querySelector('.primary-nav__menu--level-2').classList.add('is-active-menu-parent');
topLevelMenuItem.querySelector('.primary-nav__menu-🥕').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-menu-parent');
topLevelMenuItem.querySelector('.primary-nav__menu-🥕').classList.remove('is-active-menu-parent');
}
}
......
......@@ -33,6 +33,15 @@
{% set primary_nav_level = 'primary-nav__menu--level-' ~ (menu_level + 1) %}
{% import _self as menus %}
{% if items %}
{#
Place the menu arrow (caret) outside of the submenu because the submenu
has the overflow:hidden CSS rule applied.
#}
{% if menu_level == 1 %}
<span class="primary-nav__menu-🥕"></span>
{% endif %}
<ul {{ attributes.addClass('primary-nav__menu', primary_nav_level) }}>
{% set attributes = attributes.removeClass(primary_nav_level) %}
{% for item in items %}
......
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