import { Meta, Primary } from '@storybook/blocks';
import * as AccordionStories from '../Accordion.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={AccordionStories}/>

<AccessibilityGuideLayout
	componentName="Accordion"
	iconSrc={AccessibilityIcon}
	apgHref="https://www.w3.org/WAI/ARIA/apg/patterns/accordion/examples/accordion/"
>
	<div class="mt-8">
		<p>Rapport d’audit manuel : <a href="/audits/Accordion.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/926" target="_blank" style={{color:'#0C41BD'}}>issue #926</a>)</p>
	</div>
	<CriteriaSection>
		<CriteriaCard icon="🔍" title="Structure sémantique">
			<ul>
				<li><strong>Rôles ARIA appropriés</strong> : <code>role="button"</code> pour les en-têtes et <code>role="region"</code> pour les panneaux de contenu</li>
				<li><strong>Niveaux de titres personnalisables</strong> : Utilisation dynamique des balises <code>h1</code> à <code>h6</code> selon le contexte</li>
				<li><strong>Relations entre éléments</strong> : Connexion entre en-têtes et panneaux via <code>aria-controls</code> et <code>aria-labelledby</code></li>
			</ul>
		</CriteriaCard>

		<CriteriaCard icon="⌨️" title="Navigation clavier complète">
			<ul>
				<li><strong>Touches Espace et Entrée</strong> : Pour activer/désactiver les panneaux</li>
				<li><strong>Touches fléchées</strong> : Navigation entre les en-têtes (↑ et ↓)</li>
				<li><strong>Touches Home/End</strong> : Accès rapide au premier/dernier en-tête</li>
				<li><strong>Gestion intelligente</strong> : Contournement automatique des éléments désactivés</li>
			</ul>
		</CriteriaCard>

		<CriteriaCard icon="📱" title="États et retours d'information">
			<ul>
				<li><strong>État d'expansion</strong> : <code>aria-expanded</code> indique si un panneau est ouvert ou fermé</li>
				<li><strong>État de désactivation</strong> : <code>aria-disabled</code> signale les éléments non disponibles</li>
				<li><strong>Indication visuelle</strong> : Rotation de l'icône et changements de couleur pour indiquer l'état</li>
				<li><strong>Focus visible</strong> : Indication claire de l'élément actuellement focalisé</li>
			</ul>
		</CriteriaCard>

		<CriteriaCard icon="🎨" title="Personnalisation accessible">
			<ul>
				<li><strong>Contraste configurable</strong> : Options de couleurs pour garantir un contraste suffisant</li>
				<li><strong>Taille et espacement</strong> : Dimensions adaptées pour faciliter l'interaction</li>
				<li><strong>Cohérence visuelle</strong> : Comportement prévisible dans différents contextes</li>
			</ul>
		</CriteriaCard>
	</CriteriaSection>

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

	<BestPracticesSection>
		<ul>
			<li>Utilisez des titres concis et descriptifs pour les en-têtes</li>
			<li>Évitez de placer des éléments interactifs complexes à l'intérieur du contenu des panneaux</li>
			<li>Maintenez une cohérence dans l'utilisation des niveaux de titres</li>
			<li>Limitez le nombre d'accordéons sur une même page pour éviter la surcharge cognitive</li>
		</ul>
	</BestPracticesSection>

	<ResourcesSection>
		<ul>
			<li><a href="https://www.w3.org/WAI/ARIA/apg/patterns/accordion/" target="_blank" rel="noopener noreferrer">Guide des pratiques d'auteur WAI-ARIA pour les accordéons</a></li>
			<li><a href="https://www.w3.org/WAI/WCAG21/quickref/" target="_blank" rel="noopener noreferrer">Référence rapide WCAG 2.1</a></li>
			<li><a href="https://inclusive-components.design/collapsible-sections/" target="_blank" rel="noopener noreferrer">Inclusive Components: Collapsible Sections</a></li>
		</ul>
	</ResourcesSection>


</AccessibilityGuideLayout>