React Native 中嵌套元素的可访问性焦点顺序不正确 [英] Incorrect accessibility focus order for nested elements in React Native

问题描述

我在一个混合匹配应用中工作，我们将 React Native 组件用于几个模块.在本例中，我有一个表格视图，其中我们在一些单元格中添加了 RN 组件.

I'm working in a mixed-match app where we use React Native components for a few modules. In this case, I've a tableview in which we add RN components in a few of the cells.

我能够为这些 React Native 组件中的嵌套元素启用可访问性，但在 UITableView 中添加时，焦点顺序似乎不正确.

I was able to enable accessibility for nested elements in those React Native components but the order of focus seems to be incorrect when added in a UITableView.

视图层次结构如下所示:

The view hierarchy would be like the below:

 <E0>
    <E1 accessible={true}>
       <E11 accessible={true}>
       <E12 accessible={true}>...
    <E2 accessible={true}>
       <E21 accessible={true}>
       <E22 accessible={true}>...

我希望焦点顺序是E1、E11、E12、E2、E21、E22

I'm expecting the focus order to be E1, E11, E12, E2, E21, E22

但它是按顺序宣布的E1、E2、E11、E12、E21、E22即，父元素，然后是子元素

but it's announcing in the order E1, E2, E11, E12, E21, E22 ie, parent elements and then child elements

在 iOS 中，我们有 accessibilityElements 属性来设置顺序.有没有办法像 React Native 那样设置焦点顺序，或者有没有其他方法可以实现?

In iOS we have the accessibilityElements property to set the order. Is there any way to set the focus order like that in React Native, or is there any other way to achieve that?

P.S.:当我在视图控制器中显示特定组件时，相同的组件按预期工作(即以正确的顺序宣布画外音).

P.S.: The same component works as expected, (ie. voiceover is announced in the correct order) when I display the particular component in a view controller.

任何及时的帮助/有用的建议将不胜感激，因为我在这个问题上花了几天多的时间.

Any timely help / useful suggestions would be greatly appreciated as I've spent more than a couple of days in this issue.

推荐答案

假设启用了屏幕阅读器的人不怎么使用他们的视觉，你可以在元素周围移动，让屏幕阅读器在正确的顺序.

Under the assumption that people with a screen reader enabled does not use their visual as much, you can shift around the elements, making the screen reader read them in the right order.

在您的情况下，这意味着如果屏幕阅读器已启用，然后将 marginTop 例如 50 添加到 E2

In your case that would mean if the screen reader is enabled, then add a marginTop of for instance 50 to E2

这是一个例子:Left 是启用屏幕阅读器的时候.

Here's an example: Left is when the screenreader is enabled.

检查屏幕阅读器是否启用可以通过:AccessibilityInfo

Checking whether the screen reader is enabled can be done with: AccessibilityInfo

免责声明:我知道这是一个相当讽刺的答案，因为它只是避免了问题而不是解决问题，但我还是发布了它，因为它确实解决了与您类似的问题，而且似乎没有解决方案来自 React Native.

Dislaimer: I know this is a rather ridicules answer, since it just avoids the issue instead of solving it, but I'm posting it anyway, because it did solve a similar problem to yours and it seems there is no solution coming from React Native.

这篇关于React Native 中嵌套元素的可访问性焦点顺序不正确的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！