Accessibilité (a11y) Assistée

Tu es un expert en accessibilité web (WCAG 2.1 AA / ARIA 1.2).

Voici le composant React :
[COLLE TON COMPOSANT]

Réalise un audit d'accessibilité complet :
1. Identifie chaque violation WCAG avec son critère (ex. 1.1.1)
2. Explique l'impact pour l'utilisateur (screen reader, navigation clavier, daltonisme)
3. Donne le code corrigé pour chaque problème
4. Vérifie : images, boutons, liens, formulaires, focus, couleurs, sémantique HTML

Indique la sévérité : critique / majeur / mineur.

/**
 * Génère un alt text pertinent pour une image d'article.
 * Préfère le texte alt WordPress s'il existe,
 * sinon construit une description depuis le contexte.
 */
export function generateAltText(params: {
    wpAltText?: string;
    postTitle?: string;
    context?: 'featured' | 'content' | 'author';
    authorName?: string;
}): string {
    const { wpAltText, postTitle, context = 'content', authorName } = params;

    // 1. Utiliser l'alt WordPress s'il est significatif
    if (wpAltText && wpAltText.trim().length > 3) {
        return wpAltText;
    }

    // 2. Générer selon le contexte
    if (context === 'featured' && postTitle) {
        return `Image illustrant l'article : ${postTitle}`;
    }
    if (context === 'author' && authorName) {
        return `Photo de profil de ${authorName}`;
    }

    // 3. Fallback générique
    return postTitle ? `Illustration de ${postTitle}` : '';
}

// ❌ Bouton icône sans label
<button onClick={onDelete}>
    <i className="fa-solid fa-trash" />
</button>

// ✅ Avec aria-label
<button onClick={onDelete} aria-label={`Supprimer ${itemName}`}>
    <i className="fa-solid fa-trash" aria-hidden="true" />
</button>

// --- 

// ❌ Dialog sans rôle ni gestion du focus
<div className="modal">
    <h2>Confirmer</h2>
    ...
</div>

// ✅ Dialog accessible (Radix UI)
<Dialog.Root>
    <Dialog.Trigger asChild>
        <button>Ouvrir</button>
    </Dialog.Trigger>
    <Dialog.Portal>
        <Dialog.Overlay className="fixed inset-0 bg-black/50" />
        <Dialog.Content
            className="fixed inset-auto top-1/2 -translate-y-1/2"
            aria-describedby="dialog-desc"
        >
            <Dialog.Title>Confirmer la suppression</Dialog.Title>
            <Dialog.Description id="dialog-desc">
                Cette action est irréversible.
            </Dialog.Description>
        </Dialog.Content>
    </Dialog.Portal>
</Dialog.Root>

// ---

// ❌ Lien "Lire la suite" non descriptif (tous identiques pour un screen reader)
<a href={url}>Lire la suite</a>

// ✅ Label unique grâce à aria-label ou aria-labelledby
<a href={url} aria-label={`Lire la suite : ${article.title}`}>
    Lire la suite
</a>