iOS设备开启Talkback时React网页应用日期选择器无法选中日期问题

旁白模式下基础交互逻辑说明：单指轻点元素为选中并朗读内容，快速双击任意屏幕位置才会触发元素的点击交互，可先确认操作方式是否正确，排除操作失误问题。

基础属性适配 #

• 每个可选择的日期单元格必须明确标注可交互属性：如果使用<div>模拟日期按钮，必须添加role="button"属性，同时设置tabIndex={0}保证可通过辅助功能聚焦；优先使用原生<button>元素作为日期单元格，自带可交互的无障碍属性无需额外配置
• 每个日期单元格添加aria-label属性，值为完整可读的日期文本，比如aria-label="2024年6月15日"，不要仅展示数字日期
• 日期选中状态同步更新aria-selected属性，选中时值为true，未选中时值为false
• 整个日历容器设置role="grid"，每行日期设置role="row"，每个日期单元格额外补充role="gridcell"，符合WAI-ARIA日历组件的规范要求，不要给任何日期相关元素设置aria-hidden="true"

事件兼容处理 #

iOS旁白会对普通onClick事件产生劫持或延迟，需要同时绑定触摸事件触发选中逻辑，代码示例如下：

const handleDateSelect = (targetDate) => {
  // 原有日期选中逻辑
  setSelectedDate(targetDate)
}

// 日期单元格绑定示例
<button
  aria-label={`${targetDate.getFullYear()}年${targetDate.getMonth()+1}月${targetDate.getDate()}日`}
  aria-selected={selectedDate?.getTime() === targetDate.getTime()}
  onClick={() => handleDateSelect(targetDate)}
  onTouchEnd={(e) => {
    e.preventDefault()
    handleDateSelect(targetDate)
  }}
>
  {targetDate.getDate()}
</button>

第三方组件适配 #

如果使用AntD Mobile、MUI X等第三方组件库的日期选择器，优先升级到组件库的最新稳定版本，主流组件库已经默认适配了iOS旁白的兼容问题；如果仍存在异常，可以在组件配置项中开启无障碍适配开关，例如关闭自定义的事件拦截、强制开启无障碍标签生成。

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