@cnamts/synapse 0.0.8-alpha → 0.0.10-alpha

package/src/components/DatePicker/AccessibiliteItems.ts

@@ -0,0 +1,233 @@
+import { ExpertiseLevelEnum } from './constants/ExpertiseLevelEnum'
+
+export const AccessibiliteItemsIndeterminate = [
+	{
+		title: 'Catégorie 3 : Couleurs',
+		subtitle: '3.2 Dans chaque page web, le contraste entre la couleur du texte et la couleur de son arrière-plan est-il suffisamment élevé?',
+		items: [
+			{
+				precision: '3.2.1 Dans chaque page web, le texte et le texte en image sans effet de graisse d’une taille restituée inférieure à 24px vérifient-ils une de ces conditions? Le rapport de contraste entre le texte et son arrière-plan est de 4.5:1, au moins; Un mécanisme permet à l’utilisateur d’afficher le texte avec un rapport de contraste de 4.5:1, au moins.',
+				link: 'https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#3.2.1',
+				solution: [{
+					info1: '1. Retrouver dans le document les textes et les textes en image sans effet de graisse d’une taille restituée inférieure à 24px qui pourraient poser des problèmes de contraste ;',
+					info2: '2. Pour chacun de ces textes, vérifier que : Soit le rapport de contraste entre le texte et son arrière-plan est de 4.5:1, au moins; Soit un mécanisme permet à l’utilisateur d’afficher le texte avec un rapport de contraste de 4.5:1, au moins.',
+					info3: '3. Si c’est le cas pour chaque texte, le test est validé',
+				}],
+				expertise: ExpertiseLevelEnum.DEV,
+
+			},
+		],
+	},
+	{
+		title: 'Catégorie 10 : Présentation de l’information',
+		subtitle: '10.1 Dans le site web, des feuilles de styles sont-elles utilisées pour contrôler la présentation de l’information ? ?',
+		items: [
+
+			{
+				precision: '10.1.1 Dans chaque page web, les balises servant à la présentation de l’information ne doivent pas être présentes dans le code source généré des pages. Cette règle est-elle respectée ? ',
+				link: 'https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#10.1.1',
+				solution: [{
+					info1: '1. Vérifier l’absence des éléments de présentation <basefont>, <big>, <blink>, <center>, <font>, <marquee>, <s>, <strike>, <tt> ; ',
+					info2: '2. Vérifier l’absence de l’élément <u> uniquement si le DOCTYPE du document ne correspond pas à HTML 5 ; ',
+					info3: '3. Si c’est le cas, le test est validé',
+				}],
+				expertise: ExpertiseLevelEnum.DEV,
+
+			},
+
+		],
+	},
+	{
+		title: 'Catégorie 11 : Formulaires',
+		subtitle: '11.2 Chaque étiquette associée à un champ de formulaire est-elle pertinente (hors cas particuliers) ? ',
+
+		items2: [
+
+			{
+
+				subtitle: '11.13 La finalité d’un champ de saisie peut-elle être déduite pour faciliter le remplissage automatique des champs avec les données de l’utilisateur ?  ',
+				precision: '11.13.1 Chaque champ de formulaire dont l’objet se rapporte à une information concernant l’utilisateur vérifie-t-il ces conditions ? '
+					+ 'Le champ de formulaire possède un attribut autocomplete ; '
+					+ 'L’attribut autocomplete est pourvu d’une valeur présente dans la liste des valeurs possibles pour l’attribut autocomplete associés à un champ de formulaire ; '
+					+ 'La valeur indiquée pour l’attribut autocomplete est pertinente au regard du type d’information attendu. ',
+				link: 'https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#11.13.1',
+				solution: [{
+					info1: '1. Retrouver dans le document les champs de formulaire qui se rapportent à une information concernant l’utilisateur (nom, prénom, numéro de téléphone, etc.) ; ',
+					info2: '2. Pour chaque champ de formulaire, vérifier que : Le champ de formulaire possède un attribut autocomplete ; L’attribut autocomplete est pourvu d’une valeur présente dans la liste des valeurs possibles; La valeur indiquée pour l’attribut autocomplete est pertinente au regard du type d’information attendu.',
+					info3: '3. Si c’est le cas pour chaque champ de formulaire retrouvé, le test est validé.',
+				}],
+				expertise: ExpertiseLevelEnum.DEV,
+
+			},
+
+		],
+		items: [
+			{
+				precision: '11.2.2 Chaque attribut title permet-il de connaître la fonction exacte du champ de formulaire auquel il est associé',
+				link: 'https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#11.2.2',
+				solution: [{
+					info1: '1. Retrouver dans le document les champs de formulaire dont l’étiquette est fournie par un attribut title ; ',
+					info2: '2. Pour chaque champ de formulaire, vérifier que le contenu de l’attribut est pertinent ; ',
+					info3: '3. Si c’est le cas pour chaque champ de formulaire, le test est validé.',
+				}],
+				expertise: ExpertiseLevelEnum.DEV,
+
+			},
+			{
+
+				precision: ' 11.2.3 Chaque étiquette implémentée via l’attribut WAI-ARIA aria-label permet-elle de connaître la fonction exacte du champ de formulaire auquel elle est associée ? ',
+				link: 'https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#11.2.3',
+				solution: [{
+					info1: '1. Retrouver dans le document les champs de formulaire dont l’étiquette est fournie par un attribut WAI-ARIA aria-label ; ',
+					info2: '2. Pour chaque champ de formulaire, vérifier que le contenu de l’attribut est pertinent ; ',
+					info3: '3. Si c’est le cas pour chaque champ de formulaire, le test est validé.',
+				}],
+				expertise: ExpertiseLevelEnum.DEV,
+
+			},
+			{
+				precision: '11.2.5 Chaque champ de formulaire ayant un intitulé visible vérifie-t-il ces conditions (hors cas particuliers) ? '
+					+ 'S’il est présent, le contenu de l’attribut WAI-ARIA aria-label du champ de formulaire contient au moins l’intitulé visible ; '
+					+ 'S’il est présent, le passage de texte lié au champ de formulaire via un attribut WAI-ARIA aria-labelledby contient au moins l’intitulé visible ; '
+					+ 'S’il est présent, le contenu de l’attribut title du champ de formulaire contient au moins l’intitulé visible ; '
+					+ 'S’il est présent le contenu de la balise <label> associé au champ de formulaire contient au moins l’intitulé visible.',
+				link: 'https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#11.2.5',
+				solution: [{
+					info1: '1. Retrouver dans le document les champs de formulaire dont l’étiquette est fournie à la fois par un intitulé visible et par le contenu soit d’un élément <label>, soit d’un attribut title ou d’un attribut aria-label ou d’un attribut aria-labelledby ; ',
+					info2: '2. Pour chaque champ de formulaire, vérifier que le contenu de l’élément <label> ou de l’attribut title ou de l’attribut aria-label ou de l’attribut aria-labelledby contient l’intitulé visible ; ',
+					info3: '3. Si c’est le cas pour chaque champ de formulaire, le test est validé. ',
+				}],
+				expertise: ExpertiseLevelEnum.DEV,
+
+			},
+		],
+
+	},
+	{
+		title: 'Catégorie 12 : Navigation',
+		subtitle: '12.9 Dans chaque page web, la navigation ne doit pas contenir de piège au clavier. Cette règle est-elle respectée ?',
+		items: [
+			{
+
+				precision: '12.9.1 Dans chaque page web, chaque élément recevant le focus vérifie-t-il une de ces conditions ? '
+					+ 'Il est possible d’atteindre l’élément suivant ou précédent pouvant recevoir le focus avec la touche de tabulation ;'
+					+ 'L’utilisateur est informé d’un mécanisme fonctionnel permettant d’atteindre au clavier l’élément suivant ou précédent pouvant recevoir le focus.',
+				link: 'https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#12.9.1',
+				solution: [{
+					info1: '1. Retrouver dans le document l’ensemble des éléments d’interface susceptibles de recevoir le focus (au moyen de la tabulation ou au moyen d’un script) ;',
+					info2: '2. Pour chaque élément d’interface, vérifier que l’utilisateur peut atteindre l’élément suivant ou précédent pouvant recevoir le focus : '
+						+ 'Soit au moyen de la touche de tabulation (Tab ou Maj+Tab) ;'
+						+ 'Soit au moyen d’une autre interaction clavier dont l’utilisateur est informé (par exemple, les flèches de direction).',
+					info3: '3. Si c’est le cas pour chaque élément d’interface, le test est validé.',
+				}],
+				expertise: ExpertiseLevelEnum.DEV,
+
+			},
+
+		],
+	},
+]
+
+export const AccessibiliteItemsValidated = [
+	{
+		title: 'Catégorie 1 : Images',
+		subtitle: '1.2 Chaque image de décoration est-elle correctement ignorée par les technologies d’assistance ?',
+
+		items: [
+			{
+				precision: '1.2.4 Chaque image vectorielle (balise <svg>) de décoration, sans légende, vérifie-t-elle ces conditions ? '
+					+ ' La balise <svg> possède un attribut WAI-ARIA aria-hidden="true" ;'
+					+ ' La balise <svg> et ses enfants sont dépourvus d’alternative textuelle ;'
+					+ ' Les balises <title> et <desc> sont absentes ou vides ;'
+					+ ' La balise <svg> et ses enfants sont dépourvus d’attribut title.',
+				link: 'https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#1.2.4',
+				solution: [{
+					info1: '1. Pour chaque image, vérifier que l’élément <svg> ne possède pas d’attributs aria-labelledby ou aria-label et qu’il :'
+						+ ' Possède un attribut WAI-ARIA aria-hidden="true" ;'
+						+ ' Et est dépourvu d’alternative textuelle (ainsi que ses éléments enfants) ;'
+						+ ' Et ne contient pas d’éléments <title> et <desc> à moins que vides de contenu ;'
+						+ ' Et est dépourvu d’attribut title (ainsi que ses éléments enfants).'
+						+ ' Le nom du composant est cohérent avec l’état de la fonctionnalité ou des contenus contrôlés (par exemple pour une fonctionnalité permettant d’afficher ou de masquer une zone de contenu).',
+					info2: '2. Sinon, vérifier la présence d’un composant d’interface accessible permettant d’accéder aux mêmes fonctionnalités',
+					info3: '3. Si c’est le cas pour chaque image, le test est validé.',
+				}],
+				expertise: ExpertiseLevelEnum.DESIGN,
+
+			},
+		],
+	},
+	{
+		title: 'Catégorie 7 : Scripts',
+		subtitle: '7.1 Chaque script est-il, si nécessaire, compatible avec les technologies d’assistance ?',
+		items: [
+
+			{
+				precision: ' 7.1.3 Chaque script qui génère ou contrôle un composant d’interface vérifie-t-il ces conditions : '
+					+ 'Le composant possède un nom pertinent ;'
+					+ 'Le nom accessible du composant contient au moins l’intitulé visible ;'
+					+ 'Le composant possède un rôle pertinent.',
+
+				link: 'https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#7.1.3',
+				solution: [{
+					info1: '1. Pour chacun des composants d’interface ayant validé le test 7.1.1, vérifier que le composant d’interface possède : ',
+					info2: '2. Un nom pertinent (intitulé visible) et un rôle pertinent',
+					info3: '3. Si le composant d’interface possède un nom accessible, vérifier que ce nom est pertinent et contient au moins l’intitulé visible.',
+				}],
+				expertise: ExpertiseLevelEnum.DESIGN,
+
+			},
+
+		],
+	},
+
+	{
+		title: 'Catégorie 8 : Eléments Obligatoires',
+		subtitle: '8.9 Dans chaque page web, les balises ne doivent pas être utilisées uniquement à des fins de présentation',
+		items: [
+
+			{
+				precision: ' 8.9.1 Dans chaque page web les balises (à l’exception de <div>, <span> et <table>) ne doivent pas être utilisées uniquement à des fins de présentation. Cette règle est-elle respectée',
+				link: 'https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#8.9.1',
+				solution: [{
+					info1: '1. Retrouver dans le document l’ensemble des éléments sémantiques utilisés à des fins de présentation ;',
+					info2: '2. Pour chacun de ces éléments, vérifier que :'
+						+ 'L’élément est pourvu d’un attribut role=“presentation” ;'
+						+ 'L’utilisation de cet élément à des fins de présentation reste justifée',
+					info3: '3. Si c’est le cas, le test est validé',
+				}],
+				expertise: ExpertiseLevelEnum.DESIGN,
+
+			},
+
+		],
+	},
+	{
+		title: 'Catégorie 11 : Formulaires',
+		subtitle: '11.1 Chaque champ de formulaire a-t-il une étiquette ',
+		items: [
+			{
+				precision: '11.1.1 Chaque champ de formulaire vérifie-t-il une de ces conditions ? '
+					+ 'Le champ de formulaire possède un attribut WAI-ARIA aria-labelledby référençant un passage de texte identifié ; '
+					+ 'Le champ de formulaire possède un attribut WAI-ARIA aria-label ; '
+					+ 'Une balise <label> ayant un attribut for est associée au champ de formulaire ; '
+					+ 'Le champ de formulaire possède un attribut title ; '
+					+ 'Un bouton adjacent au champ de formulaire lui fournit une étiquette visible et un élément <label> visuellement caché ou un attribut WAI-ARIA aria-label, aria-labelledby ou title lui fournit un nom accessible.',
+				link: 'https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#11.1.1',
+				solution: [{
+					info1: '1. Retrouver dans le document les champs de formulaire ; ',
+					info2: '2. Pour chaque champ de formulaire, vérifier que le champ de formulaire : '
+						+ 'Possède un attribut WAI-ARIA aria-labelledby référençant un passage de texte identifié ; '
+						+ 'Possède un attribut WAI-ARIA aria-label ; '
+						+ 'Est associé à un élément <label> ayant un attribut for ; '
+						+ 'Possède un attribut title ; '
+						+ 'Un bouton adjacent au champ de formulaire lui fournit une étiquette visible et un élément <label> visuellement caché ou un attribut WAI-ARIA aria-label, aria-labelledby ou title lui fournit un nom accessible. ',
+					info3: '3. Si c’est le cas pour champ de formulaire, le test est validé. ',
+				}],
+				expertise: ExpertiseLevelEnum.DESIGN,
+
+			},
+
+		],
+
+	},
+]

package/src/components/DatePicker/DatePicker.mdx

@@ -0,0 +1,186 @@
+import {Meta, Canvas, Controls, Source} from '@storybook/blocks';
+import * as DatePickerStories from "./DatePicker.stories.ts";
+
+<Meta of={DatePickerStories}/>
+
+# DatePicker
+
+Le composant `DatePicker` est un champ qui permet de sélectionner une date via un calendrier, avec une option pour sélectionner une plage de dates.
+
+<Canvas story={{height: '550px'}} of={DatePickerStories.Default}/>
+
+# API
+
+<Controls of={DatePickerStories.Default}/>
+
+# Props
+
+## Valeur et contrôle
+
+### modelValue
+- **Type** : `string | string[]`
+- **Description** : La valeur du champ. Pour une plage de dates, utiliser un tableau de deux dates. La valeur doit être fournie dans le même format que celui spécifié dans la prop `format`.
+- **Défaut** : `undefined`
+
+### placeholder
+- **Type** : `string`
+- **Description** : Texte indicatif affiché quand le champ est vide
+- **Défaut** : `'Sélectionner une date'`
+
+### format
+- **Type** : `string`
+- **Description** : Format d'affichage et d'entrée de la date. Supporte les formats suivants :
+- `DD` : jour sur 2 chiffres
+- `MM` : mois sur 2 chiffres
+- `YYYY` : année sur 4 chiffres
+- `YY` : année sur 2 chiffres (assumé comme 20XX)
+Les séparateurs peuvent être `/`, `-` ou `.`
+- **Défaut** : `'DD/MM/YYYY'`
+
+### dateFormatReturn
+- **Type** : `string`
+- **Description** : Format de la date pour la valeur de retour. Utilise les mêmes tokens que la prop `format`. Si non spécifié, utilise le même format que `format`.
+- **Défaut** : `''`
+
+<div
+    style={{
+        border: '2px solid #FF0000',
+        padding: '1rem',
+        borderRadius: '4px',
+        marginBottom: '1rem',
+    }}
+>
+    <strong>Note importante sur les formats</strong>
+    <p>
+        Le composant utilise deux formats distincts :
+    </p>
+    <ol>
+        <li>
+            <strong>Format d'entrée/affichage</strong><br/>
+            Défini par la prop <code>format</code>, il détermine à la fois :
+            <ul>
+                <li>Le format dans lequel la date doit être fournie au composant</li>
+                <li>Comment la date est affichée visuellement dans le champ</li>
+            </ul>
+        </li>
+        <li>
+            <strong>Format de retour</strong><br/>
+            Défini par la prop <code>dateFormatReturn</code>, il détermine le format de la date émise
+        </li>
+    </ol>
+    <p>
+        Par exemple, avec <code>format="DD-MM-YY"</code> et <code>dateFormatReturn="YYYY/MM/DD"</code> :
+    </p>
+    <ul>
+        <li>Vous devez fournir la date au format : <code>24-12-25</code></li>
+        <li>Elle sera affichée comme : <code>24-12-25</code></li>
+        <li>Elle sera retournée comme : <code>2025/12/24</code></li>
+    </ul>
+</div>
+
+
+
+### required
+- **Type** : `boolean`
+- **Description** : Indique si le champ est obligatoire
+- **Défaut** : `false`
+
+### isDisabled
+- **Type** : `boolean`
+- **Description** : Désactive le champ
+- **Défaut** : `false`
+
+## Configuration du calendrier
+
+### isBirthDate
+- **Type** : `boolean`
+- **Description** : Active le mode date de naissance (commence par la sélection de l'année)
+- **Défaut** : `false`
+
+### isOutlined
+- **Type** : `boolean`
+- **Description** : Active le style de champ de saisie "outlined" (bordure) plutôt que "underlined" (fond)
+- **Défaut** : `true`
+
+### showWeekNumber
+- **Type** : `boolean`
+- **Description** : Affiche les numéros de semaine dans le calendrier
+- **Défaut** : `false`
+
+### displayRange
+- **Type** : `boolean`
+- **Description** : Active la sélection d'une plage de dates
+- **Défaut** : `false`
+
+## Apparence
+
+### displayIcon
+- **Type** : `boolean`
+- **Description** : Affiche l'icône de calendrier
+- **Défaut** : `false`
+
+### displayAppendIcon
+- **Type** : `boolean`
+- **Description** : Affiche l'icône à la fin du champ plutôt qu'au début
+- **Défaut** : `false`
+
+### noIcon
+- **Type** : `boolean`
+- **Description** : Masque toutes les icônes
+- **Défaut** : `false`
+
+## Validation
+
+### customRules
+- **Type** : `{ type: string, options: RuleOptions }[]`
+- **Description** : Règles de validation personnalisées
+- **Défaut** : `[]`
+
+### customWarningRules
+- **Type** : `{ type: string, options: RuleOptions }[]`
+- **Description** : Règles d'avertissement personnalisées
+- **Défaut** : `[]`
+
+# Exemple d'utilisation
+
+<Source
+    dark code={`
+<script setup lang="ts">
+	import { ref } from 'vue'
+	import { DatePicker } from '@cnamts/synapse'
+
+	const date = ref('')
+</script>
+
+<template>
+	<DatePicker
+		v-model="date"
+		placeholder="Sélectionner une date"
+		format="DD/MM/YYYY"
+		required
+	/>
+</template>
+`}
+/>
+
+## Exemple avec plage de dates
+
+<Source
+    dark code={`
+<script setup lang="ts">
+	import { ref } from 'vue'
+	import { DatePicker } from '@cnamts/synapse'
+
+	const dateRange = ref(['', ''])
+</script>
+
+<template>
+	<DatePicker
+		v-model="dateRange"
+		placeholder="Sélectionner une période"
+		format="DD/MM/YYYY"
+		display-range
+	/>
+</template>
+`}
+/>