本文旨在解决React应用中，只读文本输入框（<input readOnly={true} type=”text”/>）在启用辅助工具（如Android TalkBack）时，onClick事件无法触发的问题。我们将探讨如何通过添加适当的ARIA属性和键盘事件处理，使该输入框能够像按钮一样，实现无障碍访问的交互体验。
在开发具有无障碍特性的React应用时，我们经常会遇到一些意想不到的问题。其中一个常见问题是，当使用辅助工具（例如Android的TalkBack）时，只读文本输入框的onClick事件无法正常触发。这是因为辅助工具依赖于键盘控制来实现可用性。
一个按钮的行为包括键盘交互：它是可聚焦的，并且可以通过键盘上的 <kbd>Enter</kbd> 键和 <kbd>Space</kbd> 键来激活。它也可以通过语音控制，使用其可访问的名称来找到。仅仅添加 ARIA role 并不能简单地实现这种行为，需要手动实现。
以下将介绍如何通过添加适当的ARIA属性和键盘事件处理，使只读文本输入框在辅助工具中表现得像一个按钮一样。
增强键盘交互
首先，确保你的只读输入框可以获得焦点。通常，<input readonly> 元素默认就可以获得焦点。
接下来，你需要手动添加键盘交互逻辑。以下代码片段演示了如何处理 <kbd>Enter</kbd> 键和 <kbd>Space</kbd> 键的按下事件：
<input readOnly={true} type="text" role="combobox" aria-haspopup="listbox" // 或者其他适当的值，例如 "true" aria-expanded={isOpen} // 根据你的组件状态设置 onClick={handleClick} onKeyDown={e => { if (isClosed && ["Space", "Enter", "ArrowDown", "ArrowUp"].includes(e.code)) { setIsOpen(true); // 打开下拉框或者执行其他操作 e.preventDefault(); // 阻止默认行为，例如滚动页面 } else if (isOpen && ["Escape", "Enter"].includes(e.code)) { setIsOpen(false); // 关闭下拉框或者执行其他操作 e.preventDefault(); // 阻止默认行为 } }} />
代码解释：
- role=”combobox”：指定该输入框的角色为组合框，这有助于辅助工具理解其功能。
- aria-haspopup=”listbox”：表明该组合框会弹出一个列表框。根据你的具体实现，可以设置为 “true” 或其他适当的值。
- aria-expanded={isOpen}：使用 aria-expanded 属性来指示组合框是否展开。isOpen 是一个布尔值，表示组合框的展开状态。
- onKeyDown：监听键盘事件，并根据按下的键执行相应的操作。
- 当组合框关闭时，按下 <kbd>Space</kbd>、<kbd>Enter</kbd>、<kbd>ArrowDown</kbd> 或 <kbd>ArrowUp</kbd> 键会打开组合框。
- 当组合框打开时，按下 <kbd>Escape</kbd> 或 <kbd>Enter</kbd> 键会关闭组合框。
- e.preventDefault()：阻止默认行为，例如滚动页面。
注意事项：
- 上述代码只是一个示例，你需要根据你的具体需求进行调整。
- 你需要实现 handleClick 函数来处理鼠标点击事件。
- 确保你的组件状态 isOpen 正确更新，以便 aria-expanded 属性能够反映组合框的实际状态。
- 参考 Combobox pattern 以获取有关如何实现键盘交互以及使用哪些 ARIA 角色和状态的指导。
总结
通过添加适当的 ARIA 属性和键盘事件处理，你可以使只读文本输入框在使用辅助工具时能够像按钮一样工作。这有助于提高你的React应用的无障碍性，并为所有用户提供更好的用户体验。重要的是理解辅助工具的工作原理，并根据需要手动添加必要的交互逻辑。
以上就是解决React中只读文本输入框在使用辅助react android 工具 常见问题 键盘事件 点击事件 talk 事件 input 键盘事件 android