Inpage navigation is in reversed order on Firefox #262 (#265)

* fix Firefox issue with sorting
* fix naming issues
* refactor focus state
* refactor button styles

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;
   }
 }

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);

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

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 */