在 iOS 上加载新内容时以编程方式设置焦点

Question

我正在尝试设置自动聚焦于第一篇加载的文章。 （例如，用户单击“加载更多”按钮并加载新文章）。

我的反应实现：

我在

ref

组件中使用

<Link>

属性，该属性来自react-router库，然后我在生命周期方法

focus()

中调用

componentDidMount()

方法。

它适用于除 iOS 之外的所有设备。如果我在 iPhone 上打开画外音，然后在网页上单击按钮，它不会自动聚焦于第一个加载的文章）。它仅适用于 html 锚标记。

我之前读过一些文章，看起来不可能以这种方式做到这一点，只能通过触发一些事件来实现。 点击事件。

有人可以确认以这种方式解决它是不可能的，或者有任何不使用 jquery 的解决方法吗？

Answer 1

如果有人想知道这一点，我找到了这篇文章：

https://medium.com/swlh/how-ios-voiceover-demonstrates-the-power-and-flexibility-of-react-5369679b6a6b

我正在从 CRA 迁移到新的 React 框架。到目前为止，我已经尝试过 Next.js、gatsby、remix、expo。我遇到的问题是，我已经完成了 WCAG 测试运行，基本上标准要求您将第一个标题集中在事件上，例如打开模式或切换到新页面时。我使用过react-router-dom，因为它允许手动控制页面转换之间的焦点行为（尽管手动聚焦事物确实有点烦人）-但是随着CRA的到期，我必须想出一个好的办法合规的解决方案。服务器渲染的解决方案通过触发页面加载来实现此目的，这会导致 iOS 中的 Safari（不是 Chrome！目前已损坏）将焦点放在页面上的第一个项目上。在 OSX 中，页面加载会导致 Voiceover 读出页面的全部内容。在使用客户端路由的 Next.js 和 Gatsby 中，必须在页面转换后手动处理焦点（否则它只会聚焦在您单击的页面中间）。

有一段时间，我的 useEffect(()=> ref.current.focus()) 由于框架问题而无法工作。但现在我在文章中发现了这一点（我在 Remix 中遇到了同样的问题，它可以在 root.tsx 中工作，但在路线中不起作用 - 这意味着我错过了一些东西），我想我必须重新探索Next.js / Expo / Gatsby 再次，因为糟糕的焦点行为可能是由 VO 不关注交互元素引起的（我之前已经这样做过，但我总是通过将焦点更改为按钮来处理焦点，所以我没有意识到 Voiceover 的 element.focus() 功能存在“交互元素”限制。显然，画外音不会集中在 或 a 上，而是集中在 , , 或 （目前正在寻找是否可以找到 Safari 交互元素的列表，但我可能不得不暴力破解它。

当客户端路由时，Voiceover iOS（和 OSX）处理焦点的行为基本上是聚焦于最接近您在下一页上单击的内容的任何元素。这是一个有点错误的行为。在 remix 中，单击 会将焦点重置到页面顶部（然后在 OSX 上读出页面），但这会丢失 redux/client 状态。