React switch 专注于路由变化
React switch focus on route change
我是 React 和 Javascript 的新手，但希望有人可以提供有关如何可靠地切换键盘焦点的路线更改的想法。下面，在LHS上选择任何菜单项（绿色框为例）会导致主屏幕（橙色框）发生变化，但在按下Enter后键盘焦点仍然在LHS上。
我试图实现的是键盘焦点切换为突出显示的文本（蓝色框），从而从可用性的角度提供更好的体验。搜索 google 后，我相信要实现这一目标的命令是以下之一：
document.getElementById('content-container').focus();
document.getElementById('reviews-in-progress-title').focus();
声明的 ID 是调试工具中蓝色框中的那些 ID。它们分别代表主屏幕和特定元素，但是都没有达到预期的效果。
我 能够实现的是使用以下方法将焦点切换到红框中突出显示的元素：
document.getElementById('sortable-column-manuscriptTitle').focus();
所以，我的问题是：为什么我可以将焦点切换到红色框，而不是蓝色框？感觉这将是一个非常普遍的（并且 solved/understood）问题，但我目前无法破解它。非常感谢收到任何意见。
谢谢，
菲尔
某些浏览器不允许将焦点移动到不是交互式元素的元素上。在蓝色框中，您有一个 <h1>，它本身不可聚焦。在红色框中，您有一个 <buton>， 是 可聚焦的。
要绕过它，请将 tabindex="-1" 添加到 <h1>。
这将允许通过 JS 将焦点移动到非交互元素，但不会允许用户tab
现在，话虽如此，一般来说您应该不移动用户的焦点，除非有充分的理由。你提到你想做一个
"better experience from a usability point of view"
作为仅使用键盘的用户，我会发现这种体验更差。如果我是该应用程序的新用户并且我想浏览 LHS 菜单以查看可用的内容，我会 tab 到菜单，然后按 enter 或 space 到 select 菜单，然后查看右侧出现的内容。然后我想 tab 到下一个菜单项并 select 它以查看出现的内容，但是你将我的焦点移到了右边所以现在我必须 shift+tab 一路回到菜单。如果我使用的是 sip-and-puff 设备或其他辅助技术而不是键盘，那将需要付出很多努力。
所以您的意图是好的，但可能会给某些用户带来很多困难。这就是为什么我建议 不要 移动用户的注意力，除非有非常非常好的理由。
当然也可以反其道而行之。如果焦点 未 移动，则啜饮用户将不得不一直导航到右侧以与出现的内容进行交互。
您必须做一些研究，看看什么可以使大多数用户受益而不会对其他用户产生不利影响。
我是 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();
所以，我的问题是：为什么我可以将焦点切换到红色框，而不是蓝色框？感觉这将是一个非常普遍的（并且 solved/understood）问题，但我目前无法破解它。非常感谢收到任何意见。
谢谢， 菲尔
某些浏览器不允许将焦点移动到不是交互式元素的元素上。在蓝色框中，您有一个 <h1>，它本身不可聚焦。在红色框中，您有一个 <buton>， 是 可聚焦的。
要绕过它，请将 tabindex="-1" 添加到 <h1>。
这将允许通过 JS 将焦点移动到非交互元素，但不会允许用户tab
现在，话虽如此，一般来说您应该不移动用户的焦点，除非有充分的理由。你提到你想做一个
"better experience from a usability point of view"
作为仅使用键盘的用户，我会发现这种体验更差。如果我是该应用程序的新用户并且我想浏览 LHS 菜单以查看可用的内容，我会 tab 到菜单，然后按 enter 或 space 到 select 菜单，然后查看右侧出现的内容。然后我想 tab 到下一个菜单项并 select 它以查看出现的内容，但是你将我的焦点移到了右边所以现在我必须 shift+tab 一路回到菜单。如果我使用的是 sip-and-puff 设备或其他辅助技术而不是键盘，那将需要付出很多努力。
所以您的意图是好的，但可能会给某些用户带来很多困难。这就是为什么我建议 不要 移动用户的注意力，除非有非常非常好的理由。
当然也可以反其道而行之。如果焦点 未 移动，则啜饮用户将不得不一直导航到右侧以与出现的内容进行交互。
您必须做一些研究，看看什么可以使大多数用户受益而不会对其他用户产生不利影响。