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

<Meta of={Stories} />

<AccessibilityGuideLayout
  componentName="FileList"
  iconSrc={AccessibilityIcon}
>
  <CriteriaSection>
    <CriteriaCard icon="🔍" title="Structure sémantique">
      <ul>
        <li><strong>Formattage sous forme de liste  </strong> : Utilisation de balises HTML sémantiques pour structurer les éléments de la liste de fichiers.</li>
        <li><strong>Boutons</strong> : Utilisation de <code>&lt;button&gt;</code> pour les actions associées à chaque fichier, avec des étiquettes claires qui reprennent l'action et le nom du fichier.</li>
        <li><strong>Aria-label</strong>: On utilise les méthodes <code>importAriaLabel()</code> pour générer les etiquettes ARIA des champs avec le titre et  <code>seeAriaLabel()</code> et <code>deleteAriaLabel()</code> pour les étiquettes ARIA avec le nom du fichier.</li>
        <li><strong>SeeLabel, ImportLabel, DeleteLabel </strong> : Utilisation de ces propriétés pour fournir des étiquettes claires et descriptives pour les actions associées à chaque fichier.</li>

      </ul>
    </CriteriaCard>


    <CriteriaCard icon="⌨️" title="Navigation clavier complète">
      <ul>
        <li><strong>Navigation entre les éléments</strong> : Utilisation des touches Tab et Shift+Tab pour naviguer entre les fichiers et les actions associées.</li>
        <li><strong>Activation des actions</strong> : Utilisation de la touche Entrée ou Espace pour activer les boutons d'action (télécharger, supprimer, etc.).</li>
      </ul>
    </CriteriaCard>

    <CriteriaCard icon="📱" title="États et retours d'information">
      <ul>
        <li><strong>Indication de l'état de téléchargement</strong> : Utilisation d'icônes ou de messages pour indiquer si un fichier est en cours de téléchargement, téléchargé avec succès ou en échec.</li>
        <li><strong>Indication de l'état d'erreur</strong> : Affichage d'un message d'erreur dans un élément avec le rôle <code>status</code> pour informer les utilisateurs de l'erreur.</li> 
      </ul>
    </CriteriaCard>

    <DemoSection componentName="FileList">
      <Primary />
    </DemoSection>

    <BestPracticesSection>
      <ul>
        <li><strong>Labels clairs et descriptifs</strong> : Assurez-vous que les titres des fichiers requis sont assez descriptifs pour que les utilisateurs comprennent facilement ce qui est attendu d'eux.</li>
        <li><strong>Progression</strong> : Fournissez une indication de la progression du téléchargement pour les fichiers volumineux.</li>
      </ul>
    </BestPracticesSection>
  </CriteriaSection>
  <ResourcesSection>
    <ul>
      <li><a href="https://developer.mozilla.org/fr/docs/Web/HTML/Reference/Elements/button">Documentation MDN sur les boutons</a></li>
      <li><a href="https://developer.mozilla.org/fr/docs/Web/Accessibility/ARIA/Reference/Roles/status_role">Documentation MDN sur le rôle ARIA "status"</a></li>
      <li><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/status_role">MDN documentation on ARIA "status" role</a></li>
    </ul>
  </ResourcesSection>
</AccessibilityGuideLayout>