Datatable Accessibility — Navigation & Action Modes

好，我们来聊聊 Lightning Web Components 里数据表格的可访问性，特别是键盘交互，这部分非常重要，能让咱们的组件对所有人都友好。 首先，表格提供了两种键盘交互模式，就像两个不同的频道，让用户能用键盘高效操作。 第一种叫，导航模式，。你可以把它想象成在表格的各个单元格之间快速浏览。怎么进入呢？用户按下 Tab 键，焦点就进到表格里了。进来之后，用键盘上的箭头键，上、下、左、右，就能在单元格之间移动。这里要注意，表格里那些可以操作的元素，比如按钮、链接，在这个模式下默认不会被 Tab 键直接选中，它们的 tabindex 被设成了 -1，也就是跳过去了。但如果一个单元格里只有一个可操作的东西，那用户按 Enter 键就会直接激活它，省得再切模式，很贴心。 第二种叫，动作模式，。当你需要跟单元格里的具体元素交互时，比如点按钮、选下拉框，就要进入这个模式。怎么进去呢？也是通过按 Enter 键，或者直接按 F2 键（有些屏幕阅读器用户常用）。进去之后，在这个单元格内部，Tab 键和箭头键就可以在按钮、链接这些控件之间来回移动了，这些元素的 tabindex 被动态设成了 0，所以能被焦点访问到。这样用户就能用键盘操作单元格里的每一个小部件。 那有些同学可能会问，我自定义了一个数据类型，在单元格里放了几个按钮或者输入框，怎么让它也支持这种动作模式呢？很简单，你需要做两件事。 第一，在你的自定义组件模板里，每一个可以获取焦点的元素上，要绑上一个属性叫 `tabindex`，值等于一个叫 `internalTabIndex` 的变量。这个变量是由数据表格自动提供给我们的。同时，在这个元素自己或者它的外层容器上，加上一个属性 `data-navigation='enable'`，这就像是告诉表格：“嘿，这个单元格里有多项可以操作，请开启动作模式。” 第二，如果你这个自定义类型是通过子组件实现的，那情况稍微复杂一点，因为 `internalTabIndex` 需要从父组件传给它。在父组件里，属性名要写成 `internal-tab-index`，注意是连字符写法，绑定上值 `{internalTabIndex}`。然后在你子组件的 JavaScript 里，用 `@api` 装饰器暴露一个公开属性也叫 `internalTabIndex`，注意这里是驼峰命名。最后，在子组件的模板里，同样给可聚焦的元素设置 `tabindex={internalTabIndex}`，再加上 `data-navigation='enable'` 就行了。 总结一下，加这两个小属性，你的自定义单元格就能完美融入键盘操作模式，既符合无障碍标准，又提升了所有用户的操作效率。