import { Meta, Primary } from '@storybook/blocks';
import * as SyPaginationStories from '../SyPagination.stories';
import AccessibilityIcon from '@/common/imgs/accessibility-svgrepo-com.svg';
import {
	AccessibilityGuideLayout,
	CriteriaSection,
	CriteriaCard,
	DemoSection,
	BestPracticesSection,
	ResourcesSection,
} from '@/stories/accessibility/AccessibilityGuideLayout.mdx';

<Meta of={SyPaginationStories} />

<AccessibilityGuideLayout
	componentName="SyPagination"
	iconSrc={AccessibilityIcon}
>
	<CriteriaSection>
<CriteriaCard icon="🧩" title="Niveau de titre configurable via la prop headingLevel">
  <ul>
    <li>Le niveau du titre (h1 à h6) est défini grâce à la propriété <strong>headingLevel</strong> déclarée dans le composant. Si aucune valeur n’est fournie, le composant applique par défaut un titre de niveau h2, défini dans l’implémentation du composant.</li>
      <code>&lt;SyPagination
          :heading-level="2" /&gt; </code>
    
    <li><strong>Accessibilité</strong> : Permet que la hiérarchie entre les titres soit pertinente (critère 9.1.1 RGAA) </li>
  </ul>
</CriteriaCard>
		<CriteriaCard icon="🔍" title="Structure sémantique">
			<ul>
				<li><strong>Zone de navigation</strong> : utilisation de <code>&lt;nav&gt;</code> et <code>&lt;ul&gt;</code> pour structurer la pagination.</li>
				<li><strong>Nom accessible</strong> : titre <code>&lt;h2&gt;</code> caché (classe <code>d-sr-only</code>) relié au <code>nav</code> via <code>aria-labelledby</code>; libellé personnalisable avec la prop <code>label</code> (par défaut «&nbsp;Pagination&nbsp;»).</li>
				<li><strong>Association au contenu</strong> : prise en charge de <code>aria-controls</code> pour relier la pagination à la zone paginée.</li>
				<li><strong>Page active</strong> : l’attribut <code>aria-current="page"</code> est appliqué au lien de la page courante.</li>
			</ul>
		</CriteriaCard>

		<CriteriaCard icon="⌨️" title="Navigation clavier">
			<ul>
				<li><strong>Tabulation</strong> : l’ordre de tab suit la séquence logique (Précédent → numéros → Suivant).</li>
				<li><strong>Activation</strong> : les liens de pagination se déclenchent à l’Entrée (ou Espace selon le navigateur).</li>
				<li><strong>Focus visible</strong> : le focus natif reste apparent sur les liens (<code>&lt;a&gt;</code>).</li>
			</ul>
		</CriteriaCard>

		<CriteriaCard icon="📱" title="États et retours d’information">
			<ul>
				<li><strong>Boutons indisponibles</strong> : <code>aria-disabled="true"</code> est ajouté sur «&nbsp;Précédent&nbsp;» / «&nbsp;Suivant&nbsp;» / premières/dernières pages lorsque non actionnables.</li>
				<li><strong>Ellipses non interactives</strong> : les séparateurs «&nbsp;…&nbsp;» sont rendus non cliquables pour éviter la confusion.</li>
			</ul>
		</CriteriaCard>

		<CriteriaCard icon="🎨" title="Personnalisation accessible">
			<ul>
				<li>Slots pour <code>first-page</code>, <code>previous</code>, <code>next</code>, <code>last-page</code> et <code>page-number</code> afin d’adapter les libellés ou ajouter des icônes.</li>
				<li>Possibilité d’ajouter du contexte via <code>prepend</code> / <code>append</code> (ex. compteur «&nbsp;Éléments 21-40 sur 200&nbsp;»).</li>
			</ul>
		</CriteriaCard>
	</CriteriaSection>

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

	<BestPracticesSection>
		<ul>
			<li>Renseigner un <strong>label</strong> explicite (ex. «&nbsp;Pagination des résultats de recherche&nbsp;») pour nommer la navigation.</li>
			<li>Relier la pagination à la zone de contenu avec <code>aria-controls</code> et un <code>id</code> stable sur le conteneur paginé.</li>
			<li>Conserver des libellés textuels même si des icônes sont utilisées dans les slots (ou ajouter du texte masqué).</li>
			<li>S’assurer d’un <strong>contraste suffisant</strong> et d’une taille de cible d’au moins 44px pour les liens.</li>
			<li>Limiter le nombre de pages affichées en choisissant un <code>visible</code> adapté et en gardant des libellés courts.</li>
		</ul>
	</BestPracticesSection>

	<ResourcesSection>
		<ul>
			<li><a href="https://www.w3.org/TR/wai-aria-1.2/#navigation" target="_blank" rel="noopener noreferrer">Rôle ARIA « navigation »</a></li>
			<li><a href="https://www.w3.org/WAI/WCAG21/quickref/#navigation-mechanisms-headings-and-labels" target="_blank" rel="noopener noreferrer">WCAG 2.4 - Mécanismes de navigation</a></li>
		</ul>
	</ResourcesSection>
</AccessibilityGuideLayout>