// Piège n°1 : un <div onClick> n'est JAMAIS un bouton accessible
// MAUVAIS
function CarteMauvaise({ onOuvrir }) {
    return <div onClick={onOuvrir}>Voir le détail</div>;
    // pas focusable au clavier, pas annoncé comme interactif, pas déclenchable via Entrée/Espace
}

// BON
function CarteBonne({ onOuvrir }) {
    return <button onClick={onOuvrir} className="carte-bouton">Voir le détail</button>;
}

// Gestion du focus après une action -- React ne le fait jamais automatiquement
function ModaleConfirmation({ ouverte, onFermer, titre }) {
    const boutonFermerRef = useRef(null);
    const dernierFocusRef = useRef(null);

    useEffect(() => {
        if (ouverte) {
            dernierFocusRef.current = document.activeElement; // pour restaurer à la fermeture
            boutonFermerRef.current?.focus();
        } else {
            dernierFocusRef.current?.focus();
        }
    }, [ouverte]);

    if (!ouverte) return null;

    return (
        <div role="dialog" aria-modal="true" aria-labelledby="titre-modale">
            <h2 id="titre-modale">{titre}</h2>
            <button ref={boutonFermerRef} onClick={onFermer}>Fermer</button>
        </div>
    );
}

// Live region pour annoncer un changement asynchrone (ex: résultat de recherche, erreur de soumission)
function Recherche() {
    const [resultats, setResultats] = useState([]);
    const [statut, setStatut] = useState("");

    async function rechercher(terme) {
        setStatut("Recherche en cours...");
        const data = await fetch(`/api/recherche?q=${terme}`).then((r) => r.json());
        setResultats(data);
        setStatut(`${data.length} résultat(s) trouvé(s)`);
    }

    return (
        <div>
            <input onChange={(e) => rechercher(e.target.value)} aria-label="Rechercher" />

            {/* zone invisible visuellement mais annoncée par un lecteur d'écran à chaque changement */}
            <div aria-live="polite" className="sr-only">{statut}</div>

            <ul>{resultats.map((r) => <li key={r.id}>{r.titre}</li>)}</ul>
        </div>
    );
}

// useId : génère un id stable et unique par instance, essentiel pour relier label/aria-describedby
// sans collision en cas de rendu multiple du même composant (SSR compris)
import { useId } from "react";

function ChampMotDePasse({ label }) {
    const id = useId();
    const idAide = `${id}-aide`;

    return (
        <div>
            <label htmlFor={id}>{label}</label>
            <input id={id} type="password" aria-describedby={idAide} />
            <p id={idAide}>8 caractères minimum</p>
        </div>
    );
}
// avant useId : un id codé en dur ("mdp-input") cassait dès que le composant était rendu deux fois sur la page

// eslint-plugin-jsx-a11y : détecte automatiquement les erreurs d'accessibilité courantes en CI
// npm install --save-dev eslint-plugin-jsx-a11y
// .eslintrc : "extends": ["plugin:jsx-a11y/recommended"]
// signale : img sans alt, onClick sans onKeyDown sur un élément non interactif,
// label sans association, contraste de couleur insuffisant (avec certains plugins étendus)