From 52b055d7698458e76751d03abfaf72dd1477e0b2 Mon Sep 17 00:00:00 2001
From: Anthony Fu <github@antfu.me>
Date: Mon, 16 Sep 2024 09:31:49 +0200
Subject: [PATCH] feat: allow customize `tabindex`, close #778

---
 packages/core/src/highlight/code-to-hast.ts | 7 ++++++-
 packages/shiki/test/hast.test.ts            | 3 ++-
 packages/types/src/options.ts               | 9 +++++++++
 3 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/packages/core/src/highlight/code-to-hast.ts b/packages/core/src/highlight/code-to-hast.ts
index 0eeb256c..69e0db7e 100644
--- a/packages/core/src/highlight/code-to-hast.ts
+++ b/packages/core/src/highlight/code-to-hast.ts
@@ -90,6 +90,7 @@ export function tokensToHast(
 
   const {
     structure = 'classic',
+    tabindex = '0',
   } = options
 
   let preNode: Element = {
@@ -98,7 +99,11 @@ export function tokensToHast(
     properties: {
       class: `shiki ${options.themeName || ''}`,
       style: options.rootStyle || `background-color:${options.bg};color:${options.fg}`,
-      tabindex: '0',
+      ...(tabindex !== false && tabindex != null)
+        ? {
+            tabindex: tabindex.toString(),
+          }
+        : {},
       ...Object.fromEntries(
         Array.from(
           Object.entries(options.meta || {}),
diff --git a/packages/shiki/test/hast.test.ts b/packages/shiki/test/hast.test.ts
index fcf7465c..ebe16052 100644
--- a/packages/shiki/test/hast.test.ts
+++ b/packages/shiki/test/hast.test.ts
@@ -48,6 +48,7 @@ it('hasfocus support', async () => {
   const code = await codeToHtml(snippet, {
     lang: 'php',
     theme: 'vitesse-light',
+    tabindex: false,
     transformers: [
       {
         code(node) {
@@ -67,7 +68,7 @@ it('hasfocus support', async () => {
 
   expect(code)
     .toMatchInlineSnapshot(`
-      "<pre class="shiki vitesse-light" style="background-color:#ffffff;color:#393a34" tabindex="0"><code class="language-php"><span class="line"><span style="color:#999999">$</span><span style="color:#B07D48">foo</span><span style="color:#999999"> =</span><span style="color:#B5695977"> "</span><span style="color:#B56959">bar</span><span style="color:#B5695977">"</span><span style="color:#999999">;</span></span>
+      "<pre class="shiki vitesse-light" style="background-color:#ffffff;color:#393a34"><code class="language-php"><span class="line"><span style="color:#999999">$</span><span style="color:#B07D48">foo</span><span style="color:#999999"> =</span><span style="color:#B5695977"> "</span><span style="color:#B56959">bar</span><span style="color:#B5695977">"</span><span style="color:#999999">;</span></span>
       <span class="line" data-has-focus="true"><span style="color:#999999">$</span><span style="color:#B07D48">test</span><span style="color:#999999"> =</span><span style="color:#B5695977"> "</span><span style="color:#B56959">owo</span><span style="color:#B5695977">"</span><span style="color:#999999">;</span><span style="color:#A0ADA0"></span></span>
       <span class="line"><span style="color:#999999">$</span><span style="color:#B07D48">bar</span><span style="color:#999999"> =</span><span style="color:#B5695977"> "</span><span style="color:#B56959">baz</span><span style="color:#B5695977">"</span><span style="color:#999999">;</span></span></code></pre>"
     `)
diff --git a/packages/types/src/options.ts b/packages/types/src/options.ts
index be8f194e..99c7173b 100644
--- a/packages/types/src/options.ts
+++ b/packages/types/src/options.ts
@@ -153,6 +153,15 @@ export interface CodeToHastOptionsCommon<Languages extends string = string>
    * @default 'classic'
    */
   structure?: 'classic' | 'inline'
+
+  /**
+   * Tab index of the root `<pre>` element.
+   *
+   * Set to `false` to disable tab index.
+   *
+   * @default 0
+   */
+  tabindex?: number | string | false
 }
 
 export interface CodeOptionsMeta {