如何让input[type="date"]组件同时支持键盘与鼠标无障碍访问

解决方案 #

推荐优先选择第二种需求的实现方案，交互统一度更高，适配成本更低，仅需添加对应CSS样式即可实现，无需额外JS逻辑：

方案2：移除默认图标+点击全输入框唤起弹窗 #

实现思路是不直接隐藏日期选择器触发伪元素，而是将其透明化并铺满整个输入框区域，这样点击输入框任意位置都会触发该伪元素的默认点击事件唤起弹窗，同时默认的键盘唤起逻辑（按空格/回车唤起）不受影响，完全符合无障碍要求。
对应的CSS代码如下：

input[type="date"] {
  position: relative;
  cursor: pointer;
}
/* 适配Chrome/Edge的日期选择器触发伪元素 */
input[type="date"]::-webkit-calendar-picker-indicator {
  position: absolute;
  inset: 0;
  width: auto;
  height: auto;
  background: transparent;
  /* 如需完全隐藏原始图标，可额外添加以下属性 */
  color: transparent;
}

此时不管是点击输入框任意位置，还是输入框聚焦后按空格/回车，都能唤起日期弹窗，交互完全统一，符合无障碍标准。

方案1：让默认日期图标支持键盘聚焦触发 #

如果需要保留默认的图标点击交互，仅补全键盘能力，可以通过额外的键盘事件监听实现：当输入框聚焦时，监听用户的按键行为，手动给图标区域增加聚焦状态提示，同时绑定回车/空格触发弹窗的逻辑。
对应的JS代码示例：

const dateInput = document.getElementById('mydate');
// 监听键盘事件实现图标聚焦触发
dateInput.addEventListener('keydown', (e) => {
  if (e.key === 'Enter' || e.key === ' ') {
    e.preventDefault();
    // Chrome/Edge原生支持showPicker API直接唤起日期弹窗
    dateInput.showPicker();
  }
});

同时可以添加CSS给图标聚焦状态增加样式提示，符合无障碍的视觉反馈要求：

input[type="date"]:focus::-webkit-calendar-picker-indicator {
  outline: 2px solid #2196F3;
  outline-offset: 2px;
}

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