[Meshery] Fix sidebar navigation to respective sections

src/components/Animated-steps-list/AnimatedStepsList.style.js

@@ -4,7 +4,8 @@ export const AnimatedStepsListWrapper = styled.div`
   .animated-steps-list {
     display: flex;
     & .indicator-wrapper {
-      & > ul {
+      & > ul,
+      & > nav {
         position: sticky;
         top: 200px;
         padding-bottom: 395px;

src/components/Animated-steps-list/Steps-indicator/StepsIndicator.style.js

@@ -1,21 +1,57 @@
 import styled from "styled-components";
 
-export const StepsIndicatorWrapper = styled.ul`
+export const StepsIndicatorWrapper = styled.nav`
+  padding: 0;
+  margin: 0;
+
+  & .indicator-list {
     padding: 0;
     margin: 0;
     list-style: none;
+  }
+
+  & li {
+    margin-bottom: 1rem;
 
-    & li {
-        font-size: 17px;
-        line-height: 28px;
-        color: gray;
-        margin-bottom: 16px;
+    & .indicator-link {
+      display: inline-block;
+      text-decoration: none;
+      background: transparent;
+      border: none;
+      box-shadow: none;
+      padding: 0;
+      margin: 0;
+      font-family: inherit;
+      font-size: 17px;
+      line-height: 28px;
+      color: ${(props) => props.theme.greyB4B4B4ToGrey505050 || "gray"};
+      cursor: pointer;
+      transition:
+        color 0.2s ease,
+        font-weight 0.2s ease;
 
-        &.active {
-          font-weight: 600;
-          color: ${props => props.theme.text};
+      &:hover {
+        color: ${(props) => props.theme.secondaryColor || "#00b39f"};
+        background: transparent;
+        box-shadow: none;
+        text-decoration: none;
+      }
 
+      &:focus {
+        outline: none;
+        box-shadow: none;
+      }
+
+      &:focus-visible {
+        outline: 2px solid ${(props) => props.theme.secondaryColor || "#00b39f"};
+        outline-offset: 3px;
+        border-radius: 4px;
+      }
+    }
 
-        }
+    &.active .indicator-link {
+      font-weight: 600;
+      color: ${(props) => props.theme.text};
     }
+  }
 `;

src/components/Animated-steps-list/Steps-indicator/index.js

@@ -1,17 +1,47 @@
 import React from "react";
 import { StepsIndicatorWrapper } from "./StepsIndicator.style";
 
-const StepsIndicator = ({ steps, activeIndex }) => {
+const StepsIndicator = ({ steps, activeIndex, onItemClick }) => {
   return (
-    <StepsIndicatorWrapper>
-      {steps.map((step, index) => (
-        <li
-          key={step.name}
-          className={index === activeIndex ? "active" : ""}
-        >
-          {step.name}
-        </li>
-      ))}
+    <StepsIndicatorWrapper aria-label="Getting started steps">
+      <ul className="indicator-list">
+        {steps.map((step, index) => {
+          const stepId =
+            step.id || step.name.toLowerCase().replace(/\s+/g, "-");
+          return (
+            <li
+              key={step.name}
+              className={index === activeIndex ? "active" : ""}
+            >
+              <a
+                href={`#${stepId}`}
+                className="indicator-link"
+                onClick={(e) => {
+                  if (
+                    e.button === 0 &&
+                    !e.defaultPrevented &&
+                    !e.metaKey &&
+                    !e.ctrlKey &&
+                    !e.altKey &&
+                    !e.shiftKey
+                  ) {
+                    if (onItemClick) {
+                      const handled = onItemClick(index);
+                      if (handled) {
+                        e.preventDefault();
+                      }
+                    }
+                  }
+                }}
+                aria-current={index === activeIndex ? "step" : undefined}
+                aria-label={`Scroll to ${step.name} step`}
+              >
+                {step.name}
+              </a>
+            </li>
+          );
+        })}
+      </ul>
     </StepsIndicatorWrapper>
   );
 };

src/components/Animated-steps-list/Steps-list/Step/Step.style.js

@@ -1,27 +1,38 @@
 import styled from "styled-components";
 
 export const StepWrapper = styled.li`
-    width: 314px;
-
+  width: 314px;
+  scroll-margin-top: 9.5rem;
+
+  @media (max-width: 850px) {
+    width: unset;
+    scroll-margin-top: 6rem;
+  }
+
+  & h3 {
+    margin-bottom: 12px;
+    margin-top: 0;
+    scroll-margin-top: 9.5rem;
+
     @media (max-width: 850px) {
-        width: unset;
+      scroll-margin-top: 6rem;
     }
 
-      & h3 {
-        margin-bottom: 12px;
-        margin-top: 0;
-      }
+    &:focus {
+      outline: none;
+    }
+  }
+
+  & .description {
+    & > p {
+      font-size: 17px;
+      line-height: 28px;
+      letter-spacing: 0.0125em;
+      color: var(--gray-2);
+    }
+  }
 
-      & .description {
-        & > p {
-          font-size: 17px;
-          line-height: 28px;
-          letter-spacing: 0.0125em;
-          color: var(--gray-2);
-        }
-      }
-
-      & > .logo-list {
-        margin-top: 38px;
-      }
+  & > .logo-list {
+    margin-top: 38px;
+  }
 `;

src/components/Animated-steps-list/Steps-list/Step/index.js

@@ -3,7 +3,7 @@ import { useInView } from "react-intersection-observer";
 import LogoList from "../../../Logo-List";
 import { StepWrapper } from "./Step.style";
 
-const Step = ({ name, description, logos, onInViewStatusChanged }) => {
+const Step = ({ id, name, description, logos, onInViewStatusChanged }) => {
   const [ref, inView] = useInView({ threshold: 0.4 });
   const [inViewStatus, setInViewStatus] = useState(false);
 
@@ -15,8 +15,8 @@ const Step = ({ name, description, logos, onInViewStatusChanged }) => {
   }, [inView, inViewStatus]);
 
   return (
-    <StepWrapper ref={ref}>
-      <h3>{name}</h3>
+    <StepWrapper ref={ref} id={id}>
+      <h3 tabIndex="-1">{name}</h3>
       <div className="description">{description}</div>
       <LogoList className="logo-list" logos={logos} />
     </StepWrapper>

src/components/Animated-steps-list/Steps-list/index.js

@@ -4,7 +4,7 @@ import Step from "./Step";
 
 const StepsList = ({ steps, className, onFocusedIndexChanged }) => {
   const [viewportStatus, setViewportStatus] = useState(
-    new Array(steps.length).fill(false)
+    new Array(steps.length).fill(false),
   );
   const [focusedStepIndex, setFocusedStepIndex] = useState(0);
   return (
@@ -13,6 +13,8 @@ const StepsList = ({ steps, className, onFocusedIndexChanged }) => {
         {steps.map((step, index) => (
           <Step
             key={step.name}
+            {...step}
+            id={step.id || step.name.toLowerCase().replace(/\s+/g, "-")}
             onInViewStatusChanged={(status) => {
               // Determine the new status array of the view status
               const newStatusArray = [...viewportStatus];
@@ -28,7 +30,6 @@ const StepsList = ({ steps, className, onFocusedIndexChanged }) => {
                 onFocusedIndexChanged(newFocusIndex);
               }
             }}
-            {...step}
           />
         ))}
       </ul>