From ca88b0c248c0c874657537ccb31adef7d93d543f Mon Sep 17 00:00:00 2001
From: Charles Zhao <charleszhao@silverhand.io>
Date: Thu, 17 Aug 2023 02:17:55 -0500
Subject: [PATCH] fix(console): guide navigation anchors should be clickable
 and jump to the step (#4364)

---
 .../mdx-components-v2/Steps/index.module.scss    |  8 +++++++-
 .../src/mdx-components-v2/Steps/index.tsx        | 16 ++++++++++++++++
 2 files changed, 23 insertions(+), 1 deletion(-)

diff --git a/packages/console/src/mdx-components-v2/Steps/index.module.scss b/packages/console/src/mdx-components-v2/Steps/index.module.scss
index e262f7aa0..1a02abfc5 100644
--- a/packages/console/src/mdx-components-v2/Steps/index.module.scss
+++ b/packages/console/src/mdx-components-v2/Steps/index.module.scss
@@ -40,8 +40,14 @@
   border-radius: 12px;
   border: 1px solid var(--color-surface-5);
   padding: _.unit(3) _.unit(4);
+  user-select: none;
+  cursor: pointer;
+
+  &:hover {
+    background: var(--color-surface-5);
+  }
 
   &.active {
-    background: var(--color-surface-1);
+    background: var(--color-focused-variant);
   }
 }
diff --git a/packages/console/src/mdx-components-v2/Steps/index.tsx b/packages/console/src/mdx-components-v2/Steps/index.tsx
index 4da29a37d..adca53fb3 100644
--- a/packages/console/src/mdx-components-v2/Steps/index.tsx
+++ b/packages/console/src/mdx-components-v2/Steps/index.tsx
@@ -4,6 +4,7 @@ import React, { useRef, type ReactElement, useEffect, useState, useMemo, useCont
 
 import useScroll from '@/hooks/use-scroll';
 import { GuideContext } from '@/pages/Applications/components/Guide';
+import { onKeyDownHandler } from '@/utils/a11y';
 
 import Sample from '../Sample';
 import { type Props as StepProps } from '../Step';
@@ -76,6 +77,13 @@ export default function Steps({ children: reactChildren }: Props) {
     setActiveIndex(reversedActiveIndex === -1 ? -1 : children.length - reversedActiveIndex - 1);
   }, [children.length, scrollTop]);
 
+  const navigateToStep = (index: number) => {
+    const stepRef = stepReferences.current[index];
+    if (stepRef) {
+      stepRef.scrollIntoView({ behavior: 'smooth' });
+    }
+  };
+
   return (
     <div className={classNames(styles.wrapper, isCompact && styles.fullWidth)}>
       {!isCompact && (
@@ -84,7 +92,15 @@ export default function Steps({ children: reactChildren }: Props) {
             {children.map((component, index) => (
               <div
                 key={component.props.title}
+                role="button"
+                tabIndex={0}
                 className={classNames(styles.stepper, index === activeIndex && styles.active)}
+                onKeyDown={onKeyDownHandler(() => {
+                  navigateToStep(index);
+                })}
+                onClick={() => {
+                  navigateToStep(index);
+                }}
               >
                 {index + 1}. {component.props.title}
               </div>