import { Meta, Primary } from '@storybook/blocks';
import * as SyCheckBoxGroupStories from '../SyCheckBoxGroup.stories.ts';
import AccessibilityIcon from '@/common/imgs/accessibility-svgrepo-com.svg';
import '@/stories/styles/shared.css';

<Meta of={SyCheckBoxGroupStories} name="Accessibility" />

<div className="accessibility-guide">
	<div className="header">
		<h1>Guide d'Accessibilité du Composant SyCheckBoxGroup</h1>
	</div>

	<div className="intro-section">
		<img
			src={AccessibilityIcon}
			alt="Icône d'accessibilité"
			className="accessibility-icon"
		/>
		<p className="intro-text">
			Le composant SyCheckBoxGroup a été conçu en suivant rigoureusement les recommandations d'accessibilité du W3C,
			notamment le modèle <a href="https://www.w3.org/WAI/ARIA/apg/patterns/checkbox/" target="_blank" rel="noopener noreferrer">WAI-ARIA pour les cases à cocher</a>.
			Ce guide détaille comment notre implémentation respecte ces standards et garantit une expérience utilisateur inclusive.
		</p>
	</div>

	<div className="criteria-section">
		<h2>Critères d'accessibilité respectés</h2>

		<div className="criteria-card">
			<div className="criteria-header">
				<span className="criteria-icon">🔍</span>
				<h3>Structure sémantique</h3>
			</div>
			<ul>
				<li><strong>Regroupement</strong> : Les cases à cocher sont regroupées dans une structure cohérente (fieldset/legend ou équivalent).</li>
				<li><strong>Étiquetage explicite</strong> : Le groupe dispose d’un libellé clair via la prop <code>label</code>.</li>
				<li><strong>Association label / contrôle</strong> : Chaque option dispose d’un label associé à la case à cocher.</li>
			</ul>
		</div>

		<div className="criteria-card">
			<div className="criteria-header">
				<span className="criteria-icon">⌨️</span>
				<h3>Navigation clavier complète</h3>
			</div>
			<ul>
				<li><strong>Touche Tab</strong> : Navigation séquentielle à travers les cases à cocher.</li>
				<li><strong>Touche Espace</strong> : (Dé)cocher une option.</li>
				<li><strong>Focus visible</strong> : Indication claire de l’élément actuellement focalisé.</li>
			</ul>
		</div>

		<div className="criteria-card">
			<div className="criteria-header">
				<span className="criteria-icon">📱</span>
				<h3>États et retours d'information</h3>
			</div>
			<ul>
				<li><strong>État requis</strong> : Support du mode <code>required</code> et affichage d’un message d’erreur en cas de soumission invalide.</li>
				<li><strong>États disabled / readonly</strong> : Les états sont communiqués visuellement et empêchent l’interaction selon le cas.</li>
				<li><strong>Retour textuel</strong> : Les messages de validation sont affichés dans la zone dédiée aux détails.</li>
			</ul>
		</div>

		<div className="criteria-card">
			<div className="criteria-header">
				<span className="criteria-icon">🎨</span>
				<h3>Personnalisation accessible</h3>
			</div>
			<ul>
				<li><strong>Densité ajustable</strong> : La prop <code>density</code> permet d’adapter l’espacement sans casser l’accessibilité.</li>
				<li><strong>Couleurs</strong> : La prop <code>color</code> permet d’adapter l’apparence tout en conservant les états d’erreur (prioritaires).</li>
			</ul>
		</div>
	</div>

	<div className="demo-section">
		<h2>Démonstration interactive</h2>
		<p>
			Explorez ci-dessous un exemple de SyCheckBoxGroup. Essayez de naviguer en utilisant uniquement votre clavier (Tab pour naviguer, Espace pour activer)
			pour tester l'accessibilité.
		</p>
		<Primary />
	</div>

	<div className="best-practices">
		<h2>Bonnes pratiques d'utilisation</h2>
		<ul>
			<li>Utilisez un libellé de groupe explicite et des libellés d’options concis.</li>
			<li>Pour un groupe requis, expliquez clairement la contrainte (ex. « choisissez au moins une option »).</li>
			<li>Évitez de baser le sens uniquement sur la couleur (toujours fournir un message textuel).</li>
			<li>Assurez-vous que les zones cliquables restent confortables sur mobile.</li>
		</ul>
	</div>

	<div className="resources-section">
		<h2>Ressources supplémentaires</h2>
		<ul>
			<li><a href="https://www.w3.org/WAI/ARIA/apg/patterns/checkbox/" target="_blank" rel="noopener noreferrer">Guide des pratiques d'auteur WAI-ARIA : Checkbox</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://www.w3.org/TR/wai-aria-1.2/#checkbox" target="_blank" rel="noopener noreferrer">Spécification WAI-ARIA 1.2 : role checkbox</a></li>
		</ul>
	</div>
</div>

<style>
{`
  .accessibility-guide {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    color: #333;
  }

  .intro-section {
    display: flex;
    align-items: center;
    margin-bottom: 30px;
    background-color: #f8f9fa;
    padding: 20px;
    border-radius: 8px;
    border-left: 5px solid #0077cc;
  }

  .accessibility-icon {
    width: 60px;
    height: 60px;
    margin-right: 20px;
    flex-shrink: 0;
  }

  .intro-text {
    font-size: 1.1em;
    line-height: 1.6;
    margin: 0;
  }

  .criteria-section {
    margin-bottom: 40px;
  }

  .criteria-section h2,
  .demo-section h2,
  .best-practices h2,
  .resources-section h2 {
    border-bottom: 2px solid #eaecef;
    padding-bottom: 10px;
    margin-top: 30px;
    margin-bottom: 20px;
    color: #0077cc;
  }

  .criteria-card {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    padding: 20px;
    margin-bottom: 20px;
  }

  .criteria-header {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
  }

  .criteria-icon {
    font-size: 1.8em;
    margin-right: 15px;
  }

  .criteria-header h3 {
    margin: 0;
    font-size: 1.3em;
    color: #0077cc;
  }

  .criteria-card ul {
    margin: 0;
    padding-left: 20px;
  }

  .criteria-card li {
    margin-bottom: 8px;
    line-height: 1.5;
  }

  .demo-section {
    background-color: #f8f9fa;
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 40px;
  }

  .best-practices {
    background-color: #f5f5f5;
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 30px;
  }

  .best-practices ul {
    padding-left: 20px;
  }

  .best-practices li {
    margin-bottom: 10px;
    line-height: 1.5;
  }

  .resources-section {
    background-color: #f8f9fa;
    padding: 20px;
    border-radius: 8px;
  }

  .resources-section ul {
    padding-left: 20px;
  }

  .resources-section li {
    margin-bottom: 10px;
  }

  .resources-section a {
    color: #0077cc;
    text-decoration: none;
  }

  .resources-section a:hover {
    text-decoration: underline;
  }

  code {
    background-color: #f0f0f0;
    padding: 2px 5px;
    border-radius: 3px;
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
    font-size: 0.9em;
  }
`}
</style>