在TypeScript/NextJS环境中，为HTML元素设置`tabIndex`属性时，常见的错误是将`tabIndex`赋值为字符串`'0'`，导致`Type 'string' is not assignable to type 'number'`的类型错误。正确的做法是使用JSX表达式`tabIndex={0}`，将`0`作为数字类型传递，以符合TypeScript的类型检查和React对属性的预期，确保键盘导航功能正常。
理解 tabIndex 属性及其重要性
tabIndex 是一个全局HTML属性，用于指示元素是否可以聚焦，以及它在键盘导航顺序中的位置。它对于实现无障碍（Accessibility）网页至关重要，允许用户仅通过键盘（例如使用Tab键）来导航和操作网页元素。
tabIndex 属性可以接受以下几种值：
- tabIndex={0}: 表示元素可以被聚焦，并且可以通过Tab键访问。它的聚焦顺序由其在文档中的位置决定（即按照HTML元素的默认顺序）。这通常用于使原本不可聚焦的元素（如div、span）变得可聚焦。
- tabIndex={-1}: 表示元素可以被程序性地聚焦（例如通过JavaScript的focus()方法），但不能通过Tab键访问。这常用于创建可聚焦但不在常规Tab顺序中的交互式组件。
- tabIndex={number > 0}: 表示元素可以被聚焦，并且其聚焦顺序由该正数决定。值越小，聚焦优先级越高。然而，强烈不推荐使用大于0的tabIndex值，因为它会打乱用户预期的自然Tab顺序，对无障碍性造成负面影响。应尽量通过调整DOM结构来控制聚焦顺序。
遇到的问题：TypeScript中的类型不匹配
当在TypeScript和React（或NextJS）项目中使用JSX语法时，为div等元素设置tabIndex属性，如果尝试像纯HTML那样使用字符串赋值，例如 tabIndex = '0'，就会遇到类型错误：Type 'string' is not assignable to type 'number'。
这个错误的原因在于：
- TypeScript的强类型检查： TypeScript对JSX属性进行类型检查。在React的类型定义中（例如React.HTMLAttributes<HTMLDivElement>），tabIndex属性被明确定义为 number 类型。
- JSX的属性处理： 在JSX中，当属性值被引号包围时（例如tabIndex="0"），它会被视为一个字符串字面量。而当属性值被花括号 {} 包围时（例如tabIndex={0}），它会被视为一个JavaScript表达式，其结果的类型会受到TypeScript的检查。
因此，当您写 tabIndex="0" 时，TypeScript会将其识别为字符串 '0'，而期望的却是数字 0，从而导致类型不匹配错误。
解决方案：使用数字字面量
解决这个问题的关键在于，将tabIndex的值作为JavaScript的数字字面量而不是字符串字面量传递。在JSX中，这意味着您需要使用花括号 {} 来包裹数字值。
正确的写法是：tabIndex={0}。
通过 tabIndex={0}，您告诉JSX将 0 作为一个JavaScript数字值进行处理，这完全符合TypeScript对tabIndex属性期望的 number 类型。
代码示例
以下是错误和正确使用tabIndex属性的对比示例：
import React from 'react';
const MyComponent: React.FC = () => {
return (
<div>
<h2>tabIndex 属性示例</h2>
{/* 错误示例：导致 Type 'string' is not assignable to type 'number' 错误 */}
{/*
<div className="container" tabIndex="0">
这是一个错误的 div (tabIndex='0')
</div>
*/}
{/* 正确示例：符合 TypeScript 类型要求 */}
<div className="container" tabIndex={0} role="button" onClick={() => console.log('Div clicked!')}>
这是一个正确的 div (tabIndex={0})
<p>可以通过Tab键聚焦并回车/空格激活</p>
</div>
{/* 另一个正确示例：不可通过Tab键聚焦，但可通过JS聚焦 */}
<div className="another-container" tabIndex={-1}>
这是一个不可通过Tab键聚焦的 div (tabIndex={-1})
</div>
<button>一个普通的按钮</button>
</div>
);
};
export default MyComponent;在上面的正确示例中，我们为 div 元素添加了 role="button" 和 onClick 事件处理器。这是因为当您使一个非交互式元素（如 div）可聚焦时，通常也需要为其提供相应的语义角色和交互行为，以确保其无障碍性。
最佳实践与注意事项
- 优先使用语义化HTML元素： 尽可能使用原生的可聚焦HTML元素（如 button, a, input, select, textarea）而不是给 div 或 span 添加 tabIndex。原生元素自带无障碍语义和键盘交互行为。
- 避免 tabIndex > 0： 除非有非常特殊的需求，否则应避免使用大于0的tabIndex值。它会破坏自然Tab顺序，给键盘用户带来困惑。如果需要调整Tab顺序，请考虑重新组织DOM结构。
-
为可聚焦的非交互元素提供角色和事件： 当您给一个非交互式元素（如 div）设置 tabIndex={0} 使其可聚焦时，通常意味着它具有某种交互功能。在这种情况下，您应该：
- 添加相应的WAI-ARIA role 属性（例如 role="button", role="link", role="checkbox"），以向辅助技术（如屏幕阅读器）传达其语义。
- 为元素添加键盘事件监听器（如 onKeyDown），以处理Enter或Space键，模拟原生控件的激活行为。
- 测试键盘导航： 在开发过程中，务必使用键盘（Tab、Shift+Tab、Enter、Space等）测试您的应用程序，确保所有交互元素都能被正确聚焦和操作。
总结
在TypeScript/React（包括NextJS）项目中设置 tabIndex 属性时，核心在于理解TypeScript的类型检查和JSX的属性处理机制。通过将 tabIndex 的值作为数字字面量 tabIndex={0} 而非字符串字面量 tabIndex="0" 来传递，可以有效避免类型错误，并确保应用程序的键盘导航功能符合预期，从而提升用户体验和无障碍性。始终优先考虑语义化HTML，并遵循无障碍设计原则。
