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

<Meta of={Stories} />

<AccessibilityGuideLayout
	componentName="DatePicker (mode calendrier)"
	iconSrc={AccessibilityIcon}
>

<CriteriaSection>
	<CriteriaCard title="Structure sémantique" icon="🔍">
		<ul>
			<li><strong>Champ</strong> : <code>&lt;input&gt;</code> readonly (texte) sans <code>role="combobox"</code> forcé; l’ouverture se fait via clic ou clavier.</li>
			<li>
				<strong>Attributs ARIA de l'input (aria-expanded / aria-haspopup)</strong> : Ces attributs sont volontairement retirés pour les raisons suivantes :
				<ul>
					<li><em>Incompatibilité avec le rôle natif</em> : Un <code>&lt;input type="text"&gt;</code> possède le rôle implicite <code>textbox</code>. Selon le W3C/WAI-ARIA, l'usage de <code>aria-expanded</code> et <code>aria-haspopup</code> sur ce rôle est invalide et lève des erreurs critiques lors des audits (Axe, Tanaguru).</li>
					<li><em>Rejet du rôle combobox</em> : Forcer un <code>role="combobox"</code> sur l'input rendrait les attributs valides, mais serait sémantiquement inexact. Notre champ est en <code>readonly</code> et ouvre un véritable panneau de dialogue complexe (calendrier), pas une simple liste d'options de saisie.</li>
					<li><em>Alternative robuste</em> : L'accessibilité de l'ouverture est garantie contextuellement. L'ouverture du calendrier déplace immédiatement le focus dans une modale avec un <em>focus trap</em>. Le lecteur d'écran comprend le changement de contexte et l'annonce via les régions <code>aria-live</code>, rendant l'expérience fluide et conforme aux standards.</li>
				</ul>
			</li>
			<li><strong>Panneau</strong> : contenu dans un menu <code>role="presentation"</code> avec grille de boutons (<code>role=button</code> natif sur chaque jour).</li>
			<li><strong>Relations</strong> : <code>aria-controls</code> relie l’input au panneau lorsqu’il est ouvert; <code>aria-owns/expanded/haspopup</code> ne sont pas surchargés.</li>
			<li><strong>États</strong> : <code>aria-disabled</code> / <code>aria-readonly</code> alignés sur les props, messages d’erreur/avertissement/succès annoncés via la zone de messages du champ.</li>
		</ul>
	</CriteriaCard>

	<CriteriaCard title="Ouverture et focus" icon="🧭">
		<ul>
			<li><strong>Ouverture clavier</strong> : <kbd>Entrée</kbd> sur le champ ouvre le calendrier; l’icône déclenche l’ouverture avec la souris.</li>
			<li><strong>Fermeture</strong> : <kbd>Échap</kbd> ferme et valide, focus rendu au champ.</li>
			<li><strong>Piège de focus</strong> : <kbd>Tab</kbd>/<kbd>Shift+Tab</kbd> restent dans le panneau ouvert (boutons d’entête, grille de jours, bouton « Aujourd’hui »).</li>
		</ul>
	</CriteriaCard>

	<CriteriaCard title="Navigation clavier dans le calendrier" icon="⌨️">
		<ul>
			<li><strong>Jours</strong> : flèches déplacent le focus jour par jour; <code>PageUp/PageDown</code> changent de mois (<kbd>Shift</kbd> + touche change d’année).</li>
			<li><strong>Home/End</strong> : vont au premier/dernier jour du mois affiché.</li>
			<li><strong>Activation</strong> : <kbd>Espace</kbd>/<kbd>Entrée</kbd> sur un jour déclenchent le bouton du jour; même logique sur les boutons d’entête (mois/année et flèches).</li>
			<li><strong>Dialogue mois/années</strong> : navigation par flèches et <kbd>Home</kbd>/<kbd>End</kbd>; <kbd>Espace</kbd>/<kbd>Entrée</kbd> sélectionnent l’option et conservent le focus.</li>
		</ul>
	</CriteriaCard>

	<CriteriaCard title="Messages et annonces" icon="📣">
		<ul>
			<li><strong>Live region</strong> : le mois/année affichés sont annoncés via <code>aria-live="polite"</code> (zone masquée).</li>
			<li><strong>Statuts</strong> : erreurs/avertissements/succès sous le champ; le bouton « Aujourd’hui » a un <code>title</code> explicite.</li>
			<li><strong>Guidage</strong> : placeholder et libellé (ou <code>aria-label</code>) décrivent l’action attendue.</li>
		</ul>
	</CriteriaCard>
</CriteriaSection>

<DemoSection title="Navigation clavier (rappel)">
	<Story of={Stories.Default} />
</DemoSection>

<BestPracticesSection>
- Fournir un libellé explicite ou <code>aria-label</code> lorsque le label visuel est masqué ou tronqué.
- En lecture seule, éviter de proposer l’ouverture (raccourcis désactivés dans le composant).
- En plage de dates, préciser l’ordre attendu dans le hint et laisser la séparatrice visible.
- Vérifier la cohérence des bornes <code>period</code> pour ne pas masquer les jours attendus.
</BestPracticesSection>

<ResourcesSection>
- Stories DatePicker : cas standard, plage, lecture seule.
- Tests : <code>CalendarMode/DatePicker.spec.ts</code> et <code>DatePicker.events.spec.ts</code> couvrent l’ouverture, le focus et la navigation clavier.
- WAI-ARIA grid & boutons : référence pour les comportements clavier sur les grilles de dates.
</ResourcesSection>

</AccessibilityGuideLayout>