React-Bootstrap Modal Accessibility Warnungen von React-A11y

Question

React-A11y schreit bei meinem Modal nach 'tabIndex' und 'role'. Mein Modal sieht wie folgt aus:

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

Wie man es von oben sehen können, ich tabIndex und Rolle in jedem Element haben, aber wenn ich ich herausgefunden Reagieren Plugin Kasse, dass A11y auf das Kind von Modal schreit, dass ich Zugriff nicht:

ich bin nicht zu verwenden, um andere modifizierte Modalverben wie React-Accessible-Modal erlaubt. Gibt es irgendwelche Möglichkeiten für mich, diese Warnung loszuwerden? Danke

Answer 1

Top-Element ist korrekt. Unmittelbares Kind div sollte role="document" und NO tabIndex haben. In der Tat sollte nur Ihr Wurzelelement (das Dialogfeld) tabIndex="-1" haben. Alle anderen Rollen sollten entfernt werden.

Tabindex beeinflusst die Tab-Reihenfolge. Wenn Sie 0 einstellen, kann das Element den Fokus über das Tabbing erhalten. Ich würde das nach Möglichkeit vermeiden. Browser ermöglichen die Fokussierung auf interaktive Elemente. Erwägen Sie das Umhüllen von Elementen, die Sie in einem Anker oder ähnlichem erhalten möchten.

Tabindex als positiv ist ein Nein Nein. Versäumt die Tab-Reihenfolge komplett.

Tabindex -1 ist eigentlich in Ordnung, aber nur, wenn das Element den Fokus zu erhalten, ist programmatisch über js

[Element].focus(); 

So sollte Ihr Dialog programmatisch den Fokus erhalten und nur eine natürliche Tabulatorreihenfolge für den Rest ermöglichen.

Hinweis: Trap-Fokus im Modal, bis der Benutzer das Modal schließt. Dann zurück Fokus auf den modalen Trigger (Anker oder Knopf, bevorzuge ich Anker)