Meydan okuma: Erişilebilir modal
- React kursu
- İleri seviye
- Ders 56/56
- 6 dk
ARIA, klavye ve portal ile tam erişilebilir bir modal yazarsın.
Meydan okuma: Erişilebilir modal
Bu meydan okumada erişilebilir bir modal yazacaksın. Modal kökü role="dialog" ve aria-modal="true" taşır. useRef ile odağı modal içine alırsın.
Kapatma düğmesi aria-label ile etiketlenir. Esc tuşu modalı kapatır; useEffect içinde bir keydown dinleyicisi eklersin. Modal açıkken odak modal içinde kalır; Tab ile dışarı çıkılmaz.
Uygulama AccessibleModal bileşenini yaz
AccessibleModal yaz. useRef(null) ve useEffect içinde ref.current.focus(). Kök <div role="dialog" aria-modal="true" tabIndex="-1" ref={ref}> olsun, içinde <button aria-label="Kapat" onClick={onClose}>X</button> bulunsun. onClose özelliği alsın. Dışa aktar.
Başlangıç kodu
import { useRef, useEffect } from 'react';
// AccessibleModal bileşenini buraya yazÖrnek çözüm
import { useRef, useEffect } from 'react';
function AccessibleModal({ onClose }) {
const ref = useRef(null);
useEffect(() => {
ref.current.focus();
}, []);
return (
<div role="dialog" aria-modal="true" tabIndex="-1" ref={ref}>
<button aria-label="Kapat" onClick={onClose}>X</button>
</div>
);
}
export default AccessibleModal;Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Erişilebilir modalda Esc tuşu ne yapmalı?
- Formu göndermeli
- Sayfayı yenilemeli
- Hiçbir şey
- Modalı kapatmalı Doğru cevap
Açıklama: Esc modalı kapatmalı.
2 Boşluğu doldur: kapatma düğmesini etiketle
<button ____="Kapat" onClick={onClose}>X</button><button aria-label="Kapat" onClick={onClose}>X</button>Açıklama: aria-label düğmeye erişilebilir etiket verir.