Shiki.js 代码高亮库中 pre 元素的可聚焦性控制方案

背景介绍

Shiki.js 是一个流行的代码语法高亮库，它通过将代码转换为带有样式标记的 HTML 元素来实现美观的代码展示效果。在默认情况下，Shiki 生成的代码块会被包裹在 <pre> 标签中，这个标签在 HTML 规范中具有默认的可聚焦性（tabIndex="0"），这可能会在某些特定场景下造成用户体验问题。

问题分析

在 Web 可访问性（a11y）设计中，tabIndex 属性控制着元素是否可以通过键盘 Tab 键获得焦点。默认情况下，<pre> 元素在某些浏览器中是可聚焦的，这可能导致：

1. 当用户使用键盘导航时，会意外地在代码块上停留
2. 在不需要交互的纯展示性代码块中，这种可聚焦性反而会干扰用户体验
3. 在某些自定义 UI 组件中，开发者希望完全控制焦点流

技术实现方案

Shiki.js 的核心团队通过以下方式解决了这个问题：

1. 参数化设计：在代码高亮配置中新增了 tabIndex 选项，允许开发者自由控制生成的 <pre> 元素的 tabIndex 值

2. 默认值优化：虽然提供了配置选项，但保持了向后兼容性，默认行为与之前版本一致

3. 类型安全：通过 TypeScript 类型定义确保参数类型的正确性，可以接受 number 或 undefined 值

实现细节

在实际实现中，开发者可以通过以下方式使用这个功能：

const code = shiki.codeToHtml(`console.log("hello")`, {
  lang: 'javascript',
  // 禁用pre元素的可聚焦性
  tabIndex: undefined
  // 或者设置为特定值
  // tabIndex: -1
})

可选的配置值包括：

• undefined：保持浏览器默认行为
• -1：使元素不可通过 Tab 键聚焦，但可以通过 JavaScript 聚焦
• 0：使元素可通过 Tab 键聚焦（默认行为）
• 其他正整数：控制元素在 Tab 键顺序中的位置

最佳实践建议

1. 展示型代码块：对于纯展示用途的代码片段，建议设置 tabIndex: -1 或 undefined 以避免干扰键盘导航

2. 交互型代码块：如果代码块需要支持复制或其他交互，可以保持默认值或显式设置为 0

3. 可访问性考虑：在修改默认行为时，应确保不会影响屏幕阅读器等辅助技术的正常使用

总结

Shiki.js 的这一改进展示了优秀开源库的设计哲学：在保持核心功能稳定的同时，通过灵活的配置选项满足不同场景下的需求。对于前端开发者而言，理解并合理运用这些配置选项，可以创建出既美观又符合可访问性要求的代码展示组件。这一特性特别适合用在文档网站、技术博客和教育平台等需要展示大量代码示例的场景中。