反應 - 防止焦點走出模態當選項卡

我已經建立了自己的反應模態。當模式打開時按Tab鍵時，焦點仍然會轉到背景頁面。如何限制模態內部組件的焦點？反應 - 防止焦點走出模態當選項卡

下面的邏輯應該是什麼？

onKeyPress (e) { 
    if (e.keyCode === 9) { 
     e.preventDefault(); 
     // logic here? 
    } 
}

陣營模態代碼：

<ReactModal onKeyPress={this.onKeyPress} > 
    <input type="text"/> 
    <input type="text"/> 
</ReactModal>

來源

2017-07-04 Jefree Sujit

那麼，你可以使用一個焦點陷阱做到這一點。看看這個npm module。僅僅用這種焦點陷阱包裹你的模態。

<FocusTrap 
       focusTrapOptions={{ 
       ... 
       }} 
      > 
       <div className="trap"> 
       <p> 
        Here is a focus trap 
        {' '} 
        <a href="#">with</a> 
        {' '} 
        <a href="#">some</a> 
        {' '} 
        <a href="#">focusable</a> 
        {' '} 
        parts. 
       </p> 
       <p> 
        <button onClick={this.someCallback}> 
        Click Me 
        </button> 
       </p> 
       </div> 

</FocusTrap>

而不是給你實施這個建議，我建議你不要自己實現它。考慮無障礙是很難得到正確的。

相反，我建議您使用可訪問的現成模態組件，例如react-modal。它是完全可定製的，你可以把任何你想要的東西放在它裏面，但它能正確處理可訪問性，這樣盲人仍然可以使用你的模態。

來源

2017-07-04 09:22:53

反應 - 防止焦點走出模態當選項卡

回答

相關問題