From 21e352489f464afa3249333f254c57498e6b0e6b Mon Sep 17 00:00:00 2001 From: Syb <133873665+cogniSyb@users.noreply.github.com> Date: Mon, 27 Nov 2023 11:37:17 +0100 Subject: [PATCH] Inpage navigation is in reversed order on Firefox #173 (#178) * fix Firefox issue with sorting * fix naming issues * refactor focus state, button styles * fix overlap issue --- .../v2-inpage-navigation.css | 54 ++++++++++--------- .../v2-inpage-navigation.js | 12 ++--- scripts/scripts.js | 11 ++-- styles/styles.css | 11 ++++ 4 files changed, 49 insertions(+), 39 deletions(-) diff --git a/blocks/v2-inpage-navigation/v2-inpage-navigation.css b/blocks/v2-inpage-navigation/v2-inpage-navigation.css index 20fc65f85..a7ae9668d 100644 --- a/blocks/v2-inpage-navigation/v2-inpage-navigation.css +++ b/blocks/v2-inpage-navigation/v2-inpage-navigation.css @@ -11,7 +11,7 @@ position: sticky; top: var(--nav-height); width: 100%; - z-index: 2; + z-index: 99; } .v2-inpage-navigation__wrapper { @@ -51,7 +51,7 @@ .v2-inpage-navigation__item button, .v2-inpage-navigation__selected-item-wrapper { background: none; - border: 0; + border: 2px solid transparent; color: var(--c-primary-black); cursor: pointer; display: block; @@ -59,8 +59,11 @@ font-size: var(--body-2-font-size); line-height: var(--body-2-line-height); margin: 0; - padding: 14px 24px; + padding: 10px 20px; width: 100%; + transition: background-color var(--duration-small) var(--easing-standard), + color var(--duration-small) var(--easing-standard), + border-color var(--duration-small) var(--easing-standard); } /* stylelint-disable-next-line no-descending-specificity */ @@ -75,6 +78,14 @@ background-color: #f1f1f1; } +.v2-inpage-navigation__item button:focus { + outline: 0; +} + +.v2-inpage-navigation__item button:focus-visible { + border-color: var(--border-focus); +} + /* stylelint-disable-next-line no-descending-specificity */ .v2-inpage-navigation__item button { max-width: none; @@ -109,25 +120,10 @@ /* END Customization when dropdown is open */ -/* Red button */ -.v2-inpage-navigation__cta:any-link { - align-items: center; - background-color: var(--button-primary-red-enabled); - color: var(--c-primary-white); - display: flex; - font-family: var(--ff-body); - font-size: 14px; - font-style: normal; - font-weight: 500; - letter-spacing: 1.12px; - line-height: 18px; - padding: 0 20px; - text-decoration: none; -} - -.v2-inpage-navigation__cta:hover, -.v2-inpage-navigation__cta:focus { - background-color: var(--button-primary-red-hover); +a.v2-inpage-navigation__cta:any-link { + margin: -1px 0 0; + min-width: auto; + border-radius: 0; } .v2-inpage-navigation__cta:active { @@ -180,6 +176,12 @@ position: relative; } + .v2-inpage-navigation__item button, + a.v2-inpage-navigation__cta:any-link { + margin: 0; + border-radius: 2px; + } + .v2-inpage-navigation__item button:hover, .v2-inpage-navigation__item button:focus { background: none; @@ -201,10 +203,10 @@ background-color: var(--c-accent-red); } - /* Red button */ - .v2-inpage-navigation__cta:any-link { - border-radius: 2px; - padding: 15px 20px; + .v2-inpage-navigation__item button:focus-visible { + border-color: transparent; + outline: 2px solid var(--border-focus); + outline-offset: 2px; } .v2-inpage-navigation__cta--mobile { diff --git a/blocks/v2-inpage-navigation/v2-inpage-navigation.js b/blocks/v2-inpage-navigation/v2-inpage-navigation.js index 3988406a1..58e1ad81b 100644 --- a/blocks/v2-inpage-navigation/v2-inpage-navigation.js +++ b/blocks/v2-inpage-navigation/v2-inpage-navigation.js @@ -22,13 +22,13 @@ const scrollToSection = (id) => { resizeObserver.observe(main); }; -const inpageNavigationRedButton = () => { +const inpageNavigationButton = () => { // if we have a button title & button link if (getMetadata('inpage-button') && getMetadata('inpage-link')) { const titleMobile = getMetadata('inpage-button'); const url = getMetadata('inpage-link'); const link = createElement('a', { - classes: `${blockName}__cta`, + classes: ['button', 'button--large', 'button--cta', `${blockName}__cta`], props: { href: url, title: titleMobile, @@ -95,7 +95,7 @@ const updateActive = (id) => { // Remove focus position document.activeElement.blur(); - // check active id is equal to id dont do anything + // check active id is equal to id don't do anything const selectedItem = document.querySelector(`.${blockName}__selected-item`); activeItemInList?.classList.remove(`${blockName}__item--active`); const itemsButton = document.querySelectorAll(`.${blockName}__items button`); @@ -114,7 +114,7 @@ const updateActive = (id) => { }; export default async function decorate(block) { - const redButton = inpageNavigationRedButton(); + const ctaButton = inpageNavigationButton(); const wrapper = block.querySelector(':scope > div'); wrapper.classList.add(`${blockName}__wrapper`); @@ -149,8 +149,8 @@ export default async function decorate(block) { itemsWrapper.remove(); - if (redButton) { - wrapper.appendChild(redButton); + if (ctaButton) { + wrapper.appendChild(ctaButton); } list.addEventListener('click', gotoSection); diff --git a/scripts/scripts.js b/scripts/scripts.js index 64c13f91e..9295275d2 100644 --- a/scripts/scripts.js +++ b/scripts/scripts.js @@ -323,13 +323,10 @@ const createInpageNavigation = (main) => { // Sort the object by order const sortedObject = tabItemsObj.slice().sort((obj1, obj2) => { - if (!obj1.order) { - return 1; // Move 'a' to the end - } - if (!obj2.order) { - return -1; // Move 'b' to the end - } - return obj1.order - obj2.order; + const order1 = obj1.order ?? Infinity; // Fallback to a large number if 'order' is not present + const order2 = obj2.order ?? Infinity; + + return order1 - order2; }); // From the array of objects create the DOM diff --git a/styles/styles.css b/styles/styles.css index 8365e8ca9..3c1f1aed3 100644 --- a/styles/styles.css +++ b/styles/styles.css @@ -958,6 +958,17 @@ main .section.responsive-title h1 { border-color var(--duration-small) var(--easing-standard); } +.redesign-v2 a.button:focus, +.redesign-v2 button.button:focus { + outline: 0; +} + +.redesign-v2 a.button:focus-visible, +.redesign-v2 button.button:focus-visible { + outline: 2px solid var(--border-focus); + outline-offset: 2px; +} + .redesign-v2 a.button--small, .redesign-v2 button.button--small { min-width: 96px;