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

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,16 +51,19 @@
 .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;
   font-family: var(--ff-body-bold);
   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 {

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

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

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;