TabindexがChromeで動作しない（Reactアプリ）

Question

私はreactとreact-modalを使用してウェブサイト上にオーバーレイを作成します。このオーバーレイには、さまざまな要素とフォーム（以下の概要）が含まれています。私はTabキーを使用してフォームを通してユーザーを誘導できるようにしたい。私はtabindex=0を必要な要素に割り当て、出現順にタブブルにする。

私の問題は、Firefoxで動作している間はChrome（バージョン61.0.3163.100）では動作しません。私は、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>  

あなたは親要素の1つはtabindex="-1"を持って見ることができるように。 Chromeのinspect関数やJSを使用してプログラムで変更すると、問題は解決されません（要素が最初にこのインデックスでレンダリングされた場合の違いです）。

更新

私は何か他のものが問題を引き起こしていたことに気づきました。私は内側のCSSを外部のすべてから守るために、私のモーダルのルートノードにCSS属性initial: allを使用していました。何らかの理由でこれがtabindexの動作を妨げていました。あなたが私の理解を助けることができれば、私はこの賞金に報酬を与えます。私の回避策はちょうどall: initialを使用していません（それはIEと互換性がありませんが、私が気づいている本当の良い代替手段もありません）。

Answer 1

all: initialは、初期プロパティを持つノードのすべてのCSSプロパティをリセットします。

displayプロパティの場合、初期値はinlineになります。

したがって、all: initialをルートdivに設定すると、displayプロパティがinlineに設定されます。 inline要素には高さや幅がないため、これらは0x0です。

divには、固定された絶対配置された要素のみが含まれているためです。

モダール内のすべての要素にループを実行して、要素がフォーカス可能かどうかをチェックします。しかし、要素をフォーカス可能にするには、可視でなければなりません。各要素に対して、body要素まで視認性を確保するために反復処理を行う必要があります。

要素が表示されているかどうかを調べる関数です。

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

あなたが見ることができるように、私たちのdivが全くoffsetHeightまたはoffsetWidthを持っていないだろうし、隠されたとみなされます。したがって、モーダルに焦点を当てることはできません。