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

<Meta of={Stories}/>

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

    [//]: # (<AuditSection>)

    [//]: # ( <div>)

        [//]: # ( Rapport d’audit manuel :{' '})

        [//]: # ( <a href="/audits/SyServerTable.xlsx" style={{color: '#0C41BD'}}>Voir le rapport</a>)

        [//]: # ( </div>)

    [//]: # ( <div style={{color: 'grey', fontSize: '14px', marginTop: '0px'}}>)

        [//]: # ( Correctifs associés &#40;<a href="https://github.com/assurance-maladie-digital/design-system-v3/issues/XXX" target="_blank" style={{color: '#0C41BD'}}>issue #XXX</a>&#41;)

        [//]: # ( </div>)

    [//]: # (</AuditSection>)

    <CriteriaSection>
        <CriteriaCard icon="🏷️" title="Structure et rôles">
            <ul>
                <li>Le composant repose sur <code>VDataTableServer</code> et conserve la structure sémantique native d’un tableau HTML (<code>table</code>, <code>caption</code>, <code>thead</code>, <code>tbody</code>, <code>th</code>, <code>td</code>).</li>
                <li>Une légende (<code>caption</code>) décrit le contenu du tableau et reste disponible aux technologies d’assistance même lorsqu’elle est visuellement masquée.</li>
                <li>Les en-têtes de colonnes sont rendus dans des cellules <code>th</code> et exposent les informations de tri, de redimensionnement et de filtrage.</li>
                <li>La zone de statut utilise <code>role="status"</code> et <code>aria-live="polite"</code> pour annoncer les changements du nombre de résultats.</li>
                <li>Les cases à cocher de sélection utilisent des libellés explicites pour la sélection globale et individuelle.</li>
                <li>La pagination, les filtres et l’organisation des colonnes conservent les rôles natifs des contrôles HTML.</li>
            </ul>
        </CriteriaCard>

        <CriteriaCard icon="⌨️" title="Navigation clavier">
            <ul>
                <li>Les en-têtes triables sont activables au clavier via Entrée ou Espace.</li>
                <li>Les filtres intégrés sont accessibles par Tabulation dans l’ordre naturel du tableau.</li>
                <li>Les cases à cocher de sélection de ligne et de sélection globale sont entièrement utilisables au clavier.</li>
                <li>Les lignes cliquables restent focalisables et déclenchables au clavier lorsqu’elles sont activées.</li>
                <li>La pagination est navigable au clavier et permet de modifier la page et le nombre d’éléments par page.</li>
                <li>Le bouton de réinitialisation des filtres est accessible par Tabulation et activable via Entrée ou Espace.</li>
            </ul>
        </CriteriaCard>

        <CriteriaCard icon="📢" title="Annonces aux technologies d’assistance">
            <ul>
                <li>Le changement du nombre de résultats est annoncé automatiquement dans une région <code>aria-live</code>.</li>
                <li>Les actions de sélection de lignes sont vocalisées grâce à des libellés explicites.</li>
                <li>Le <code>caption</code> fournit un contexte global pour la lecture du tableau.</li>
                <li>Les états de tri sont exposés par les attributs ARIA appliqués aux en-têtes.</li>
            </ul>
        </CriteriaCard>

        <CriteriaCard icon="🎨" title="Contraste et lisibilité">
            <ul>
                <li>Les styles du design system assurent un contraste suffisant pour les textes, les bordures et les états de focus.</li>
                <li>Les lignes alternées (<code>striped</code>) utilisent une variation de fond discrète sans compromettre la lisibilité.</li>
                <li>Les colonnes figées conservent un fond opaque et des ombres pour maintenir la séparation visuelle.</li>
                <li>Les états sélectionnés, triés ou filtrés restent perceptibles visuellement et programmatiquement.</li>
            </ul>
        </CriteriaCard>

        <CriteriaCard icon="📌" title="Fonctionnalités avancées accessibles">
            <ul>
                <li>Le tri multi-colonnes et obligatoire conserve les attributs ARIA appropriés.</li>
                <li>Les filtres par colonne utilisent des champs correctement libellés.</li>
                <li>La sélection simple ou multiple annonce clairement l’état des cases à cocher.</li>
                <li>Les colonnes épinglées restent accessibles sans altérer l’ordre de lecture du tableau.</li>
                <li>L’organisation des colonnes conserve la structure et la cohérence des en-têtes.</li>
                <li>L’état du tableau peut être mémorisé localement sans impact sur l’accessibilité.</li>
            </ul>
        </CriteriaCard>
    </CriteriaSection>

    <DemoSection componentName="SyServerTable">
        <Story of={Stories.Default}/>
    </DemoSection>

    <BestPracticesSection>
        <ul>
            <li>Renseignez toujours la propriété <code>caption</code> pour décrire clairement l’objet du tableau.</li>
            <li>Utilisez des intitulés de colonnes explicites, uniques et concis.</li>
            <li>Activez <code>showFilters</code> uniquement lorsque chaque filtre dispose d’un libellé pertinent.</li>
            <li>Assurez-vous que les lignes cliquables disposent d’une action compréhensible.</li>
            <li>Testez la navigation clavier après activation du tri, des filtres, de la sélection et de la pagination.</li>
            <li>Vérifiez que les annonces <code>aria-live</code> restent pertinentes lors des chargements serveur.</li>
            <li>Conservez un contraste suffisant pour les colonnes figées et les états sélectionnés.</li>
        </ul>
    </BestPracticesSection>

    <ResourcesSection>
        <ul>
            <li><a href="https://www.w3.org/WAI/tutorials/tables/" target="_blank" rel="noopener noreferrer">W3C WAI – Tables Tutorial</a></li>
            <li><a href="https://www.w3.org/WAI/ARIA/apg/patterns/table/" target="_blank" rel="noopener noreferrer">WAI-ARIA Authoring Practices – Table Pattern</a></li>
            <li><a href="https://www.w3.org/WAI/WCAG21/Understanding/status-messages.html" target="_blank" rel="noopener noreferrer">WCAG – Status Messages (4.1.3)</a></li>
            <li><a href="https://www.numerique.gouv.fr/publications/rgaa-accessibilite/" target="_blank" rel="noopener noreferrer">RGAA – critères 5 (tableaux), 7 (ARIA), 10 (présentation)</a></li>
        </ul>
    </ResourcesSection>
</AccessibilityGuideLayout>