import { Meta, Primary } from '@storybook/addon-docs/blocks';
import * as Stories from '../NirField.stories.ts';
import AccessibilityIcon from '@/common/imgs/accessibility-svgrepo-com.svg';
import '@/stories/styles/shared.css';
import {
    AccessibilityGuideLayout,
    CriteriaSection,
    CriteriaCard,
    BestPracticesSection,
    ResourcesSection,
    DemoSection
} from '@/stories/accessibility/AccessibilityGuideLayout.mdx';

<Meta of={Stories} />

<AccessibilityGuideLayout
    componentName="NirField"
    iconSrc={AccessibilityIcon}
>

<div class="mt-2">
<p>Rapport d’audit manuel : <a href="/audits/NirField.xlsx" style={{ color:'#0C41BD' }}>Voir le rapport</a></p>
	<p style={{ color: 'grey', fontSize: '14px', marginTop: '0px' }}>Correctifs associés (<a href="https://github.com/assurance-maladie-digital/design-system-v3/issues/897" target="_blank" style={{color:'#0C41BD'}}>issue #897</a>)</p>
</div>

<CriteriaSection>
<CriteriaCard title="Regroupement du NIR et de sa clé">
    <ul>
        <li><strong>Donnée logique unique</strong> : le numéro de sécurité sociale et sa clé forment un même ensemble de saisie</li>
        <li><strong>Comportement par défaut</strong> : lorsque la clé est affichée, le composant regroupe automatiquement les deux champs dans un <code>fieldset</code> avec un <code>legend</code></li>
        <li><strong>Pour les lecteurs d’écran</strong> : le contexte (ex : <code>Numéro de sécurité sociale</code>) est annoncé avant chaque champ, comme la <code>Clé</code></li>        <li><strong>Point de vigilance</strong> : la légende doit être explicite et décrire la donnée complète, et non un intitulé technique ou ambigu</li>
        <li><strong>Cas particulier</strong> : si <code>withoutFieldset</code> est utilisé, le composant remplace le <code>fieldset</code> par un <code>role="group"</code> avec un <code>aria-label</code></li>
    </ul>
</CriteriaCard>

    <CriteriaCard title="Étiquettes des champs">
        <ul>
            <li><strong>Libellés distincts</strong> : chaque sous-champ dispose de son propre libellé visible, par exemple <code>Numéro de sécurité sociale</code> et <code>Clé de validation</code></li>
            <li><strong>Compréhension renforcée</strong> : le <code>legend</code> apporte le contexte global, tandis que chaque <code>label</code> permet d’identifier précisément la zone en cours de saisie</li>
            <li><strong>Pertinence attendue</strong> : les libellés doivent éviter toute confusion entre les 13 chiffres du NIR et les 2 chiffres de la clé</li>
        </ul>
    </CriteriaCard>

<CriteriaCard title="Messages liés automatiquement">
        <ul>
            <li><strong>Messages liés aux bons champs</strong> : chaque champ génère ses propres identifiants pour les messages d’erreur, d’avertissement et de succès</li>
            <li><strong>Liaison</strong> : ces messages sont automatiquement reliés au champ concerné via <code>aria-describedby</code></li>
            <li><strong>Comportement natif du composant</strong> : le développeur n’a pas besoin de relier manuellement les messages aux champs</li>
            <li><strong>Pour les lecteurs d’écran</strong> : les messages sont lus au bon moment </li>
            <li><strong>Sans configuration supplémentaire</strong> : la liaison entre les champs et leurs messages est gérée automatiquement</li>
        </ul>
    </CriteriaCard>

<CriteriaCard title="Champs obligatoires et erreurs">
        <ul>
            <li><strong>Champ requis</strong> : lorsque la saisie est obligatoire, le composant ajoute automatiquement <code>aria-required</code></li>
            <li><strong>Champ en erreur</strong> : lorsqu’une validation échoue, le composant ajoute dynamiquement <code>aria-invalid</code> sur le ou les champs concernés</li>
            <li><strong>Lecture vocale</strong> : ces infos sont annoncées automatiquement par les technologies d’assistance</li> 
              <li><strong>Attention</strong> : il faut aussi un indicateur visuel (pas seulement technique)</li>

        </ul>
    </CriteriaCard>

    <CriteriaCard title="Aide à la saisie">
        <ul>
            <li><strong>Format spécifique</strong> : le NIR a une structure précise</li>
            <li><strong>Aide explicite recommandée</strong> : documenter ce qui est attendu pour le numéro et pour la clé, par exemple les 13 premiers chiffres puis les 2 derniers</li>
            <li><strong>Messages clairs</strong> : en cas d’erreur, le message doit indiquer la valeur attendue de façon compréhensible, avec un exemple</li>
            <li><strong>Personnalisation</strong> : le composant permet de fournir des règles et messages personnalisés afin de s'adapter au contexte métier</li>
        </ul>
    </CriteriaCard>

    <CriteriaCard title="Navigation et focus">
    <ul>
        <li><strong>Passage automatique</strong> : quand le NIR est complet, le focus passe automatiquement au champ de la clé</li>
        <li><strong>Retour au NIR</strong> : si la clé est supprimée, le focus revient sur le champ du numéro</li>
        <li><strong>Saisie facilitée</strong> : si l’utilisateur continue à taper, les chiffres sont directement envoyés dans la clé</li>
 <li>
            <strong>En cas d’erreur</strong> : le focus revient sur le premier champ à corriger uniquement lors de la validation 
            (<code>onBlur = true</code> ou soumission du formulaire).  
            Pendant la saisie (<code>onBlur = false</code> et <code>shouldValidateOnBlur = false</code>), le focus ne bouge pas pour ne pas interrompre l’utilisateur, mais on l’aide à corriger les erreurs lorsqu’il termine un champ ou soumet le formulaire.
        </li>
        </ul>
</CriteriaCard>

<CriteriaCard title="Conformité RGAA 7.4 - Changements de contexte">
    <ul>
        <li><strong>Avertissement utilisateur</strong> : un message caché visuellement mais accessible aux lecteurs d'écran informe l'utilisateur avant la saisie que le focus peut être déplacé automatiquement : <em>"Après la saisie des 13 caractères du numéro de sécurité sociale, le curseur sera automatiquement placé dans le champ clé de validation. Si le champ clé est vidé, le curseur reviendra automatiquement dans le champ numéro."</em> Ce message est restitué avant la saisie, permettant à l'utilisateur d'anticiper le comportement.</li>
        <li><strong>Association ARIA</strong> : le message d'avertissement est relié uniquement au champ numéro via <code>aria-describedby</code> pour éviter la redondance</li>
        <li><strong>Activation conditionnelle</strong> : le comportement n'est actif que lorsque <code>displayKey</code> est <code>true</code>, <code>disabled</code> est <code>false</code> et <code>readonly</code> est <code>false</code></li>
        <li><strong>Protection contre les déplacements involontaires</strong> : les déplacements de focus sont uniquement déclenchés par des actions utilisateur (saisie, suppression) — la synchronisation externe de <code>modelValue</code> ne provoque aucun déplacement de focus</li>
    </ul>
</CriteriaCard>
</CriteriaSection>
    <DemoSection componentName="NirField">
      <Primary />
    </DemoSection>

<BestPracticesSection>
    <ul>
        <li>Utiliser le regroupement par <code>fieldset</code> et <code>legend</code> dès lors que le numéro et la clé sont saisis ensemble</li>
        <li>Mettre une légende claire (ex : "Numéro de sécurité sociale")</li>
        <li>Garder deux labels distincts pour le numéro et la clé</li>
        <li>Laisser le composant gérer les attributs ARIA automatiquement</li>
        <li>Prévoir une aide à la saisie claire, visible et compréhensible</li>
        <li>Afficher des messages d’erreur explicites, contextualisés et, si possible, accompagnés d’un exemple</li>
        <li>Ne pas signaler le caractère obligatoire, l’erreur ou la réussite uniquement par la couleur</li>
    </ul>
</BestPracticesSection>

<ResourcesSection>
    <ul>
        <li><a href="https://www.accede-web.com/notices/html-et-css/formulaires/utiliser-la-balise-label-ainsi-que-les-attributs-for-et-id-pour-etiqueter-les-champs-avec-intitule-visible/" target="_blank" style={{ color: '#0C41BD' }}>Accede Web – Utiliser label, for et id</a></li>
        <li><a href="https://www.accede-web.com/notices/html-et-css/formulaires/integrer-required-ou-aria-requiredtrue-dans-les-champs-obligatoires/" target="_blank" style={{ color: '#0C41BD' }}>Accede Web – Intégrer required ou aria-required="true"</a></li>
        <li><a href="https://www.accede-web.com/notices/html-et-css/formulaires/integrer-les-messages-derreur-et-les-suggestions-de-correction-directement-dans-les-balises-label/" target="_blank" style={{ color: '#0C41BD' }}>Accede Web – Messages d’erreur et suggestions de correction</a></li>
    </ul>
</ResourcesSection>

</AccessibilityGuideLayout>