如何用jQuery遍历日历以修复无障碍访问问题

我之前处理过类似的第三方日历组件无障碍问题，刚好能用jQuery做个轻量修复，完全不用动组件底层代码。针对你提到的两个核心问题，咱们一步步来解决：

1. 先解决日历条目无法被Tab聚焦的问题 #

首先得给所有可交互的日历日期元素加上tabindex="0"，让它们能被Tab键捕获到。但要注意只初始化一次，避免重复添加属性：

$(document).ready(function() {
  // 替换成你实际的日历日期单元格选择器，比如 '.calendar-day'
  const dateCells = $('.calendar-day');
  
  // 只给没有tabindex的元素添加属性
  dateCells.not('[tabindex]').attr('tabindex', '0');
  
  // 给聚焦的单元格加样式，方便用户识别当前焦点位置（可选但推荐）
  $('<style>').text(`
    .calendar-day:focus {
      outline: 2px solid #005FCC;
      outline-offset: 2px;
      background-color: #E8F0FE;
    }
  `).appendTo('head');
});

2. 修复Tab遍历顺序异常的问题 #

浏览器默认的Tab顺序是按DOM节点顺序来的，但很多日历组件的DOM结构可能和视觉顺序不一致（比如有隐藏的月份切换栏、表头元素插在中间），导致Tab跳来跳去。咱们可以手动控制焦点移动逻辑：

$(document).ready(function() {
  const dateCells = $('.calendar-day').filter('[tabindex="0"]');
  const cellCount = dateCells.length;

  dateCells.on('keydown', function(e) {
    // 只处理Tab和Shift+Tab事件
    if (e.key !== 'Tab') return;

    const currentIndex = dateCells.index($(this));
    let nextIndex;

    if (e.shiftKey) {
      // Shift+Tab：向前移动焦点
      nextIndex = currentIndex === 0 ? cellCount - 1 : currentIndex - 1;
    } else {
      // Tab：向后移动焦点
      nextIndex = currentIndex === cellCount - 1 ? 0 : currentIndex + 1;
    }

    // 阻止默认Tab行为，手动设置焦点
    e.preventDefault();
    dateCells.eq(nextIndex).focus();
  });
});

关键注意事项 #

• 选择器匹配：一定要把.calendar-day替换成你实际项目中日历日期单元格的类名或选择器，否则脚本会找不到目标元素。
• 循环焦点（可选）：上面的代码会让焦点在所有日期单元格内循环，如果你希望遍历完所有日期后跳出到页面其他元素，可以把循环逻辑去掉（比如nextIndex = currentIndex + 1，当到最后一个时不重置为0，让浏览器默认处理）。
• 兼容性：这个方案兼容所有支持jQuery的现代浏览器，不需要额外依赖。

把这两段代码合并到一个$(document).ready()里就行，完全不需要修改日历组件的底层代码，只需要在页面加载后引入这个脚本就生效啦。

内容的提问来源于stack exchange，提问作者user9482320