解决 React 只读输入框在使用辅助工具时 onClick 事件失效的问题

本文旨在解决 React 中只读输入框（<input readOnly={true} type="text"/>）在使用辅助工具（如 Android 的 TalkBack）时，onClick 事件无法触发的问题。我们将探讨如何通过添加适当的 ARIA 属性和键盘事件处理，使该输入框像一个按钮一样，能够被辅助工具正确识别和操作，从而提升应用的可访问性。

在 React 开发中，我们有时会使用只读的 input 元素来展示数据，并期望用户通过点击该元素来触发一些操作。通常情况下，使用鼠标或键盘操作时，onClick 事件能够正常触发。然而，当用户使用辅助工具（如屏幕阅读器）时，这个事件可能会失效，导致用户无法与该元素进行交互。这是因为辅助工具依赖于键盘控制来实现可用性，而只读 input 元素默认情况下可能缺少必要的键盘交互支持。

理解问题本质：可访问性与键盘控制

屏幕阅读器等辅助工具主要通过键盘控制来实现可用性。对于一个按钮，用户可以通过 Tab 键将其选中，然后通过 Enter 或 Space 键来触发其功能。简单地添加 ARIA 角色并不能自动赋予元素这些行为。我们需要手动添加键盘交互支持，以确保辅助工具能够正确识别和操作该元素。

解决方案：添加 ARIA 属性和键盘事件处理

1. 使用合适的 ARIA 角色：

   虽然 role="button" 可以尝试，但在本例中，更合适的角色可能是 combobox，尤其是在点击输入框后会展开一个列表或其他交互元素的情况下。

   <input
     readOnly={true}
     type="text"
     role="combobox"
     aria-haspopup="listbox" // 根据实际情况修改，例如 "menu"
     aria-expanded={isOpen} // isOpen 是一个状态变量，表示列表是否展开
     onClick={handleClick}
     onKeyDown={handleKeyDown}
   />

   登录后复制

2. 处理键盘事件：

   

   黑点工具

   在线工具导航网站，免费使用无需注册，快速使用无门槛。

   18

   查看详情

   我们需要监听 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 (
       <input
         readOnly={true}
         type="text"
         role="combobox"
         aria-haspopup="listbox"
         aria-expanded={isOpen}
         onClick={handleClick}
         onKeyDown={handleKeyDown}
         value={text}
       />
     );
   }
   
   export default MyInput;
   

   登录后复制

   代码解释：

   • isOpen：是一个状态变量，用于控制列表是否展开。
   • handleClick：处理点击事件，切换 isOpen 的状态。
   • handleKeyDown：处理键盘事件。
     • 当列表关闭时，按下 Space、Enter、ArrowDown 或 ArrowUp 键，阻止默认行为，打开列表。
     • 当列表打开时，按下 Escape 或 Enter 键，阻止默认行为，关闭列表。
   • e.preventDefault(): 阻止了默认行为，例如滚动，这对于可访问性至关重要，因为辅助技术可能依赖于默认行为。

3. aria-expanded 属性：

   aria-expanded 属性用于指示组合框当前是否展开。将其值设置为 isOpen 状态变量，可以确保辅助工具能够正确识别组合框的状态。

注意事项：

• 焦点管理： 确保在展开列表时，焦点能够正确地转移到列表中的第一个元素。
• 键盘导航： 实现列表中的键盘导航，例如使用 ArrowUp 和 ArrowDown 键来选择列表项。
• 无障碍名称： 确保 input 元素有一个无障碍名称，可以使用 aria-label 或 aria-labelledby 属性来提供。
• 测试： 使用屏幕阅读器等辅助工具进行测试，确保解决方案能够正常工作。

总结：

通过添加适当的 ARIA 属性和键盘事件处理，我们可以使 React 中的只读 input 元素在使用辅助工具时能够像一个按钮一样被正确识别和操作，从而提升应用的可访问性。在实现过程中，需要注意焦点管理、键盘导航和无障碍名称等细节，并进行充分的测试，以确保解决方案能够满足用户的需求。参考 WAI-ARIA Combobox 模式 可以获得更多关于实现可访问 Combobox 的信息。

以上就是解决 React 只读输入框在使用辅助工具时 onClick 事件失效的问题的详细内容，更多请关注php中文网其它相关文章！