react native a11y：将元素分组以获得更好的画外音通知，同时仍然暴露内部可访问元素

Question

根据我目前的理解，VoiceOver 从左到右、从上到下宣布内容，因为它假定视觉用户是这样看内容的。

（我还不明白画外音是如何准确计算出顺序的，它当然不依赖于渲染的布局树。希望得到任何指示）

如果你有一个跨多行的原子内容，你想通过画外音一起宣布，你可以通过在容器视图上添加accessible={true}来对其进行分组。 问题是，这使得任何内部交互元素都无法用于可访问性焦点，并且只允许将焦点放在这个容器视图上。

考虑以下设计：

两张卡片并排显示，每张卡片都有标题、副标题和号召性用语。 在屏幕阅读器焦点上，理想情况下我们希望首先读取第一张卡片的内容，并宣布其 CTA，然后移动到第二张卡片并执行相同的操作。 默认情况下画外音最终会宣布 title1、title2、subtitle1、subtitle2、cta1、cta2，这对用户来说没有意义。

要解决此问题，一种方法是使容器视图 accesible={true}，这有一个副作用，即 CTA 现在对可访问性焦点不可用，因此屏幕阅读器用户无法到达或单击 CTA。

有什么首选模式可以解决这个问题吗？

编辑：为每张卡添加示例代码：

<View style={...} key={...}>
  <Text>{title}</Text>
  <Text>{subtitle}</Text>
  <Button flat secondary onPress={() => onPress(item)}>
    {cta}
  </Button>   
</View>

Answer 1

查看UIAccessibilityContainer ，尤其是accessibilityElements属性。

这些都是 Objective-C 对象并且没有反应，但希望反应允许您访问它们。

Answer 2

虽然我无法提供答案，但我已经在调查将其添加到我们的项目中时对自己进行了测试，但我想我会把它交给其他人，因为这个 Gist 似乎是您需要的答案：

https://gist.github.com/louy/6b66c45ae47bb4e3bac5a104dd0649ff

它涉及创建一个桥接器来实现来自 JS/TS 端的 @slugolicious' 答案中的命令。