本文旨在解决 React 中只读输入框（）在使用辅助工具（如 Android 的 TalkBack）时，onClick 事件无法触发的问题。我们将探讨如何通过添加适当的 ARIA 属性和键盘事件处理，使该输入框像一个按钮一样，能够被辅助工具正确识别和操作，从而提升应用的可访问性。
在 React 开发中，我们有时会使用只读的 input 元素来展示数据，并期望用户通过点击该元素来触发一些操作。通常情况下，使用鼠标或键盘操作时，onClick 事件能够正常触发。然而，当用户使用辅助工具（如屏幕阅读器）时，这个事件可能会失效，导致用户无法与该元素进行交互。这是因为辅助工具依赖于键盘控制来实现可用性，而只读 input 元素默认情况下可能缺少必要的键盘交互支持。
理解问题本质：可访问性与键盘控制
屏幕阅读器等辅助工具主要通过键盘控制来实现可用性。对于一个按钮，用户可以通过 Tab 键将其选中，然后通过 Enter 或 Space 键来触发其功能。简单地添加 ARIA 角色并不能自动赋予元素这些行为。我们需要手动添加键盘交互支持，以确保辅助工具能够正确识别和操作该元素。
解决方案：添加 ARIA 属性和键盘事件处理
-
使用合适的 ARIA 角色：
虽然 role="button" 可以尝试，但在本例中，更合适的角色可能是 combobox，尤其是在点击输入框后会展开一个列表或其他交互元素的情况下。
-
处理键盘事件：
我们需要监听 onKeyDown 事件，并处理 Enter、Space、ArrowDown、ArrowUp 和 Escape 等按键。
import React, { useState } from 'react'; function MyInput() { const [isOpen, setIsOpen] = useState(false); const [text, setText] = useState('close'); const handleClick = () => { setIsOpen(!isOpen); setText(isOpen ? 'close' : 'open'); }; const handleKeyDown = (e) => { if (!isOpen && ["Space", "Enter", "ArrowDown", "ArrowUp"].includes(e.code)) { e.preventDefault(); // 阻止默认行为，例如滚动 setIsOpen(true); setText('open'); } else if (isOpen && ["Escape", "Enter"].includes(e.code)) { e.preventDefault(); setIsOpen(false); setText('close'); } }; return ( ); } export default MyInput;代码解释：
- isOpen：是一个状态变量，用于控制列表是否展开。
- handleClick：处理点击事件，切换 isOpen 的状态。
- handleKeyDown：处理键盘事件。
- 当列表关闭时，按下 Space、Enter、ArrowDown 或 ArrowUp 键，阻止默认行为，打开列表。
- 当列表打开时，按下 Escape 或 Enter 键，阻止默认行为，关闭列表。
- e.preventDefault(): 阻止了默认行为，例如滚动，这对于可访问性至关重要，因为辅助技术可能依赖于默认行为。
-
aria-expanded 属性：
aria-expanded 属性用于指示组合框当前是否展开。将其值设置为 isOpen 状态变量，可以确保辅助工具能够正确识别组合框的状态。
注意事项：
- 焦点管理： 确保在展开列表时，焦点能够正确地转移到列表中的第一个元素。
- 键盘导航： 实现列表中的键盘导航，例如使用 ArrowUp 和 ArrowDown 键来选择列表项。
- 无障碍名称： 确保 input 元素有一个无障碍名称，可以使用 aria-label 或 aria-labelledby 属性来提供。
- 测试： 使用屏幕阅读器等辅助工具进行测试，确保解决方案能够正常工作。
总结：
通过添加适当的 ARIA 属性和键盘事件处理，我们可以使 React 中的只读 input 元素在使用辅助工具时能够像一个按钮一样被正确识别和操作，从而提升应用的可访问性。在实现过程中，需要注意焦点管理、键盘导航和无障碍名称等细节，并进行充分的测试，以确保解决方案能够满足用户的需求。参考 WAI-ARIA Combobox 模式 可以获得更多关于实现可访问 Combobox 的信息。
