React中使用无障碍工具时文本输入框onClick事件未触发问题

安卓端TalkBack等移动端屏幕阅读器对原生表单控件的状态判定优先级高于自定义role属性：当<input>设置readOnly={true}时，TalkBack默认将其归类为不可交互的静态展示元素，不会为其挂载辅助操作的事件派发入口。这和桌面端屏幕阅读器优先读取自定义role的逻辑不同，仅添加button/combobox角色无法覆盖原生只读状态带来的语义判定。

要让该只读输入框在TalkBack下获得和原生按钮一致的交互表现，需补充以下配置：

• 添加tabIndex={0}：显式声明元素可被辅助技术聚焦，确保TalkBack遍历页面时能将其纳入可交互元素队列
• 同步添加aria-readonly="true"：不要仅依赖原生readOnly属性，需显式向无障碍树同步元素的只读状态，避免TalkBack将其识别为失效的禁用输入框
• 添加aria-disabled="false"：显式标记元素为可激活状态，抵消readOnly属性默认附带的“不可操作”语义
• 补充onTouchStart事件兜底：TalkBack激活可交互元素时，优先派发触摸事件而非标准click事件，需在该事件中拦截默认行为（避免触发输入框聚焦弹起软键盘）并执行业务逻辑

<input
  type="text"
  readOnly={true}
  role="button"
  tabIndex={0}
  aria-readonly="true"
  aria-disabled="false"
  value="触发操作"
  onClick={handleAction}
  onKeyDown={(e) => {
    // 响应回车、空格键操作
    if (e.key === 'Enter' || e.key === ' ') {
      e.preventDefault();
      handleAction();
    }
  }}
  onTouchStart={(e) => {
    // TalkBack 激活逻辑兜底
    e.preventDefault();
    handleAction();
  }}
/>

• 不要为了阻止输入给元素加disabled属性：该属性优先级高于所有自定义语义配置，会让所有屏幕阅读器直接忽略元素上绑定的交互事件
• 之前尝试的role="combobox"方案不生效，是因为combobox角色默认要求元素可编辑、可弹出关联选项列表，只读状态和该角色的内置语义冲突，TalkBack会直接忽略不匹配语义的角色配置
• 不要用div等非表单元素模拟只读输入框的样式来规避问题，这种写法会丢失原生输入框的语义，反而增加屏幕阅读器用户的识别成本

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