Nimm wo möglich das native dialog-Element mit showModal, denn das gibt dir Top Layer, Fokus-Trapping und Escape-Handling geschenkt. Sonst brauchst du role dialog mit aria-modal, eine beschriftende Überschrift, Fokus, der beim Öffnen in den Dialog wandert und beim Schließen zurück zum Auslöser geht, einen Focus Trap, Escape zum Schließen und einen inerten Hintergrund, damit Screenreader und Tab nicht dorthin abwandern.
Warum Interviewer das fragen
Modals sind der Standardtest, ob ein Kandidat Barrierefreiheit als echte Arbeit behandelt oder als nachträglichen Haken auf einer Liste. Der Interviewer will speziell über Fokus-Management sprechen, denn genau das machen die meisten Implementierungen falsch, dazu das Bewusstsein, dass die Plattform inzwischen viel davon löst. Portale, Scroll-Locking und die Fokusrückgabe zu erwähnen zeigt, dass du eins ausgeliefert hast, das ein Audit überlebt hat.
So baust du deine Antwort auf
- Greif zuerst zur Plattform: das dialog-Element und showModal.
- Zähl die Anforderungen auf: Beschriftung, Fokus rein und raus, Escape, inerter Hintergrund.
- Erwähn Portale und Stacking- oder Scroll-Probleme.
- Sag, wie du es prüfst, nur mit Tastatur und mit einem Screenreader.
Beispielantwort
Mein erster Schritt ist, es nicht selbst zu bauen. Das native dialog-Element mit showModal kümmert sich um den Top Layer, damit ich nicht gegen z-index und overflow hidden bei Vorfahren kämpfe, und es gibt mir Escape und das Inertisieren des Hintergrunds ohne eine Zeile eigenen Code. Darüber hinaus beschrifte ich es trotzdem, also aria-labelledby auf die Überschrift, und ich setze den Fokus beim Öffnen auf ein sinnvolles erstes Element, meist die Überschrift oder das erste Feld statt auf den Schließen-Button. Beim Schließen gebe ich den Fokus dorthin zurück, wo er geöffnet wurde, denn Fokus ans body zu verlieren ist das, was Tastaturnutzer wirklich stranden lässt. Muss ich es aus Browser- oder Designgründen selbst bauen, dann ist es role dialog mit aria-modal true, ein echter Focus Trap auf Tab und Shift Tab, Escape und Klick auf den Hintergrund zum Schließen, inert auf dem Rest der Seite und ein Scroll-Lock, der das Layout nicht verschiebt. Ich teste zuerst nur mit Tastatur, dann mit einem Screenreader, denn diese Kombination fängt fast alles, was ein automatischer Checker übersieht.
Steht dieses Vorstellungsgespräch bald an? GhostPilot hört bei deinem Live-Call mit, erkennt die Frage in dem Moment, in dem sie gestellt wird, und bringt dir eine strukturierte Antwort in Echtzeit auf den Bildschirm. Probier es im nächsten Mock aus, oder hol dir einen $29 Session Pass, kein Abo, für den Ernstfall.
So funktioniert esNachfragen, mit denen du rechnen solltest
- Wie gehst du mit zwei gestapelten Dialogen um?
- Was geht schief, wenn ein Modal nicht in einem Portal gerendert wird?
- Wie würdest du einen asynchronen Fehler ansagen, der im Dialog auftaucht?
Weitere Fragen für React-Entwickler
Dein Interviewer stellt seine eigene Version davon. Kopier deine echte Stellenbeschreibung in den kostenlosen Question Predictor und bekomm die 20 Fragen, die diese Rolle am wahrscheinlichsten stellt, samt dem, worauf jede wirklich abzielt.
Meine Fragen vorhersagen