Portaler, fokusfälla och stängning med Escape
Rendera modaler via portaler, fånga fokus för tangentbordsanvändare och stäng med Escape eller genom att klicka på bakgrunden för en stabil grund för tillgänglighet.
Portaler, fokusfälla och stängning med Escape är en gratis lektion i React Academy på CoddyKit. Detta är lektion 1 av 3. Ni kan läsa hela lektionen gratis nedan och sedan öva praktiskt i webbläsaren med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt. Den ingår i lärvägen för React Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i React Academy innehåller totalt 3 lektioner.
Varför portaler och fokusfällor?
Mål: Bygg modaler som fungerar för alla.
- Portal till body
- Fokusfälla håller tabbningen inne i modalen
- Escape/bakgrund för att stänga
Grunderna i a11y
- Använd role="dialog" + aria-modal="true"
- Fokusera på det första interaktiva elementet när modalen öppnas
- Återställ fokus till utlösaren när modalen stängs
Demo: portalmodal (öppna/stäng)
Rendera dialogrutan via en portal så att den hamnar över allt annat.
<div id="root"></div>Demo: grunderna i fokusfällor
Autofokusera den första knappen och fånga Tab i dialogrutan.
<div id="root"></div>Demo: stängningsmönster + återställ fokus
Stäng med Escape eller bakgrunden och återställ fokus till utlösarknappen.
<div id="root"></div>Tips och checklista
- Lägg till role="dialog" och aria-modal="true"
- Fokusera på det första kontrollen när modalen öppnas och återställ fokus till utlösaren när den stängs
- Hantera Escape och klick på bakgrunden
Kontroll av modalers a11y
Sammanfattning
Sammanfattning: Rendera modaler via en portal, håll fokus inne i dem och låt användarna stänga med Escape eller bakgrunden, samtidigt som fokus återställs till det som öppnade modalen.
Lär dig React med en AI-lärare – gratis
Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.
- Kurser
- 88
- Lektioner
- 324
Vanliga frågor
Är lektionen ”Portaler, fokusfälla och stängning med Escape” gratis?
Ja – hela texten till ”Portaler, fokusfälla och stängning med Escape” kan läsas gratis här på webben. Om Ni vill öva interaktivt med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt och låsa upp resten av kursen i React Academy, kan Ni uppgradera till CoddyKit PRO. Kursen i React Academy innehåller totalt 3 lektioner.
Vad lär jag mig i ”Portaler, fokusfälla och stängning med Escape”?
Rendera modaler via portaler, fånga fokus för tangentbordsanvändare och stäng med Escape eller genom att klicka på bakgrunden för en stabil grund för tillgänglighet. Ni övar på React Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.
Behöver jag någon erfarenhet för att börja lära mig React Academy?
Du behöver inga förkunskaper. Utbildningen i React Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 1 av 3.
Hur lång tid tar lektionen ”Portaler, fokusfälla och stängning med Escape”?
De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.
Kan jag skriva och köra kod i den här React Academy-lektionen?
Ja. Varje React Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.
Alla lektioner i den här kursen
- Portaler, fokusfälla och stängning med Escape
- Global hanterare för överlagringar (Context + Reducer)
- Meddelanden för tillgänglighet (aria-live)