React switch 关注路由变化

Question

我对 React 和 Javascript 非常陌生，但希望有人能够提供有关如何可靠地将键盘焦点切换到路由更改的想法。在下文中，选择 LHS 上的任何菜单项（以绿色框为示例）会导致主屏幕（橙色框）发生变化，但按 Enter 后键盘焦点仍保留在 LHS 上。

我试图实现的是键盘焦点切换为突出显示的文本（蓝色框），从而从可用性的角度提供更好的体验。在搜索了谷歌之后，我相信实现这一目标的命令是以下之一：

document.getElementById('content-container').focus();

document.getElementById('reviews-in-progress-title').focus();

声明的 ID 是调试工具中蓝色框中的 ID。它们分别代表主屏幕和特定元素，但是，都没有达到预期的效果。

我能够使用以下方法将焦点切换到红色框中突出显示的元素：

document.getElementById('sortable-column-manuscriptTitle').focus();

所以，我对地板的问题是：为什么我能够将焦点切换到红色框，而不是蓝色框？感觉这将是一个非常普遍（并且已解决/理解）的问题，但我目前无法破解它。如有任何意见，我们将不胜感激。

谢谢， 菲尔

Answer 1

如果元素不是交互式元素，某些浏览器将不允许将焦点移动到元素上。在蓝色框中，您有一个 <h1>，它本身不是可聚焦的。在红色框中，您有一个<buton>，它是可聚焦的。

要绕过它，请将tabindex="-1" 添加到<h1>。

这将允许通过 JS 将焦点移动到非交互式元素，但 不会 允许用户 tab 到它。

现在，话虽如此，一般情况下，您应该不移动用户的焦点，除非有非常好的理由。你提到你想这样做

“从可用性的角度来看更好的体验”

作为仅使用键盘的用户，我会发现这种体验更差。如果我是该应用程序的新用户并且我想探索 LHS 菜单以查看可用的内容，我会 tab 到菜单，按 enter 或 空格 选择菜单，然后查看右侧出现的内容。然后我想 tab 到下一个菜单项并选择它以查看出现的内容，但是您将我的焦点移到了右侧，所以现在我必须 shift+tab 一直返回菜单。如果我使用sip-and-puff 设备或其他辅助技术而不是键盘，那将是一个很大的努力。

所以你的意图是好的，但它可能会给一些用户带来很多困难。这就是为什么我建议不要移动用户的焦点，除非有非常非常好的理由。

当然可以提出相反的论点。如果焦点没有移动，则啜饮和吹气的用户必须一直导航到右侧才能与显示的内容进行交互。

您必须进行一些研究，看看什么可以使大多数用户受益，而不会对其他用户产生不利影响。