@cnamts/synapse 1.0.20 → 1.0.22

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,
 		})

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

@@ -1,15 +1,77 @@
-import { Meta, Story } from '@storybook/addon-docs';
-import * as Stories from '../DownloadBtn.stories.ts';
-import '@/stories/styles/shared.css';
+import { Meta, Primary } from '@storybook/blocks'
+import * as DownloadBtnStories from '../DownloadBtn.stories'
+import AccessibilityIcon from '@/common/imgs/accessibility-svgrepo-com.svg'
+import {
+    AccessibilityGuideLayout,
+    CriteriaSection,
+    CriteriaCard,
+    DemoSection,
+    BestPracticesSection,
+    ResourcesSection,
+    AuditSection
+} from '@/stories/accessibility/AccessibilityGuideLayout.mdx'
 
-<Meta of={Stories} />
+<Meta of={DownloadBtnStories}/>
 
-<div className="header">
-  <h1>Accessibilité</h1>
-</div>
+<AccessibilityGuideLayout componentName="DownloadBtn" iconSrc={AccessibilityIcon}>
 
+    <AuditSection>
+        <p>Rapport d’audit manuel : <a href="/audits/DownloadBtn.xlsx" style={{color: '#0C41BD'}}>Voir le rapport</a></p>
+    </AuditSection>
 
-<div class="mt-2">
-<p>Rapport d’audit manuel : <a href="/audits/DownloadBtn.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/4007" target="_blank" style={{color:'#0C41BD'}}>issue #4007</a>)</p>
-	</div>
+    <CriteriaSection>
+
+        <CriteriaCard icon="🏷️" title="Nom accessible explicite">
+            <ul>
+                <li>Le bouton doit avoir un texte visible explicite.</li>
+                <li>Si icône seule, un aria-label est obligatoire.</li>
+                <li>L’icône doit être décorative.</li>
+            </ul>
+        </CriteriaCard>
+
+        <CriteriaCard icon="⌨️" title="Interaction clavier">
+            <ul>
+                <li>Activation via Entrée et Espace.</li>
+                <li>Ordre de tabulation cohérent.</li>
+            </ul>
+        </CriteriaCard>
+
+        <CriteriaCard icon="🔄" title="Gestion des états">
+            <ul>
+                <li>Annonce du chargement via aria-live.</li>
+                <li>Message d’erreur accessible en cas d’échec.</li>
+            </ul>
+        </CriteriaCard>
+
+        <CriteriaCard icon="👁️" title="Focus visible">
+            <ul>
+                <li>Focus clavier visible.</li>
+                <li>Ne pas supprimer le focus natif.</li>
+            </ul>
+        </CriteriaCard>
+
+    </CriteriaSection>
+
+    <DemoSection componentName="DownloadBtn">
+        <Primary/>
+    </DemoSection>
+
+    <BestPracticesSection>
+        <ul>
+            <li>Indiquer le format et le poids du fichier.</li>
+            <li>Fournir un fallbackFilename explicite.</li>
+            <li>Désactiver le bouton pendant le chargement.</li>
+        </ul>
+    </BestPracticesSection>
+
+    <ResourcesSection>
+        <ul>
+            <li>
+                <a href="https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/" target="_blank" rel="noopener noreferrer">
+                    RGAA 4.1 – Critères
+                </a>
+            </li>
+        </ul>
+    </ResourcesSection>
+
+</AccessibilityGuideLayout>

package/src/components/DownloadBtn/config.ts

@@ -1,6 +1,6 @@
 export const config = {
 	btn: {
-		variant: 'outlined',
+		variant: 'outlined' as const,
 		color: 'primary',
 		class: 'text-wrap',
 		minHeight: '36px',

package/src/components/ErrorPage/ErrorPage.mdx

@@ -1,23 +1,13 @@
-import {Controls, Canvas, Meta, Source} from '@storybook/blocks';
-
-import * as ErrorPageStories from './ErrorPage.stories'
+import { Controls, Canvas, Meta, Source } from "@storybook/blocks";
+import '../../stories/styles/shared.css';
+import * as ErrorPageStories from "./ErrorPage.stories";
 
 <Meta of={ErrorPageStories} />
-import '../../stories/styles/shared.css';
 
 <div className="header">
   <h1>ErrorPage</h1>
-  <p>Le composant `ErrorPage` sert à afficher une page d'erreur.</p>
+  <p>Le composant `ErrorPage` permet d'afficher une page d'error.
+Il est basé sur le composant `StatusPage` du design system.</p>
 </div>
 
-<Canvas of={ErrorPageStories.Default} />
-
-# API
-
-<Controls of={ErrorPageStories.Default} />
-
-## Lien de retour
-
-Vous pouvez mettre un lien vers une autre page avec les props `btn-text` et `btn-link` ou `btn-href`.
-
-<Canvas of={ErrorPageStories.WithLink} />
+<Canvas of={ErrorPageStories.Default} />