@cnamts/synapse 1.0.21 → 1.0.22

package/src/components/DatePicker/docExamples/DatePickerValidationExamples.vue

@@ -1,6 +1,7 @@
 <script setup>
 	import { ref } from 'vue'
 	import DatePicker from '@/components/DatePicker/CalendarMode/DatePicker.vue'
+	import SyHeading from '@/components/SyHeading/SyHeading.vue'
 
 	// Exemple 1: Validation de base (required)
 	const date1 = ref('')
@@ -56,15 +57,15 @@
 
 <template>
 	<div class="date-picker-validation-examples">
-		<h1 class="text-h5 mb-6">
+		<SyHeading	:level="1">
 			Exemples de validation du DatePicker
-		</h1>
+		</SyHeading>
 
 		<!-- Exemple 1: Validation de base (required) -->
 		<section class="mb-10">
-			<h2 class="text-h6 mb-3">
+			<SyHeading	:level="2">
 				Validation de base (required)
-			</h2>
+			</SyHeading>
 			<div class="mb-2">
 				<DatePicker
 					v-model="date1"
@@ -94,9 +95,12 @@
 
 		<!-- Exemple 2: notWeekend -->
 		<section class="mb-10">
-			<h2 class="text-h6 mb-3">
+			<SyHeading
+				class="text-h6 mb-3"
+				:level="2"
+			>
 				Validation notWeekend
-			</h2>
+			</SyHeading>
 			<p class="text-body-2 mb-2">
 				Cette règle vérifie que la date n'est pas un weekend
 			</p>
@@ -136,9 +140,12 @@
 
 		<!-- Exemple 3: notAfterToday -->
 		<section class="mb-10">
-			<h2 class="text-h6 mb-3">
+			<SyHeading
+				class="text-h6 mb-3"
+				:level="2"
+			>
 				Validation notAfterToday
-			</h2>
+			</SyHeading>
 			<p class="text-body-2 mb-2">
 				Cette règle vérifie que la date n'est pas postérieure à aujourd'hui
 			</p>
@@ -185,9 +192,12 @@
 
 		<!-- Exemple 4: notBeforeToday -->
 		<section class="mb-10">
-			<h2 class="text-h6 mb-3">
+			<SyHeading
+				class="text-h6 mb-3"
+				:level="2"
+			>
 				Validation notBeforeToday
-			</h2>
+			</SyHeading>
 			<p class="text-body-2 mb-2">
 				Cette règle vérifie que la date n'est pas antérieure à aujourd'hui
 			</p>
@@ -234,9 +244,12 @@
 
 		<!-- Exemple 5: notBeforeDate -->
 		<section class="mb-10">
-			<h2 class="text-h6 mb-3">
+			<SyHeading
+				class="text-h6 mb-3"
+				:level="2"
+			>
 				Validation notBeforeDate
-			</h2>
+			</SyHeading>
 			<p class="text-body-2 mb-2">
 				Cette règle vérifie que la date n'est pas antérieure à une date de référence
 			</p>
@@ -277,9 +290,12 @@
 
 		<!-- Exemple 6: notAfterDate -->
 		<section class="mb-10">
-			<h2 class="text-h6 mb-3">
+			<SyHeading
+				class="text-h6 mb-3"
+				:level="2"
+			>
 				Validation notAfterDate
-			</h2>
+			</SyHeading>
 			<p class="text-body-2 mb-2">
 				Cette règle vérifie que la date n'est pas postérieure à une date de référence
 			</p>
@@ -320,9 +336,12 @@
 
 		<!-- Exemple 7: dateExact -->
 		<section class="mb-10">
-			<h2 class="text-h6 mb-3">
+			<SyHeading
+				class="text-h6 mb-3"
+				:level="2"
+			>
 				Validation dateExact
-			</h2>
+			</SyHeading>
 			<p class="text-body-2 mb-2">
 				Cette règle vérifie que la date est exactement égale à une date de référence
 			</p>
@@ -363,9 +382,12 @@
 
 		<!-- Exemple 8: customRules (règle personnalisée) -->
 		<section class="mb-10">
-			<h2 class="text-h6 mb-3">
+			<SyHeading
+				class="text-h6 mb-3"
+				:level="2"
+			>
 				Règle personnalisée (custom)
-			</h2>
+			</SyHeading>
 			<p class="text-body-2 mb-2">
 				Cette règle vérifie que la date n'est pas en 2024
 			</p>
@@ -418,9 +440,12 @@
 
 		<!-- Exemple 9: customWarningRules -->
 		<section class="mb-10">
-			<h2 class="text-h6 mb-3">
+			<SyHeading
+				class="text-h6 mb-3"
+				:level="2"
+			>
 				Règle d'avertissement
-			</h2>
+			</SyHeading>
 			<p class="text-body-2 mb-2">
 				Cette règle affiche un avertissement si la date est en 2025
 			</p>
@@ -477,9 +502,12 @@
 
 		<!-- Exemple 10: Combinaison de plusieurs règles -->
 		<section class="mb-10">
-			<h2 class="text-h6 mb-3">
+			<SyHeading
+				class="text-h6 mb-3"
+				:level="2"
+			>
 				Combinaison de plusieurs règles
-			</h2>
+			</SyHeading>
 			<p class="text-body-2 mb-2">
 				Exemple de DatePicker avec plusieurs règles de validation
 			</p>

package/src/components/DatePicker/playground/ComplexDatePickerPlayground.vue

@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 	import { ref } from 'vue'
 	import ComplexDatePicker from '../ComplexDatePicker/ComplexDatePicker.vue'
+	import SyHeading from '@/components/SyHeading/SyHeading.vue'
 
 	// Valeurs pour les différents exemples
 	const standardDate = ref<string | null>(null)
@@ -15,12 +16,21 @@
 
 <template>
 	<div class="playground-container">
-		<h1>ComplexDatePicker Playground</h1>
-
+		<SyHeading
+			:level="1"
+		>
+			ComplexDatePicker Playground
+		</SyHeading>
 		<div class="demo-section">
-			<h2>Format standard (DD/MM/YYYY)</h2>
+			<SyHeading
+				:level="2"
+			>
+				Format standard (DD/MM/YYYY)
+			</SyHeading>
 			<ComplexDatePicker
 				v-model="standardDate"
+				:heading-level="2"
+				:heading-level-complex-date-picker="2"
 				label="Date standard"
 				placeholder="15/03/2024"
 				format="DD/MM/YYYY"
@@ -32,10 +42,14 @@
 		</div>
 
 		<div class="demo-section">
-			<h2>Format américain (MM/DD/YYYY)</h2>
+			<SyHeading	:level="2">
+				Format américain (MM/DD/YYYY)
+			</SyHeading>
 			<ComplexDatePicker
 				v-model="americanDate"
 				label="Date américaine"
+				:heading-level="2"
+				:heading-level-complex-date-picker="2"
 				placeholder="03/15/2024"
 				format="MM/DD/YYYY"
 				class="date-picker"
@@ -46,10 +60,14 @@
 		</div>
 
 		<div class="demo-section">
-			<h2>Format ISO (YYYY-MM-DD)</h2>
+			<SyHeading	:level="2">
+				Format ISO (YYYY-MM-DD)
+			</SyHeading>
 			<ComplexDatePicker
 				v-model="isoDate"
 				label="Date ISO"
+				:heading-level="2"
+				:heading-level-complex-date-picker="2"
 				placeholder="2024-03-15"
 				format="YYYY-MM-DD"
 				class="date-picker"
@@ -60,10 +78,14 @@
 		</div>
 
 		<div class="demo-section">
-			<h2>Format avec séparateur point (DD.MM.YYYY)</h2>
+			<SyHeading	:level="2">
+				Format avec séparateur point (DD.MM.YYYY)
+			</SyHeading>
 			<ComplexDatePicker
 				v-model="dotDate"
 				label="Date avec points"
+				:heading-level="2"
+				:heading-level-complex-date-picker="2"
 				placeholder="15.03.2024"
 				format="DD.MM.YYYY"
 				class="date-picker"
@@ -74,9 +96,13 @@
 		</div>
 
 		<div class="demo-section">
-			<h2>Champ requis</h2>
+			<SyHeading	:level="2">
+				Champ requis
+			</SyHeading>
 			<ComplexDatePicker
 				v-model="requiredDate"
+				:heading-level="2"
+				:heading-level-complex-date-picker="2"
 				label="Date requise"
 				placeholder="Veuillez sélectionner une date *"
 				format="DD/MM/YYYY"
@@ -89,10 +115,14 @@
 		</div>
 
 		<div class="demo-section">
-			<h2>Plage de dates</h2>
+			<SyHeading	:level="2">
+				Plage de dates
+			</SyHeading>
 			<ComplexDatePicker
 				v-model="dateRange"
 				label="Plage de dates"
+				:heading-level="2"
+				:heading-level-complex-date-picker="2"
 				placeholder="01/01/2024 au 31/12/2024"
 				format="DD/MM/YYYY"
 				display-range
@@ -104,10 +134,14 @@
 		</div>
 
 		<div class="demo-section">
-			<h2>Date de naissance (année d'abord)</h2>
+			<SyHeading	:level="2">
+				Date de naissance (année d'abord)
+			</SyHeading>
 			<ComplexDatePicker
 				v-model="birthDate"
 				label="Date de naissance"
+				:heading-level="2"
+				:heading-level-complex-date-picker="2"
 				placeholder="25/12/1990"
 				format="DD/MM/YYYY"
 				is-birth-date
@@ -119,9 +153,13 @@
 		</div>
 
 		<div class="demo-section">
-			<h2>Format d'affichage vs format de retour</h2>
+			<SyHeading	:level="2">
+				Format d'affichage vs format de retour
+			</SyHeading>
 			<ComplexDatePicker
 				v-model="formattedDate"
+				:heading-level="2"
+				:heading-level-complex-date-picker="2"
 				label="Date avec format de retour"
 				placeholder="Affichage: 15/03/2024, Retour: 2024-03-15"
 				format="DD/MM/YYYY"

package/src/components/DatePicker/playground/DatePickerHolidayRule.vue

@@ -2,6 +2,7 @@
 	import { ref, computed } from 'vue'
 	import { useFieldValidation } from '@/composables/rules/useFieldValidation'
 	import { useHolidayDay } from '@/composables/date/useHolidayDay'
+	import SyHeading from '@/components/SyHeading/SyHeading.vue'
 
 	const selectedDate = ref('')
 	const { generateRules } = useFieldValidation()
@@ -36,7 +37,11 @@
 
 <template>
 	<div class="date-picker-holiday-example">
-		<h2>DatePicker avec règle de validation pour jours fériés</h2>
+		<SyHeading
+			:level="2"
+		>
+			DatePicker avec règle de validation pour jours fériés
+		</SyHeading>
 		<p>
 			Cet exemple montre comment utiliser la règle <code>isHolidayDay</code> pour empêcher
 			la sélection de jours fériés dans un DatePicker.
@@ -53,7 +58,11 @@
 		</div>
 
 		<div class="info-container mt-4">
-			<h3>Informations</h3>
+			<SyHeading
+				:level="3"
+			>
+				Informations
+			</SyHeading>
 			<p>Date sélectionnée : <strong>{{ selectedDate || 'Aucune' }}</strong></p>
 
 			<div
@@ -78,7 +87,11 @@
 				v-if="currentYearHolidays.length"
 				class="holiday-list mt-4"
 			>
-				<h4>Jours fériés {{ currentYear }} :</h4>
+				<SyHeading
+					:level="4"
+				>
+					Jours fériés {{ currentYear }} :
+				</SyHeading>
 				<ul>
 					<li
 						v-for="(date, index) in currentYearHolidays"

package/src/components/DialogBox/DialogBox.stories.ts

@@ -16,6 +16,11 @@ const meta: Meta<typeof DialogBox> = {
 		},
 	},
 	argTypes: {
+		'headingLevel': {
+			control: { type: 'select' },
+			options: [1, 2, 3, 4, 5, 6],
+			description: 'Niveau de titre pour le titre de la boîte de dialogue',
+		},
 		'modelValue': {
 			control: 'boolean',
 			description: 'Afficher la boîte de dialogue, a utiliser avec `v-model`',
@@ -203,6 +208,7 @@ type Story = StoryObj<typeof meta>
 
 export const Default: Story = {
 	args: {
+		'headingLevel': 2,
 		'modelValue': false,
 		'title': 'DialogBox title',
 		'default': 'DialogBox content',
@@ -277,6 +283,7 @@ export const Default: Story = {
 
 export const ButtonTexts: Story = {
 	args: {
+		'headingLevel': 2,
 		'modelValue': false,
 		'title': 'DialogBox title',
 		'default': 'DialogBox content',
@@ -417,6 +424,7 @@ export const HideActions: Story = {
 
 export const Persistent: Story = {
 	args: {
+		'headingLevel': 2,
 		'modelValue': false,
 		'title': 'DialogBox title',
 		'default': 'DialogBox content',
@@ -491,6 +499,7 @@ export const ActionsSlot: Story = {
 		'modelValue': false,
 		'title': 'DialogBox title',
 		'default': 'DialogBox content',
+		'headingLevel': 2,
 		'onCancel': fn(),
 		'onConfirm': fn(),
 		'onUpdate:modelValue': fn(),
@@ -565,6 +574,7 @@ export const ActionsSlot: Story = {
 
 export const TitleSlot: Story = {
 	args: {
+		'headingLevel': 2,
 		'modelValue': false,
 		'default': 'DialogBox content',
 		'onCancel': fn(),
@@ -639,6 +649,7 @@ export const TitleSlot: Story = {
 
 export const Width: Story = {
 	args: {
+		'headingLevel': 2,
 		'modelValue': false,
 		'title': 'DialogBox title',
 		'default': 'DialogBox content',
@@ -710,6 +721,7 @@ export const Width: Story = {
 
 export const VuetifyOptions: Story = {
 	args: {
+		'headingLevel': 2,
 		'modelValue': false,
 		'title': 'DialogBox title',
 		'default': 'DialogBox content',
@@ -829,6 +841,7 @@ export const VuetifyOptions: Story = {
 
 export const Draggable: Story = {
 	args: {
+		'headingLevel': 2,
 		'modelValue': false,
 		'title': 'DialogBox title',
 		'default': 'DialogBox content',

package/src/components/DialogBox/DialogBox.vue

@@ -8,6 +8,7 @@
 	import { config } from './config'
 	import { locales } from './locales'
 	import { useDraggable } from './useDraggable'
+	import SyHeading from '@/components/SyHeading/SyHeading.vue'
 
 	const props = withDefaults(defineProps<{
 		title?: string
@@ -18,6 +19,7 @@
 		persistent?: boolean
 		autofocusValidateBtn?: boolean
 		draggable?: boolean
+		headingLevel?: 1 | 2 | 3 | 4 | 5 | 6
 	} & CustomizableOptions>(), {
 		title: undefined,
 		width: '800px',
@@ -26,12 +28,13 @@
 		hideActions: false,
 		persistent: false,
 		autofocusValidateBtn: false,
+		headingLevel: 2,
 	})
 
 	defineEmits(['cancel', 'confirm', 'update:modelValue'])
 	defineSlots<{
 		default?: () => undefined
-		title?: () => undefined
+		title?: (props: { id: string }) => undefined
 		actions?: () => undefined
 	}>()
 
@@ -151,14 +154,18 @@
 				@keydown.up.self="moveToTop"
 				@keydown.down.self="moveToBottom"
 			>
-				<slot name="title">
-					<h2
+				<slot
+					:id="id"
+					name="title"
+				>
+					<SyHeading
 						v-if="title"
 						:id="id"
-						class="text-h4 mr-6 font-weight-bold"
+						:class="headingLevel === 2 ? 'text-h4 mr-6 font-weight-bold' : 'mr-6 font-weight-bold'"
+						:level="headingLevel"
 					>
 						{{ props.title }}
-					</h2>
+					</SyHeading>
 				</slot>
 
 				<VSpacer v-bind="options.spacer" />

package/src/components/DialogBox/accessibilite/Accessibility.mdx

@@ -1,15 +1,35 @@
-import { Meta, Story } from '@storybook/addon-docs';
+import { Meta, Story, Primary } from '@storybook/addon-docs';
 import * as DialogBoxStories from '../DialogBox.stories.ts';
 import '@/stories/styles/shared.css';
+import AccessibilityIcon from '@/common/imgs/accessibility-svgrepo-com.svg';
+import {
+	AccessibilityGuideLayout,
+	CriteriaSection,
+	CriteriaCard,
+	DemoSection,
+	BestPracticesSection,
+	ResourcesSection,
+} from '@/stories/accessibility/AccessibilityGuideLayout.mdx';
 
 <Meta of={DialogBoxStories} />
-
-<div className="header">
-  <h1>Accessibilité</h1>
-</div>
-
-
+<AccessibilityGuideLayout
+	componentName="DialogBox"
+	iconSrc={AccessibilityIcon}
+>
 <div class="mt-2">
 <p>Rapport d’audit manuel : <a href="/audits/DialogBox.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/798" target="_blank" style={{color:'#0C41BD'}}>issue #798</a>)</p>
 	</div>
+<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 h2, défini dans l’implémentation du composant.</li>
+      <code>&lt;DialogBox
+          :heading-level="2" /&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>
+</CriteriaSection>
+
+</AccessibilityGuideLayout>

package/src/components/DialogBox/tests/DialogBox.a11y.spec.ts

@@ -22,6 +22,7 @@ describe('DialogBox – accessibility (axe)', () => {
 	it('has no obvious axe violations with title, content and actions', async () => {
 		const wrapper = mount(DialogBox, {
 			props: {
+				headingLevel: 2,
 				modelValue: true,
 				title: 'Confirmation',
 				confirmBtnText: 'Valider',

package/src/components/DialogBox/tests/DialogBox.spec.ts

@@ -20,7 +20,10 @@ describe('DialogBox', () => {
 	describe('rendering and props', () => {
 		it('renders correctly with props', () => {
 			const wrapper = mount(DialogBox, {
-				props: defaultProps,
+				props: {
+					...defaultProps,
+					headingLevel: 2,
+				},
 				global: {
 					stubs: {
 						VDialog: {
@@ -39,6 +42,8 @@ describe('DialogBox', () => {
 				props: {
 					...defaultProps,
 					modelValue: false,
+					headingLevel: 2,
+
 				},
 				attachTo: document.body,
 			})
@@ -49,7 +54,10 @@ describe('DialogBox', () => {
 
 		it('becomes visible when the model value is updated', async () => {
 			const wrapper = mount(DialogBox, {
-				props: defaultProps,
+				props: {
+					...defaultProps,
+					headingLevel: 2,
+				},
 			})
 
 			// Initially visible with modelValue: true
@@ -91,7 +99,10 @@ describe('DialogBox', () => {
 				slots: {
 					title: '<h2>Test title</h2>',
 				},
-				props: defaultProps,
+				props: {
+					...defaultProps,
+					headingLevel: 2,
+				},
 				attachTo: document.body,
 			})
 
@@ -120,6 +131,7 @@ describe('DialogBox', () => {
 					...defaultProps,
 					hideActions: true,
 					persistent: true,
+					headingLevel: 2,
 				},
 				attachTo: document.body,
 			})
@@ -156,6 +168,8 @@ describe('DialogBox', () => {
 					...defaultProps,
 					hideActions: true,
 					persistent: true,
+					headingLevel: 2,
+
 				},
 				attachTo: document.body,
 			})
@@ -283,6 +297,8 @@ describe('DialogBox', () => {
 			const wrapper = mount(DialogBox, {
 				props: {
 					modelValue: true,
+					headingLevel: 2,
+
 				},
 				attachTo: document.body,
 			})
@@ -300,7 +316,10 @@ describe('DialogBox', () => {
 
 		it('emits a cancel event when cancel button is clicked', async () => {
 			const wrapper = mount(DialogBox, {
-				props: defaultProps,
+				props: {
+					...defaultProps,
+					headingLevel: 2,
+				},
 				attachTo: document.body,
 			})
 
@@ -315,7 +334,10 @@ describe('DialogBox', () => {
 
 		it('emits a confirm event when confirm button is clicked', async () => {
 			const wrapper = mount(DialogBox, {
-				props: defaultProps,
+				props: {
+					...defaultProps,
+					headingLevel: 2,
+				},
 				attachTo: document.body,
 			})
 
@@ -332,7 +354,10 @@ describe('DialogBox', () => {
 	describe('Test methods', () => {
 		it('getSelectableElements if this.$refs.dialogContent.$el is undefined', async () => {
 			const wrapper = shallowMount(DialogBox, {
-				props: defaultProps,
+				props: {
+					...defaultProps,
+					headingLevel: 2,
+				},
 				attachTo: document.body,
 			})
 			// @ts-expect-error - Testing private method
@@ -347,6 +372,7 @@ describe('DialogBox', () => {
 			props: {
 				...defaultProps,
 				autofocusValidateBtn: true,
+				headingLevel: 2,
 			},
 			attachTo: document.body,
 		})
@@ -367,6 +393,7 @@ describe('DialogBox', () => {
 				props: {
 					...defaultProps,
 					draggable: true,
+					headingLevel: 2,
 				},
 				attachTo: document.body,
 			})
@@ -400,6 +427,7 @@ describe('DialogBox', () => {
 				props: {
 					...defaultProps,
 					draggable: true,
+					headingLevel: 2,
 				},
 				attachTo: document.body,
 			})
@@ -439,6 +467,7 @@ describe('DialogBox', () => {
 				props: {
 					...defaultProps,
 					draggable: true,
+					headingLevel: 2,
 				},
 				attachTo: document.body,
 			})
@@ -461,6 +490,7 @@ describe('DialogBox', () => {
 				props: {
 					...defaultProps,
 					draggable: true,
+					headingLevel: 2,
 				},
 				attachTo: document.body,
 			})
@@ -487,6 +517,7 @@ describe('DialogBox', () => {
 			props: {
 				...defaultProps,
 				draggable: true,
+				headingLevel: 2,
 			},
 			attachTo: document.body,
 		})
@@ -510,6 +541,7 @@ describe('DialogBox', () => {
 			props: {
 				...defaultProps,
 				draggable: true,
+				headingLevel: 2,
 			},
 			attachTo: document.body,
 		})
@@ -536,6 +568,7 @@ describe('DialogBox', () => {
 			props: {
 				...defaultProps,
 				draggable: true,
+				headingLevel: 2,
 			},
 			attachTo: document.body,
 		})
@@ -575,6 +608,7 @@ describe('DialogBox', () => {
 			props: {
 				...defaultProps,
 				draggable: true,
+				headingLevel: 2,
 			},
 			attachTo: document.body,
 		})