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

<Meta of={ToolbarContainerStories}/>

<AccessibilityGuideLayout
	componentName="ToolbarContainer"
	iconSrc={AccessibilityIcon}
	apgHref="https://www.w3.org/WAI/ARIA/apg/patterns/toolbar/"
>
	<CriteriaSection>
		<CriteriaCard icon="🔍" title="Structure sémantique">
			<ul>
				<li><strong>Rôle ARIA approprié</strong> : <code>role="toolbar"</code> sur le conteneur principal</li>
			</ul>
		</CriteriaCard>

		<CriteriaCard icon="⌨️" title="Navigation clavier complète">
			<ul>
				<li><strong>Flèches directionnelles</strong> : Navigation entre les éléments interactifs (←, →, ↑, ↓)</li>
                <li>Le focus boucle en fin de liste et revient au début (et inversement)</li>
				<li><strong>Touches Home/End</strong> : Accès rapide au premier/dernier élément</li>
                <li><strong>Touche Tab</strong> : Accès au toolbar et sortie du toolbar</li>
			</ul>
		</CriteriaCard>

		<CriteriaCard icon="📱" title="États et retours d'information">
			<ul>
				<li><strong>Focus visible</strong> : L'effet de focus possède un contraste suffisant et est cohérent avec le reste du design système</li>
				<li><strong>État sélectionné</strong> : Utilisation de <code>aria-checked</code> ou <code>aria-pressed</code> selon le type de bouton</li>
				<li><strong>Gestion du focus</strong> : Restauration du focus sur le dernier élément utilisé</li>
			</ul>
		</CriteriaCard>

	</CriteriaSection>

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

	<BestPracticesSection>
		<ul>
            <li>Utilisez un label pertinent pour le toolbar via <code>aria-label</code> ou <code>aria-labelledby</code></li>
			<li>Regroupez les boutons apparentés dans des <code>role="group"</code> ou <code>role="radiogroup"</code></li>
			<li>Utilisez des labels explicites pour chaque groupe d'actions</li>
			<li>Assurez-vous que le focus est toujours visible</li>
		</ul>
	</BestPracticesSection>

	<ResourcesSection>
		<ul>
			<li><a href="https://www.w3.org/WAI/ARIA/apg/patterns/toolbar/" target="_blank" rel="noopener noreferrer">WAI-ARIA Authoring Practices: Toolbar</a></li>
		</ul>
	</ResourcesSection>

	<div class="mt-8">
		<p>Rapport d’audit manuel : <a href="/audits/ToolbarContainer.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/927" target="_blank" style={{color:'#0C41BD'}}>issue #927</a>)</p>
	</div>
</AccessibilityGuideLayout>