React Native Bottom Sheet 在 Android TalkBack 下的无障碍访问问题解析

问题背景

React Native Bottom Sheet 是一个流行的底部弹窗组件库，但在 Android 平台上使用 TalkBack 屏幕阅读器时存在严重的无障碍访问问题。主要表现为：

1. 弹窗打开后焦点不会自动转移到弹窗内容
2. 用户可以通过滑动操作访问弹窗外的元素
3. 点击操作无法正确聚焦弹窗内元素
4. 弹窗没有正确表现为模态对话框

这些问题使得依赖屏幕阅读器的视障用户几乎无法正常使用该组件。

技术分析

焦点管理机制失效

在 Android 原生开发中，模态对话框会自动捕获焦点并限制焦点范围。但 React Native Bottom Sheet 的实现没有正确实现这一机制：

• 弹窗打开后，焦点仍停留在触发按钮上
• 没有设置 importantForAccessibility 属性限制焦点范围
• 缺少 accessibilityViewIsModal 属性声明

背景层干扰

BottomSheetBackdrop 组件存在问题：

• 没有正确处理无障碍属性
• 错误地拦截了点击事件
• 没有正确隐藏背景层元素

平台差异

iOS 版本工作正常，说明问题主要出在 Android 平台的特定实现上：

• Android 对模态对话框的无障碍要求更严格
• TalkBack 的事件处理机制与 iOS VoiceOver 不同
• 缺少平台特定的无障碍属性设置

解决方案

临时修复方案

对于当前版本，可以尝试以下临时解决方案：

1. 设置背景层属性：

<BottomSheetBackdrop 
  accessible={false}
  importantForAccessibility="no-hide-descendants"
/>

2. 手动管理焦点：

useEffect(() => {
  if (isOpen) {
    setTimeout(() => {
      // 手动将焦点转移到弹窗内第一个元素
      AccessibilityInfo.setAccessibilityFocus(reactTag);
    }, 100);
  }
}, [isOpen]);

3. 限制焦点范围：

<View 
  importantForAccessibility={isOpen ? "yes" : "no-hide-descendants"}
>
  {/* 弹窗内容 */}
</View>

长期建议

对于组件维护者，建议进行以下改进：

1. 实现自动焦点转移机制
2. 正确处理 Android 模态对话框的无障碍属性
3. 为背景层添加适当的无障碍属性
4. 实现平台特定的无障碍逻辑

最佳实践

开发者在实现可访问的底部弹窗时应注意：

1. 始终测试 TalkBack 和 VoiceOver 下的表现
2. 确保弹窗打开时焦点正确转移
3. 限制焦点只能在弹窗内移动
4. 提供明确的关闭机制
5. 为所有交互元素添加适当的无障碍标签

总结

React Native Bottom Sheet 在 Android TalkBack 下的无障碍问题主要源于焦点管理和模态对话框实现的不足。虽然可以通过临时方案缓解，但长期来看需要组件层面的改进。开发者在选择底部弹窗方案时，应将无障碍支持作为重要考量因素，确保所有用户都能获得一致的体验。