Tabindex funktioniert nicht in Chrome (React App)

Question

Ich benutze reagieren und reagieren-modal, um ein Overlay über eine Website zu erstellen. Dieses Overlay enthält verschiedene Elemente und auch ein Formular (Übersicht unten). Ich möchte in der Lage sein, den Benutzer mithilfe von TAB-Tasten durch das Formular zu führen. Ich habe tabindex=0 den erforderlichen Elementen zugewiesen, um in der Reihenfolge ihres Auftretens tabellarisch dargestellt zu werden.

Mein Problem ist: Es funktioniert nicht in Chrome (Version 61.0.3163.100), während es in Firefox funktioniert. Ich habe gelesen, dass dies passiert, wenn ein Element im DOM-Baum unsichtbar ist oder eine Höhe/Breite von 0 hat. Ich habe einige Styling-Änderungen vorgenommen, um das zu beheben, aber ohne Wirkung.

<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>  

Wie Sie eine der übergeordneten Elemente hat tabindex="-1" sehen können. Wenn das Problem durch die inspect-Funktion in Chrome oder programmgesteuert mit JS geändert wird, bleibt das Problem bestehen (oder ist es ein Unterschied, ob das Element ursprünglich mit diesem Index gerendert wurde?).

aktualisieren

Ich erkannte, dass etwas anderes die Probleme verursachte. Ich benutzte das CSS-Attribut initial: all auf dem Wurzelknoten meines Modals, um mein inneres CSS von allem außerhalb zu umgrenzen. Aus irgendeinem Grund verhinderte dies, dass der Tabindex funktioniert. Wenn Sie mir helfen können, zu verstehen, werde ich dies die Prämie belohnen. Mein Workaround verwendet einfach nicht all: initial (es ist sowieso nicht IE-kompatibel, aber es gibt auch keine wirklich gute Alternative, die mir bekannt ist).

Answer 1

all: initial setzt alle CSS-Eigenschaften des Knotens mit den Anfangseigenschaften zurück.

Für display Eigenschaft wäre der Anfangswert inline.

Die Einstellung all: initial auf das Stammdiv würde also die Eigenschaft display auf Inline setzen. Ein inline Element hat keine Höhe oder Breite, also sind diese 0x0.

Dies liegt auch daran, dass die div nur feste, absolut positionierte Elemente enthält.

React Modal überprüft, ob Elemente fokussierbar sind, indem eine Schleife durch alle Elemente im Modal ausgeführt wird. Damit ein Element jedoch fokussierbar ist, muss es sichtbar sein. Für jedes Element müssen wir bis zum body-Element iterieren, um seine Sichtbarkeit sicherzustellen.

Hier ist die Funktion, die prüft, ob das Element sichtbar ist.

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

Wie Sie unsere div würde sehen können, haben keine offsetHeight oder offsetWidth und würde als versteckt gehalten werden. Daher kann das Modal nicht fokussiert werden.