diff --git a/blocks/v2-inpage-navigation/v2-inpage-navigation.css b/blocks/v2-inpage-navigation/v2-inpage-navigation.css index 98095912..54fa31a2 100644 --- a/blocks/v2-inpage-navigation/v2-inpage-navigation.css +++ b/blocks/v2-inpage-navigation/v2-inpage-navigation.css @@ -90,10 +90,23 @@ then we change it for the next section item in main */ .v2-inpage-navigation__items-close { background: none; border: 0; + border-radius: 4px; color: var(--c-main-black); cursor: pointer; display: block; margin: 0 0 0 auto; + padding: 0; + width: 44px; + height: 44px; +} + +.v2-inpage-navigation__items-close svg { + display: block; + margin: auto; +} + +.v2-inpage-navigation__items-close:focus-visible { + outline: 2px solid var(--light-border-focus); } .v2-inpage-navigation__dropdown-title { @@ -125,6 +138,11 @@ then we change it for the next section item in main */ letter-spacing: var(--f-subtitle-2-letter-spacing); margin: 0; width: 100%; + border-radius: 1px; + } + +.v2-inpage-navigation__item button:focus-visible { + outline-offset: 5px; } /* stylelint-disable-next-line no-descending-specificity */ @@ -164,30 +182,10 @@ then we change it for the next section item in main */ /* END Customization when dropdown is open */ -/* Blue button */ -.v2-inpage-navigation__cta:any-link { - text-transform: uppercase; - padding: 9px 21px; - font-family: var(--font-family-body); - font-size: var(--f-button-font-size); +.redesign-v2 a.button.v2-inpage-navigation__cta:any-link { + height: auto; + padding: 8px 20px; line-height: var(--f-button-line-height); - letter-spacing: var(--f-button-letter-spacing); - border: 0; - background-color: var(--c-cta-blue-default); - color: var(--c-white); - align-items: center; - display: flex; - text-decoration: none; - border-radius: 4px; -} - -.v2-inpage-navigation__cta:hover, -.v2-inpage-navigation__cta:focus { - background-color: var(--c-cta-blue-hover); -} - -.v2-inpage-navigation__cta:active { - background-color: var(--c-cta-blue-active); } @media (min-width: 744px) { @@ -250,6 +248,9 @@ then we change it for the next section item in main */ padding: 0; display: flex; align-items: center; + + /* fix overlap issue for focus state of CTA */ + background-color: transparent; } .v2-inpage-navigation__items { @@ -289,8 +290,7 @@ then we change it for the next section item in main */ background-color: var(--c-main-black); } - /* Blue button */ - .v2-inpage-navigation__cta:any-link { - padding: 11px 21px; + .redesign-v2 a.button.v2-inpage-navigation__cta:any-link { + padding: 10px 20px; } } diff --git a/blocks/v2-inpage-navigation/v2-inpage-navigation.js b/blocks/v2-inpage-navigation/v2-inpage-navigation.js index f50d5013..40869152 100644 --- a/blocks/v2-inpage-navigation/v2-inpage-navigation.js +++ b/blocks/v2-inpage-navigation/v2-inpage-navigation.js @@ -28,7 +28,7 @@ const inpageNavigationButton = () => { const title = getMetadata('inpage-button'); const url = getMetadata('inpage-link'); const link = createElement('a', { - classes: `${blockName}__cta`, + classes: ['button', 'marketing-cta', `${blockName}__cta`], props: { href: url, title, @@ -85,7 +85,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`); @@ -119,7 +119,7 @@ const addHeaderScrollBehaviour = (header) => { }; export default async function decorate(block) { - const redButton = inpageNavigationButton(); + const ctaButton = inpageNavigationButton(); const wrapper = block.querySelector(':scope > div'); wrapper.classList.add(`${blockName}__wrapper`); @@ -182,8 +182,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 39e0800a..f4dc5389 100644 --- a/scripts/scripts.js +++ b/scripts/scripts.js @@ -473,13 +473,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 37e2d0bd..3c1fa89c 100644 --- a/styles/styles.css +++ b/styles/styles.css @@ -608,7 +608,13 @@ main p img { .redesign-v2 a.button:focus, .redesign-v2 button:focus { + outline: 0; +} + +.redesign-v2 a.button:focus-visible, +.redesign-v2 button:focus-visible { outline: 2px solid var(--light-border-focus); + outline-offset: 2px; } /* sections */