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

<Meta of={CollapsibleListStories} />

<AccessibilityGuideLayout
	componentName="CollapsibleList"
	iconSrc={AccessibilityIcon}
	apgHref="https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/"
>
<AuditSection>
<div class="mt-2">
<p>Rapport d’audit manuel : <a href="/audits/CollapsibleList.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/792" target="_blank" style={{color:'#0C41BD'}}>issue #792</a>)</p>
</div>

	</AuditSection>
	<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 h4, défini dans l’implémentation du composant.</li>
      <code>&lt;CollapsibleList 
          :list-title="listTitle"
          :items="items" 
          :heading-level="4" /&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>Comportement adaptatif</strong> : Section pliable sur mobile, liste statique sur desktop</li>
				<li><strong>Sur mobile</strong> : <code>role="button"</code> pour l'en-tête et <code>role="region"</code> pour le contenu, <code>aria-expanded</code></li>
				<li><strong>Sur desktop</strong> : Liste <code>&lt;ul&gt;</code> avec éléments <code>&lt;li&gt;</code> et liens <code>&lt;a&gt;</code></li>
				<li><strong>Liens accessibles</strong> : <code>aria-label</code> sur les liens pour descriptions complètes</li>
			</ul>
		</CriteriaCard>

		<CriteriaCard icon="⌨️" title="Navigation et interaction clavier">
			<ul>
				<li><strong>Sur mobile</strong> : Touches Espace/Entrée pour ouvrir/fermer, Tab pour naviguer</li>
				<li><strong>Sur desktop</strong> : Navigation Tab standard dans la liste</li>
				<li><strong>Focus visible</strong> : Indicateurs de focus sur l'en-tête et les liens</li>
			</ul>
		</CriteriaCard>

		<CriteriaCard icon="📱" title="États et retours d'information">
			<ul>
				<li><strong>État d'expansion (mobile)</strong> : <code>aria-expanded</code> et icône indicative</li>
				<li><strong>Indication visuelle</strong> : Changements de couleur au focus et hover</li>
				<li><strong>Contenu masqué (mobile)</strong> : Liste cachée par défaut, visible à l'ouverture</li>
			</ul>
		</CriteriaCard>
	</CriteriaSection>

	<DemoSection componentName="CollapsibleList">
		<Story of={CollapsibleListStories.Default} />
	</DemoSection>

	<BestPracticesSection>
		<ul>
			<li>Utilisez un titre descriptif pour l'en-tête</li>
			<li>Assurez-vous que le contenu est pertinent et non redondant</li>
			<li>Évitez de placer des éléments interactifs complexes dans le contenu</li>
			<li>Fournissez une alternative non-JavaScript si nécessaire</li>
		</ul>
	</BestPracticesSection>

	<ResourcesSection>
		<ul>
			<li><a href="https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/" target="_blank" rel="noopener noreferrer">Guide des pratiques d'auteur WAI-ARIA pour les disclosures</a></li>
			<li><a href="https://inclusive-components.design/collapsible-sections/" target="_blank" rel="noopener noreferrer">Inclusive Components: Collapsible Sections</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>
		</ul>
	</ResourcesSection>


</AccessibilityGuideLayout>