Handle Focus — Tab Navigation & tabindex

同学们，我们来看一下关于 Lightning Web Components 中键盘可访问性的一些关键知识。这对那些无法使用鼠标，必须靠键盘操作的用户来说，真的非常重要。 首先你们要记住，在普通的 HTML 里，那些交互式的元素，比如 ，a 标签、按钮、输入框、文本域，，它们天生就是能被键盘聚焦的。你按 Tab 键的时候，焦点会自动在这些元素间跳来跳去。 但是，非交互式的元素，比如一个用来展示文字的 div 或 span，默认是无法通过 Tab 键到达的。如果我们需要让用户也能用 Tab 键聚焦到这样的元素上，那就需要给它加一个 ，tabindex="0"， 属性。这样它就会被加入到自然的 Tab 顺序里，和按钮、链接一样能被按顺序访问。 那么在 LWC 里有一点要特别注意，Lightning Web Components 只支持两种 tabindex 值：，0 和 -1，。 - ，0， 表示把这个元素放进自然 Tab 顺序里。 - ，-1， 表示这个元素只能通过程序方式来聚焦，比如用 JavaScript 调用 focus() 方法，但它不会出现在用户按 Tab 键的路径里。 我们不允许使用其他数字值，比如 tabindex="1" 这种来改变顺序，这在 LWC 里是不支持的。 接下来还有一个非常重要的默认行为，很多人一开始会搞错。就是，自定义组件的焦点是怎么处理的，。 你看，我们写的每个 Lightning Web 组件，在页面上最终会渲染成一个自定义的 HTML 标签，比如 ``。当你在这个组件里面放了按钮、输入框这些原生可聚焦的元素，然后用户按 Tab 键时，焦点不会停在这个外层的 `` 标签上，而是，直接跳过这个容器，进入到它里面的第一个可聚焦元素，。 也就是说，Tab 顺序会直接进入组件内部的按钮和输入框之间跳转，就好像组件的外壳根本不存在一样。这其实是我们通常想要的行为，因为组件本身只是一个语义上的包装，不是一个真实的界面控件，用户不需要在它上面停留。 如果你自己做过实验，会发现当焦点移入组件时，是直接亮在里面的第一个输入框上，而不是组件的边框。这就是 LWC 的默认焦点管理方式。 好，我们总结一下今天的关键点：交互元素天然可焦点，非交互的需要 tabindex="0"；LWC 只允许 tabindex 值为 0 或 -1；最后，自定义组件的焦点会直接穿透到内部元素，不驻留在组件根节点。理解这些，对你构建无障碍的组件会非常有帮助。 有什么问题吗？我们接着看下一部分。