求助：为第三方库daterangepicker.js添加键盘可访问性支持

针对daterangepicker.js不支持键盘导航的问题，下面是几个可落地的解决思路和实现代码：

一、手动绑定键盘事件，模拟导航逻辑 #

核心思路是监听输入框的键盘事件，在选择器打开时捕获箭头键、Enter、Tab等操作，手动操作日历DOM实现导航和选择。

代码示例： #

const input = document.getElementById('daterange-input');
// 初始化daterangepicker
const pickerInstance = $(input).daterangepicker({
  autoUpdateInput: false,
  // 你的其他配置项
});

// 监听输入框键盘事件
input.addEventListener('keydown', (e) => {
  const picker = pickerInstance.data('daterangepicker');
  if (!picker.isShowing) return;

  switch(e.key) {
    // 左箭头：选择上一天
    case 'ArrowLeft':
      e.preventDefault();
      navigateDate(-1, 0);
      break;
    // 右箭头：选择下一天
    case 'ArrowRight':
      e.preventDefault();
      navigateDate(1, 0);
      break;
    // 上箭头：选择上一周同一天
    case 'ArrowUp':
      e.preventDefault();
      navigateDate(0, -1);
      break;
    // 下箭头：选择下一周同一天
    case 'ArrowDown':
      e.preventDefault();
      navigateDate(0, 1);
      break;
    // Enter键：确认选中当前聚焦日期
    case 'Enter':
      e.preventDefault();
      const focusedCell = document.querySelector('.calendar-table td.focused');
      if (focusedCell) {
        focusedCell.click();
        // 若已选完结束日期，关闭选择器并回到输入框
        if (picker.endDate) {
          picker.hide();
          input.focus();
        }
      }
      break;
    // Tab键：在日期单元格和操作按钮间切换
    case 'Tab':
      e.preventDefault();
      const actionButtons = document.querySelectorAll('.daterangepicker .applyBtn, .daterangepicker .cancelBtn');
      const focusedBtn = document.querySelector('.daterangepicker .applyBtn:focus, .daterangepicker .cancelBtn:focus');
      
      if (focusedBtn) {
        // 从按钮切回输入框
        input.focus();
      } else {
        // 从日期单元格切到操作按钮
        actionButtons[0].focus();
      }
      break;
    // PageUp/PageDown：切换年份
    case 'PageUp':
      e.preventDefault();
      picker.leftCalendar.showYear(picker.leftCalendar.year - 1);
      break;
    case 'PageDown':
      e.preventDefault();
      picker.leftCalendar.showYear(picker.leftCalendar.year + 1);
      break;
  }
});

// 辅助函数：导航到相邻日期
function navigateDate(dayOffset, weekOffset) {
  const currentCell = document.querySelector('.calendar-table td.focused') || document.querySelector('.calendar-table td.active');
  if (!currentCell) return;

  // 移除之前的焦点标记
  document.querySelectorAll('.calendar-table td.focused').forEach(cell => cell.classList.remove('focused'));

  let targetCell;
  if (dayOffset !== 0) {
    // 左右导航：找相邻单元格
    targetCell = dayOffset > 0 ? currentCell.nextElementSibling : currentCell.previousElementSibling;
  } else {
    // 上下导航：找对应行的同位置单元格
    const currentRow = currentCell.parentElement;
    const targetRow = weekOffset > 0 ? currentRow.nextElementSibling : currentRow.previousElementSibling;
    if (targetRow) {
      const cellIndex = Array.from(currentRow.children).indexOf(currentCell);
      targetCell = targetRow.children[cellIndex];
    }
  }

  // 确保目标日期是可选的
  if (targetCell && targetCell.classList.contains('available')) {
    targetCell.classList.add('focused');
    targetCell.focus();
  }
}

// 打开选择器时，将焦点定位到当前选中日期
pickerInstance.on('show.daterangepicker', () => {
  const activeCell = document.querySelector('.calendar-table td.active');
  if (activeCell) {
    activeCell.classList.add('focused');
    activeCell.focus();
  }
});

// 点击日期时更新焦点标记
$(document).on('click', '.calendar-table td.available', function() {
  document.querySelectorAll('.calendar-table td.focused').forEach(cell => cell.classList.remove('focused'));
  this.classList.add('focused');
});

二、添加ARIA属性，增强屏幕阅读器兼容性 #

仅实现键盘导航还不够，需要补充ARIA属性让屏幕阅读器识别组件的角色和状态：

pickerInstance.on('show.daterangepicker', () => {
  const pickerContainer = document.querySelector('.daterangepicker');
  pickerContainer.setAttribute('role', 'dialog');
  pickerContainer.setAttribute('aria-modal', 'true');
  pickerContainer.setAttribute('aria-label', '日期范围选择器');

  // 给月份切换按钮添加描述
  document.querySelectorAll('.daterangepicker .prev').forEach(btn => {
    btn.setAttribute('aria-label', '切换到上一月');
  });
  document.querySelectorAll('.daterangepicker .next').forEach(btn => {
    btn.setAttribute('aria-label', '切换到下一月');
  });

  // 给日期单元格设置角色和选中状态
  document.querySelectorAll('.calendar-table td.available').forEach(cell => {
    cell.setAttribute('role', 'gridcell');
    cell.setAttribute('aria-selected', cell.classList.contains('active') ? 'true' : 'false');
  });
});

// 选中日期后更新aria-selected状态
pickerInstance.on('apply.daterangepicker', () => {
  document.querySelectorAll('.calendar-table td.available').forEach(cell => {
    cell.setAttribute('aria-selected', cell.classList.contains('active') ? 'true' : 'false');
  });
});

三、备选方案：替换为原生支持可访问性的组件 #

如果项目允许替换组件，优先选择原生支持键盘访问和ARIA的日期范围选择库，比如flatpickr、react-datepicker（若用React）等，这些库开箱即支持键盘导航和屏幕阅读器适配，无需额外开发。

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