FormKit下拉框选中项tabindex问题解析与修复

问题背景

在FormKit表单库的下拉框(select)组件中，当用户选择某个选项后，被选中的选项元素会被自动赋予tabindex="1"属性。这在Web无障碍访问(Accessibility)规范中是不推荐的实践，因为tabindex值大于0会干扰默认的键盘导航顺序。

技术细节分析

tabindex属性用于控制元素是否可通过键盘Tab键聚焦以及聚焦顺序：

• tabindex="0"：元素可按DOM顺序获得焦点
• tabindex="-1"：元素不可通过Tab键聚焦，但可通过JavaScript获得焦点
• tabindex="1"或更大：元素将优先于tabindex="0"的元素获得焦点，会破坏自然的Tab顺序

在FormKit的下拉框实现中，选中项被错误地设置了tabindex="1"，这会导致：

1. 键盘用户在Tab导航时会意外跳转到已选中的选项
2. 破坏页面自然的Tab键导航流
3. 可能造成屏幕阅读器用户的困惑

解决方案

FormKit团队在Pro版本0.126.4中修复了此问题。修复方案包括：

1. 移除选中项上不必要的tabindex属性
2. 确保下拉框组件整体保持合理的键盘导航行为
3. 维持原有的无障碍访问特性

最佳实践建议

开发者在实现自定义下拉组件时应注意：

1. 避免给动态内容设置大于0的tabindex值
2. 确保组件可通过键盘完全操作
3. 使用ARIA属性增强无障碍体验
4. 保持Tab键的自然导航顺序

此修复体现了FormKit团队对Web无障碍标准的重视，确保了表单控件对所有用户的可访问性。开发者应及时更新到最新版本以获得此修复。