Tabindex在Chrome中不起作用（React应用）

Question

我使用react和react-modal在网站上创建覆盖图。此叠加层包含各种元素以及一个表单（下面的概述）。我希望能够使用TAB键引导用户完成表单。我tabindex=0将必需的元素分配为可出现的顺序。

我的问题是：它不能在Chrome（版本61.0.3163.100）中工作，而可以在Firefox中工作。我读到，如果DOM树上的任何元素不可见或高度/宽度为0，就会发生这种情况。我进行了一些样式更改以解决此问题，但没有任何效果。

<div class="ReactModalPortal">
<div data-reactroot="" class="ReactModal__Overlay" style="position: fixed; top: 0px; left: 0px; right: 0px; bottom: 0px;">
    <div class="ReactModal__Content" tabindex="-1" aria-label="Questionnaire" style="position: absolute; top: 0px; left: 0px; right: 0px; height: 100%; background: transparent none repeat scroll 0% 0%; overflow: auto;">
        <!-- Some other stuff and nested elements -->
        <div id="...">
            <form>
                <input tabindex="0">
                <button tabindex="0">
            </form> 
        </div>   
    </div>   
</div>    

如您所见，父元素之一具有tabindex="-1"。通过Chrome中的inspect函数或使用JS编程更改它时，问题仍然存在（或者如果元素最初是使用此索引呈现的，这是否有所不同？）。

更新资料

我意识到是其他原因导致了问题。我在initial: all模态的根节点上使用CSS属性，以将内部CSS与外界隔离。由于某种原因，这使tabindex无法正常工作。如果您能帮助我理解，我将为您提供赏金。我的解决方法是不使用all: initial（无论如何它都不兼容IE，但是我也没有真正好的替代方法）。

Answer 1

all: initial 使用初始属性重置节点的所有CSS属性。

对于display属性，初始值为inline。

因此，设置all: initial为root div会将display属性设置为inline。一个inline元件不具有高度或宽度，所以这些是为0x0。

这也是因为div包含仅固定的，绝对定位的元素。

React Modal通过运行模态内所有元素的循环来检查元素是否可聚焦。但是，要使元素可聚焦，它必须是可见的。对于每个元素，我们都必须迭代直到body元素以确保其可见性。

这是检查元素是否可见的函数。

function hidden(el) {
  return (
    (el.offsetWidth <= 0 && el.offsetHeight <= 0) || el.style.display === "none"
  );
}

如您所见，我们的div将没有offsetHeight或offsetWidth将被视为隐藏的。因此，模式不能不集中。