React-Bootstrapモーダルのアクセシビリティに関する警告Re​​act-A11y

Question

React-A11yは私のModalで 'tabIndex'と 'role'について叫んでいます。私のモーダルは、次のようになります。

<Modal 
     aria-label="..." 
     tabIndex={-1} 
     role="Dialog" 
     show={this.state.showInfo} 
     onHide={this.closeInfo.bind(this)} > 
     <Modal.Header tabIndex={9} role="Dialog" closeButton> 
      <Modal.Title tabIndex={-1} role="Dialog">...</Modal.Title> 
     </Modal.Header> 
     <Modal.Body tabIndex={-1} role="Dialog"> 
      ... 
     </Modal.Body> 
    </Modal> 

あなたは上から見ることができるように、私はすべての要素のtabindexと役割を持っていますが、私は、私が見つけたプラグインを反応させるのチェックアウト時にA11yはモーダルの子供で叫んされていることをそのIアクセスすることはできません。

Iが反応-アクセス可能なモーダルのような他の修飾のモーダルを使用することはできませんしています。だから私はこの警告を取り除くために周りに行くための方法はありますか？ありがとう

Answer 1

トップエレメントが正しいです。即時の子供divはrole="document"といいえtabIndexを持つ必要があります。実際には、ルート要素（ダイアログボックス）にはtabIndex="-1"が必要です。その他の役割はすべて削除する必要があります。

タブインデックスは、タブの順序に影響します。 0に設定すると、その要素はタブでフォーカスを受け取ることができます。私は可能ならばこれを避けるでしょう。ブラウザはインタラクティブな要素に焦点を当てることができます。フォーカスを受けたい要素をアンカーなどでラップすることを検討してください。

肯定的なtabindexはいいえです。完全にタブ順序を駄目にする。

タブインデックスは-1実際に罰金ですが、その要素は、だからあなたのダイアログがプログラム的にフォーカスを受け取ると、ちょうど残りのための自然なタブ順序を許可JS

[Element].focus(); 

経由でプログラム的にフォーカスを受け取ることになっている場合のみです。

注：ユーザーがモーダルを閉じるまで、モーダルでフォーカスをトラップします。次に、モーダルトリガー（アンカーまたはボタン、私はアンカーが好きです）にフォーカスを戻します