HTML popover属性搭配日期输入框的无障碍问题：Tab键导航异常

这是Chrome浏览器原生popover元素与<input type="date">交互时的已知焦点管理bug，并非你的操作失误——当popover内包含多个日期输入框时，Tab键遍历会直接跳过第二个及之后的日期输入框，根源是Chrome对日期输入框内部的日历触发按钮的焦点处理和popover的焦点陷阱逻辑冲突了。

可行的解决方法： #

方法一：无JS的临时调整

给每个日期输入框的父容器添加tabindex="-1"，让浏览器正确识别每个输入框的焦点区域：

<button popovertarget="popoverChild">显示异常Tab遍历的弹出层</button>

<div id="popoverChild" popover>
  <p>尝试用Tab键遍历这些输入框</p>
  <div tabindex="-1"><input type="date" /></div>
  <div tabindex="-1"><input type="date" /></div>
</div>

方法二：轻量JS补丁（仅作为降级方案）

如果上述方法无效，可以添加几行针对性的JS代码修复焦点顺序，不破坏无JS实现的核心逻辑：

// 仅针对Chrome浏览器修复popover内日期输入框的Tab遍历问题
if (navigator.userAgent.includes('Chrome')) {
  document.querySelector('#popoverChild').addEventListener('focusin', (e) => {
    if (e.target.type === 'date') {
      e.target.setAttribute('tabindex', '0');
    }
  });
}

该bug属于Chrome特定的实现问题，后续浏览器版本更新大概率会修复此问题。

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