← 中文资源

简体中文版本

审查键盘焦点顺序

依据元素元数据推导 Tab 顺序,并标出正的 tabindex 值,以及可交互但键盘无法到达的控件。

阅读英文原文

任务

从给定的元素元数据推导键盘 Tab 顺序:按 DOM 位置排序,去掉正整数 tabindex,并标出可交互但无法通过键盘聚焦的控件。

契约

  • 输入:JSON 对象:{ elements: [{ tag, tabindex?, focusable, role? }] }
  • 输出:JSON 对象:{ focusOrder: number[], violations: string[] }

样例

  1. 输入 {"elements":[{"tag":"a","focusable":true},{"tag":"div","tabindex":3,"focusable":true},{"tag":"button","focusable":true}]} -> 期望 {"focusOrder":[0,2],"violations":["1:positive-tabindex"]}。正的 tabindex 会被标记,并从推导出的顺序中排除。
  2. 输入 {"elements":[{"tag":"a","focusable":true},{"tag":"button","focusable":true}]} -> 期望 {"focusOrder":[0,1],"violations":[]}。自然顺序不会产生任何违规项。

参考实现

function solve({ elements }) {
      const focusOrder = [];
      const violations = [];
      elements.forEach((element, index) => {
        if (Number(element.tabindex) > 0) violations.push(index + ':positive-tabindex');
        else if (element.focusable) focusOrder.push(index);
      });
      return { focusOrder, violations };
    }

为什么有效

正的 tabindex 会让焦点顺序在不同浏览器间不可预测地重排。按 DOM 位置排序并去掉正值,是面向键盘用户的可靠修法。

只有正的 tabindex 才算违规;0 与 -1 都是合法值。