diff --git a/packages/docs/src/global.css b/packages/docs/src/global.css
index ffa6ba1a262..f95fda366b5 100644
--- a/packages/docs/src/global.css
+++ b/packages/docs/src/global.css
@@ -67,6 +67,10 @@
   } */
 }
 
+pre.shiki[tabindex="0"]:focus-visible {
+  @apply outline-2 outline-base-300 -outline-offset-4;
+}
+
 .code-wrapper {
   background-color: var(--color-neutral);
   border-radius: var(--radius-box);
diff --git a/packages/docs/src/lib/actions.svelte.js b/packages/docs/src/lib/actions.svelte.js
index 10b82a9bb00..19c70f1a3b3 100644
--- a/packages/docs/src/lib/actions.svelte.js
+++ b/packages/docs/src/lib/actions.svelte.js
@@ -96,6 +96,8 @@ export const htmlToJsx = (node) => {
 
   const update = () => {
     node.innerHTML = replaceStrings(originalContent, stringsToReplace)
+      // fix the broken tabIndex={0} in JSX tab
+      .replaceAll('var(--shiki-punctuation)" tabIndex={0}>', 'var(--shiki-punctuation)" tabindex="0">',)
   }
 
   update()
diff --git a/packages/docs/src/lib/mdsvex/remark-link-headings.js b/packages/docs/src/lib/mdsvex/remark-link-headings.js
index d72eb90b188..142164e1e1e 100644
--- a/packages/docs/src/lib/mdsvex/remark-link-headings.js
+++ b/packages/docs/src/lib/mdsvex/remark-link-headings.js
@@ -30,8 +30,8 @@ export function remarkLinkHeadings() {
         // Create the link icon element wrapped in an anchor tag
         const linkIconWithAnchor = {
           type: "html",
-          value: `<a href="#${id}" class="no-underline" aria-label="Link to heading">
-            <span class="heading-anchorlink-icon bg-base-content/5 hover:bg-primary/10 size-[1em] text-base-content/30 hover:text-primary/50 rounded-field border border-base-content/5 hover:border-primary/20 inline-grid place-content-center hover:shadow-sm hover:shadow-base-200 align-text-bottom me-3 lg:absolute lg:ms-[-1.5em] lg:mt-1 transition-all group">
+          value: `<a href="#${id}" class="no-underline group" aria-label="Link to heading">
+            <span class="heading-anchorlink-icon bg-base-content/5 hover:bg-primary/10 size-[1em] text-base-content/30 hover:text-primary/50 rounded-field border border-base-content/5 hover:border-primary/20 inline-grid place-content-center hover:shadow-sm hover:shadow-base-200 outline-offset-1 group-focus-visible:outline-2 align-text-bottom me-3 lg:absolute lg:ms-[-1.5em] lg:mt-1 transition-color transition-transform">
               <svg class="group-hover:scale-100 scale-90 transition-transform" fill="currentColor" width=".5em" height=".5em" viewBox="0 0 256 256" id="Flat" xmlns="http://www.w3.org/2000/svg">
                 <path d="M216,148H172V108h44a12,12,0,0,0,0-24H172V40a12,12,0,0,0-24,0V84H108V40a12,12,0,0,0-24,0V84H40a12,12,0,0,0,0,24H84v40H40a12,12,0,0,0,0,24H84v44a12,12,0,0,0,24,0V172h40v44a12,12,0,0,0,24,0V172h44a12,12,0,0,0,0-24Zm-108,0V108h40v40Z"/>
               </svg>