辅助功能：移动设备上的 Tab 键位于视口底部的导航覆盖层后面
Accessibility: Tabbing on mobile goes behind nav overlay at bottom of viewport
如标题所述。当您开始使用 Tab 键时，它不会考虑屏幕底部有导航覆盖的事实。因此，隐藏在叠加层后面的某些链接和按钮将被标记为用户看不到。
有没有办法覆盖此功能并强制显示选项卡项？
我发现了两件事：
DocumentOrShadowRoot.activeElement 这是我们捕获当前焦点按钮或 link.
的一种方式
Element.scrollIntoView() 这就是我们将焦点元素强制到视口中心的方式。
如您所述，尝试拦截 tab 等并自行调整滚动位置是一种可能性，但这可能会导致意外行为。
处理此问题的更好方法是调整布局以考虑底部的叠加层。
本质上，您所有的主要内容都将放在一个容器中（如果底部的叠加层是 <aside>，则这可能是 <main> 元素，否则只需使用 <div> ).
使该容器成为页面高度减去叠加层的高度。
这样一来，任何内容都不会隐藏在覆盖层后面（从技术上讲，覆盖层不再是覆盖层，因为它后面没有任何内容）。
这样做的美妙之处在于，当您到达页面的最底部时，所有内容都将可见，如果您没有在底部提供足够的边距/填充，则使用叠加层可能会导致部分内容被遮挡.
如标题所述。当您开始使用 Tab 键时，它不会考虑屏幕底部有导航覆盖的事实。因此，隐藏在叠加层后面的某些链接和按钮将被标记为用户看不到。
有没有办法覆盖此功能并强制显示选项卡项？
我发现了两件事：
DocumentOrShadowRoot.activeElement 这是我们捕获当前焦点按钮或 link.
的一种方式Element.scrollIntoView() 这就是我们将焦点元素强制到视口中心的方式。
如您所述，尝试拦截 tab 等并自行调整滚动位置是一种可能性，但这可能会导致意外行为。
处理此问题的更好方法是调整布局以考虑底部的叠加层。
本质上，您所有的主要内容都将放在一个容器中（如果底部的叠加层是 <aside>，则这可能是 <main> 元素，否则只需使用 <div> ).
使该容器成为页面高度减去叠加层的高度。
这样一来，任何内容都不会隐藏在覆盖层后面（从技术上讲，覆盖层不再是覆盖层，因为它后面没有任何内容）。
这样做的美妙之处在于，当您到达页面的最底部时，所有内容都将可见，如果您没有在底部提供足够的边距/填充，则使用叠加层可能会导致部分内容被遮挡.