Reagieren - Verhindern, dass der Fokus beim Drücken der Tabulatortaste aus dem Modal-Modus ausgeht

Question

Ich habe ein eigenes React-Modal erstellt. Wenn ich beim Öffnen des Modales die Tabulatortaste drücke, wird der Fokus immer noch auf die Hintergrundseite gesetzt. Wie schränkt man den Fokus innerhalb der Komponenten im Modal ein?

Was sollte die Logik unten sein?

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

Reagieren Modal Code:

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

Answer 1

Nun, man es mit einem Fokus-Falle tun. Überprüfen Sie diese npm module dafür. Wickeln Sie einfach das, was Modal enthält, mit einer solchen Fokusfalle.

Anstatt Sie bei der Implementierung zu beraten, schlage ich vor, dass Sie es nicht selbst implementieren. Es ist schwer, die Barrierefreiheit in Betracht zu ziehen.

Stattdessen würde ich vorschlagen, dass Sie eine zugängliche modale Komponente wie react-modal verwenden. Es ist vollständig anpassbar, Sie können alles, was Sie wollen, in es setzen, aber es behandelt Barrierefreiheit richtig, so dass blinde Menschen können immer noch Ihre modal.