@cnamts/synapse 1.0.21 → 1.0.23

package/src/components/PageContainer/PageContainer.stories.ts

@@ -207,3 +207,50 @@ export const Card: Story = {
 		}
 	},
 }
+
+export const WithAriaRole: Story = {
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `<template>
+	<PageContainer
+		role="region"
+		unique-id="main-content"
+		aria-labelledby="main-content-title"
+	>
+		<h2 id="main-content-title">Contenu principal</h2>
+		Contenu de la page
+	</PageContainer>
+</template>
+				`,
+			},
+			{
+				name: 'Script',
+				code: `<script setup lang="ts">
+	import { PageContainer } from '@cnamts/synapse'
+</script>
+				`,
+			},
+		],
+	},
+	args: {
+		role: 'region',
+		uniqueId: 'main-content',
+		ariaLabelledby: 'main-content-title',
+	},
+	render: (args) => {
+		return {
+			components: { PageContainer },
+			setup() {
+				return { args }
+			},
+			template: `
+				<PageContainer :role="args.role" :unique-id="args.uniqueId" :aria-labelledby="args.ariaLabelledby">
+					<h2 id="main-content-title" class="pa-4">Contenu principal</h2>
+					<p class="pa-4">Contenu de la page</p>
+				</PageContainer>
+			`,
+		}
+	},
+}

package/src/components/PageContainer/PageContainer.vue

@@ -1,8 +1,7 @@
 <script setup lang="ts">
 	import { computed } from 'vue'
 	import { useDisplay } from 'vuetify'
-
-	type AriaRole = 'main' | 'region' | 'navigation' | 'contentinfo' | 'banner'
+	import type { AriaRole } from '../types'
 
 	const props = withDefaults(defineProps<{
 		size?: 'xl' | 'lg' | 'md' | 'sm' | 'xs'
@@ -10,12 +9,14 @@
 		color?: string
 		uniqueId?: string
 		role?: AriaRole
+		ariaLabelledby?: string
 	}>(), {
 		size: undefined,
 		spacing: undefined,
 		color: 'transparent',
 		uniqueId: undefined,
 		role: undefined,
+		ariaLabelledby: undefined,
 	})
 
 	const display = useDisplay()
@@ -63,6 +64,7 @@
 		:id="uniqueId ? `${uniqueId}-container` : undefined"
 		:class="[spacingClass, 'vd-page-container d-flex justify-center']"
 		:role="role"
+		:aria-labelledby="ariaLabelledby"
 	>
 		<VSheet
 			:id="uniqueId ? `${uniqueId}-content` : undefined"

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

@@ -25,29 +25,43 @@ import {
 	<CriteriaSection>
 		<CriteriaCard icon="🔍" title="Structure sémantique">
 			<ul>
-				<li><strong>Id unique</strong> : pour permettre des relations ARIA robustes</li>
-				<li><strong>Rôles ARIA appropriés si besoin</strong> :</li>
-					<ul style={{ listStyleType: 'none', paddingLeft: 0 }}>
-						<li style={{ listStyleType: '"- "' }}><code>role="region"</code> contient une zone importante identifiée par un titre</li>
-						<li style={{ listStyleType: '"- "' }}><code>role="main"</code> représente le contenu principal</li>
-						<li style={{ listStyleType: '"- "' }}><code>role="banner" / role="contentinfo"</code> pour l'en‑tête ou le pied de page du site</li>
-						<li style={{ listStyleType: '"- "' }}><code>role="navigation"</code> pour un conteneur contenant une navigation</li>
-					</ul>
+				<li><strong>Id unique</strong> : la prop <code>uniqueId</code> génère un identifiant sur le conteneur (suffixe <code>-container</code>) et sur le contenu interne (suffixe <code>-content</code>), permettant des relations ARIA robustes</li>
+				<li><strong>Rôles ARIA disponibles via la prop <code>role</code></strong> :</li>
+				<ul style={{ listStyleType: 'none', paddingLeft: 0 }}>
+					<li style={{ listStyleType: '"- "' }}><code>role="region"</code> : contient une zone importante identifiée par un titre</li>
+					<li style={{ listStyleType: '"- "' }}><code>role="main"</code> : représente le contenu principal</li>
+					<li style={{ listStyleType: '"- "' }}><code>role="banner"</code> : pour l'en-tête du site</li>
+					<li style={{ listStyleType: '"- "' }}><code>role="contentinfo"</code> : pour le pied de page du site</li>
+					<li style={{ listStyleType: '"- "' }}><code>role="navigation"</code> : pour un conteneur de navigation</li>
+				</ul>
+			</ul>
+		</CriteriaCard>
+
+		<CriteriaCard icon="🏷️" title="Liaison ARIA">
+			<ul>
+				<li><strong>Prop <code>ariaLabelledby</code></strong> : permet de lier le conteneur à un titre via son <code>id</code>, renforçant la compréhension par les lecteurs d'écran — particulièrement utile avec <code>role="region"</code></li>
+				<li><strong>Avec <code>StatusPage</code></strong> : la liaison est gérée automatiquement via les props <code>role</code> et <code>uniqueId</code> de <code>StatusPage</code></li>
 			</ul>
 		</CriteriaCard>
 	</CriteriaSection>
 
+	<DemoSection title="Avec rôle et liaison ARIA" componentName="PageContainer">
+		<Story of={PageContainerStories.WithAriaRole} />
+	</DemoSection>
+
 	<BestPracticesSection>
 		<ul>
-			<li>Toujours privilégier les balises HTML sémantiques natales avant ARIA :</li>
-
-<li><code>header</code></li>
-<li><code>nav</code></li>
-<li><code>main</code></li>
-<li><code>footer</code></li>
-<li><code>section (avec un titre)</code></li>
-<li><code>aside</code></li>
-<li><code>article</code></li>
+			<li>Toujours privilégier les balises HTML sémantiques natives avant ARIA :</li>
+			<li><code>header</code></li>
+			<li><code>nav</code></li>
+			<li><code>main</code></li>
+			<li><code>footer</code></li>
+			<li><code>section (avec un titre)</code></li>
+			<li><code>aside</code></li>
+			<li><code>article</code></li>
+			<li>Toujours associer <code>role="region"</code> à un <code>aria-labelledby</code> pointant vers un titre visible</li>
+			<li>Ne pas utiliser <code>role="main"</code> plus d'une fois par page</li>
+			<li>Fournir un <code>uniqueId</code> explicite et descriptif pour garantir l'unicité des identifiants générés</li>
 		</ul>
 	</BestPracticesSection>
 </AccessibilityGuideLayout>

package/src/components/PaginatedTable/PaginatedTable.mdx

@@ -1,15 +1,15 @@
-import {Meta, Canvas, Controls, Source} from '@storybook/blocks';
+import {Meta, Canvas, Controls, Source, Story} from '@storybook/blocks';
 import * as PaginatedTableStories from "./PaginatedTable.stories.ts";
 
 <Meta of={PaginatedTableStories}/>
 
+<Story of={PaginatedTableStories.DeprecationNotice} />
+
 <div className="header">
   <h1>PaginatedTable</h1>
   <p>Le composant `PaginatedTable` est utilisé pour afficher une `VDataTable` de Vuetify avec une pagination persistante.</p>
 </div>
 
-> **⚠️ Attention** : Ce composant est déprécié au profit des composants [SyTable](?path=/docs/composants-tableaux-sytable--docs) et [SyServerTable](?path=/docs/composants-tableaux-syservertable--docs).
-
 <Canvas story={{height: '550px'}} of={PaginatedTableStories.Default}/>
 
 # API

package/src/components/PaginatedTable/PaginatedTable.stories.ts

@@ -4,6 +4,7 @@ import { StateEnum } from './constants/StateEnum'
 import type { DataOptions } from './types'
 import { ref } from 'vue'
 import type { VDataTable } from 'vuetify/components'
+import { createDeprecationNotice } from '@/stories/DeprecationNotice/DeprecationNotice'
 
 interface User {
 	[key: string]: string
@@ -22,7 +23,7 @@ const meta = {
 	component: PaginatedTable,
 	decorators: [
 		() => ({
-			template: '<div style="padding: 20px;"><story/></div>',
+			template: '<div><story/></div>',
 		}),
 	],
 	parameters: {
@@ -767,3 +768,10 @@ export const ManyTables: Story = {
 		}
 	},
 }
+
+export const DeprecationNotice = {
+	...createDeprecationNotice([
+		{ label: 'SyTable', url: '?path=/docs/composants-tableaux-sytable--docs' },
+	]),
+	tags: ['!dev'],
+}

package/src/components/PeriodField/PeriodField.vue

@@ -32,6 +32,7 @@
 		bgColor?: string
 		density?: 'default' | 'comfortable' | 'compact'
 		hideDetails?: boolean | 'auto'
+		headingLevel?: 1 | 2 | 3 | 4 | 5 | 6
 	}>(), {
 		modelValue: () => ({ from: null, to: null }),
 		placeholderFrom: 'Début',
@@ -54,6 +55,7 @@
 		bgColor: 'white',
 		density: 'default',
 		hideDetails: false,
+		headingLevel: 2,
 	})
 
 	const emit = defineEmits(['update:modelValue'])
@@ -345,6 +347,7 @@
 				:error-message="fromDateValidation.hasError"
 				:format="props.format"
 				:disabled="props.disabled"
+				:heading-level="props.headingLevel"
 				:is-outlined="props.isOutlined"
 				:no-calendar="props.noCalendar"
 				:no-icon="props.noIcon"
@@ -371,6 +374,7 @@
 				:display-append-icon="props.displayAppendIcon"
 				:display-icon="props.displayIcon"
 				:error-message="toDateValidation.hasError"
+				:heading-level="props.headingLevel"
 				:format="props.format"
 				:disabled="props.disabled"
 				:is-outlined="props.isOutlined"

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

@@ -21,9 +21,18 @@ describe('PeriodField – accessibility (axe)', () => {
 			attachTo: document.body,
 		})
 
+		// TODO : https://github.com/assurance-maladie-digital/design-system-v3/issues/1960
+		// 'aria-valid-attr-value' is ignored because Vuetify sets aria-owns on the
+		// DatePicker input referencing the VMenu id, but in JSDOM the menu is
+		// rendered via <Teleport> and not present in the scanned subtree.
+		const ignoreRules = ['region', 'aria-valid-attr-value']
+
 		const results = await axe(wrapper.element as HTMLElement)
+		if (results.violations.filter(violation => !ignoreRules.includes(violation.id)).length > 0) {
+			console.log(JSON.stringify(results.violations, null, 2))
+		}
 		assertNoA11yViolations(results, 'PeriodField – valid period', {
-			ignoreRules: ['region'],
+			ignoreRules: ignoreRules,
 		})
 
 		wrapper.unmount()

package/src/components/PhoneField/PhoneField.stories.ts

@@ -1,6 +1,6 @@
 import type { StoryObj, Meta } from '@storybook/vue3'
 import PhoneField from './PhoneField.vue'
-import { ref } from 'vue'
+import { ref, watch } from 'vue'
 import { indicatifs } from './indicatifs'
 
 const meta = {
@@ -44,11 +44,11 @@ const meta = {
 		},
 		'autocompleteCountryCode': {
 			control: 'text',
-			description: 'Valeur de l\'attribut autocomplete pour le champ indicatif pays (par défaut: "tel-country-code")',
+			description: 'Valeur de l\'attribut `autocomplete` pour le champ indicatif pays. Utiliser `tel-country-code` (défaut) lorsque le numéro est séparé en deux champs (indicatif + numéro national), conformément à [WHATWG](https://html.spec.whatwg.org/#autofill-field-tel-country-code) et [WCAG 1.3.5](https://www.w3.org/WAI/WCAG21/quickref/#identify-input-purpose).',
 		},
 		'autocompletePhone': {
 			control: 'text',
-			description: 'Valeur de l\'attribut autocomplete pour le champ numéro de téléphone (par défaut: "tel-national")',
+			description: 'Valeur de l\'attribut `autocomplete` pour le champ numéro de téléphone. Valeurs recommandées selon le scénario :\n\n- `tel-national` (défaut) — numéro sans indicatif, lorsque le composant est en mode deux champs (`withCountryCode`).\n- `tel` — numéro complet avec indicatif intégré, pour un champ unique sans sélecteur de pays.\n- `tel-extension` — poste ou extension téléphonique.',
 		},
 		'isValidatedOnBlur': { control: 'boolean' },
 		'displayAsterisk': { control: 'boolean' },
@@ -65,7 +65,7 @@ type Story = StoryObj<typeof meta>
 export const Default: Story = {
 	parameters: {
 		a11y: {
-			disable: true,
+			disable: false,
 		},
 		sourceCode: [
 			{
@@ -106,7 +106,7 @@ export const Default: Story = {
 	},
 	args: {
 		modelValue: '',
-		required: true,
+		required: false,
 		outlined: true,
 		outlinedIndicatif: true,
 		withCountryCode: true,
@@ -140,7 +140,7 @@ export const Default: Story = {
 export const Required: Story = {
 	parameters: {
 		a11y: {
-			disable: true,
+			disable: false,
 		},
 		sourceCode: [
 			{
@@ -223,7 +223,7 @@ export const RequiredWithAsterisk: Story = {
 	},
 	parameters: {
 		a11y: {
-			disable: true,
+			disable: false,
 		},
 		docs: {
 			description: {
@@ -276,7 +276,7 @@ const phoneNumber = ref('')
 export const HelpText: Story = {
 	parameters: {
 		a11y: {
-			disable: true,
+			disable: false,
 		},
 		sourceCode: [
 			{
@@ -399,7 +399,21 @@ const selectedDialCode = ref('')
 export const Autocomplete: Story = {
 	parameters: {
 		a11y: {
-			disable: true,
+			disable: false,
+		},
+		docs: {
+			description: {
+				story: `
+Les attributs \`autocomplete\` permettent aux navigateurs et aux outils d'assistance de remplir automatiquement les champs avec les bonnes informations utilisateur, conformément à [WCAG 1.3.5 — Identifier la finalité de la saisie](https://www.w3.org/WAI/WCAG21/quickref/#identify-input-purpose).
+
+| Scénario | Prop à utiliser | Valeur recommandée | Source |
+|---|---|---|---|
+| **Code pays** (ex : +33) — champ séparé | \`autocompleteCountryCode\` | \`tel-country-code\` | [WHATWG](https://html.spec.whatwg.org/#autofill-field-tel-country-code) |
+| **Numéro sans indicatif** (ex : 06 12 34 56 78) — avec \`withCountryCode\` | \`autocompletePhone\` | \`tel-national\` | [WHATWG](https://html.spec.whatwg.org/#autofill-field-tel-national) |
+| **Numéro complet** (indicatif intégré) — sans \`withCountryCode\` | \`autocompletePhone\` | \`tel\` | [WHATWG](https://html.spec.whatwg.org/#autofill-field-tel) |
+| **Extension / poste** | \`autocompletePhone\` | \`tel-extension\` | [WHATWG](https://html.spec.whatwg.org/#autofill-field-tel-extension) |
+				`,
+			},
 		},
 		sourceCode: [
 			{
@@ -472,7 +486,7 @@ const phoneValue3 = ref('')
 		],
 	},
 	args: {
-		required: true,
+		required: false,
 		withCountryCode: true,
 		autocompleteCountryCode: 'tel-country-code',
 		autocompletePhone: 'tel-national',
@@ -554,7 +568,7 @@ const phoneValue3 = ref('')
 export const CustomIndicatifs: Story = {
 	parameters: {
 		a11y: {
-			disable: true,
+			disable: false,
 		},
 		sourceCode: [
 			{
@@ -638,7 +652,7 @@ export const CustomIndicatifs: Story = {
 export const NotValidatedOnBlur: Story = {
 	parameters: {
 		a11y: {
-			disable: true,
+			disable: false,
 		},
 		sourceCode: [
 			{
@@ -712,7 +726,7 @@ export const NotValidatedOnBlur: Story = {
 export const DisplayFormatCode: Story = {
 	parameters: {
 		a11y: {
-			disable: true,
+			disable: false,
 		},
 		sourceCode: [
 			{
@@ -761,7 +775,7 @@ export const DisplayFormatCode: Story = {
 		displayFormat: 'code',
 		customIndicatifs: [],
 		useCustomIndicatifsOnly: false,
-		isValidatedOnBlur: false,
+		isValidatedOnBlur: true,
 		readonly: false,
 		disabled: false,
 		bgColor: 'white',
@@ -786,7 +800,7 @@ export const DisplayFormatCode: Story = {
 export const DisplayFormatCodeAbbreviation: Story = {
 	parameters: {
 		a11y: {
-			disable: true,
+			disable: false,
 		},
 		sourceCode: [
 			{
@@ -835,7 +849,7 @@ export const DisplayFormatCodeAbbreviation: Story = {
 		displayFormat: 'code-abbreviation',
 		customIndicatifs: [],
 		useCustomIndicatifsOnly: false,
-		isValidatedOnBlur: false,
+		isValidatedOnBlur: true,
 		readonly: false,
 		disabled: false,
 		bgColor: 'white',
@@ -860,7 +874,7 @@ export const DisplayFormatCodeAbbreviation: Story = {
 export const DisplayFormatCodeCountry: Story = {
 	parameters: {
 		a11y: {
-			disable: true,
+			disable: false,
 		},
 		sourceCode: [
 			{
@@ -909,7 +923,7 @@ export const DisplayFormatCodeCountry: Story = {
 		displayFormat: 'code-country',
 		customIndicatifs: [],
 		useCustomIndicatifsOnly: false,
-		isValidatedOnBlur: false,
+		isValidatedOnBlur: true,
 		readonly: false,
 		disabled: false,
 		bgColor: 'white',
@@ -934,7 +948,7 @@ export const DisplayFormatCodeCountry: Story = {
 export const DisplayFormatCountry: Story = {
 	parameters: {
 		a11y: {
-			disable: true,
+			disable: false,
 		},
 		sourceCode: [
 			{
@@ -983,7 +997,7 @@ export const DisplayFormatCountry: Story = {
 		displayFormat: 'country',
 		customIndicatifs: [],
 		useCustomIndicatifsOnly: false,
-		isValidatedOnBlur: false,
+		isValidatedOnBlur: true,
 		readonly: false,
 		disabled: false,
 		bgColor: 'white',
@@ -1008,7 +1022,7 @@ export const DisplayFormatCountry: Story = {
 export const DisplayFormatAbbreviation: Story = {
 	parameters: {
 		a11y: {
-			disable: true,
+			disable: false,
 		},
 		sourceCode: [
 			{
@@ -1057,7 +1071,7 @@ export const DisplayFormatAbbreviation: Story = {
 		displayFormat: 'abbreviation',
 		customIndicatifs: [],
 		useCustomIndicatifsOnly: false,
-		isValidatedOnBlur: false,
+		isValidatedOnBlur: true,
 		readonly: false,
 		disabled: false,
 		bgColor: 'white',
@@ -1082,7 +1096,7 @@ export const DisplayFormatAbbreviation: Story = {
 export const DefaultDialCode: Story = {
 	parameters: {
 		a11y: {
-			disable: true,
+			disable: false,
 		},
 		sourceCode: [
 			{
@@ -1136,7 +1150,7 @@ export const DefaultDialCode: Story = {
 	args: {
 		modelValue: '',
 		dialCodeModel: { code: '+3433', country: 'Exemple', abbreviation: 'EX', phoneLength: 10, mask: '## ## ## ## ##' },
-		required: true,
+		required: false,
 		outlined: true,
 		outlinedIndicatif: true,
 		withCountryCode: true,
@@ -1175,7 +1189,7 @@ export const DefaultDialCode: Story = {
 export const DefaultDialCodeStandard: Story = {
 	parameters: {
 		a11y: {
-			disable: true,
+			disable: false,
 		},
 		sourceCode: [
 			{
@@ -1253,7 +1267,7 @@ export const DefaultDialCodeStandard: Story = {
 export const DisplayModels: Story = {
 	parameters: {
 		a11y: {
-			disable: true,
+			disable: false,
 		},
 		sourceCode: [
 			{
@@ -1308,25 +1322,47 @@ export const DisplayModels: Story = {
 		displayFormat: 'code-country',
 		customIndicatifs: [],
 		useCustomIndicatifsOnly: false,
-		isValidatedOnBlur: false,
+		isValidatedOnBlur: true,
 		readonly: false,
 		bgColor: 'white',
 	},
 	render: args => ({
 		components: { PhoneField },
 		setup() {
-			return { args }
+			const modelValue = ref(args.modelValue)
+			const selectedDialCode = ref(args.dialCodeModel)
+
+			// Sync ref -> args (pour afficher les modèles dans la story)
+			watch(modelValue, (val) => {
+				args.modelValue = val
+			})
+			watch(selectedDialCode, (val) => {
+				args.dialCodeModel = val
+			})
+			// Sync args -> ref (quand on change les controls Storybook)
+			watch(() => args.modelValue, (val) => {
+				modelValue.value = val
+			})
+			watch(() => args.dialCodeModel, (val) => {
+				selectedDialCode.value = val
+			})
+
+			return {
+				args,
+				modelValue,
+				selectedDialCode,
+			}
 		},
 		template: `
     <div class="pa-4">
       <div class="pa-4">
-        Indicatif: {{ args.dialCodeModel }}<br/>Numéro: {{ args.modelValue }}
+        Indicatif: {{ selectedDialCode }}<br/>Numéro: {{ modelValue }}
       </div>
 
       <PhoneField
         v-bind="args"
-        @update:modelValue="args.modelValue = $event"
-        @update:selectedDialCode="args.dialCodeModel = $event"
+        v-model="modelValue"
+        v-model:selectedDialCode="selectedDialCode"
       />
     </div>
   `,
@@ -1340,7 +1376,7 @@ export const DisplayModels: Story = {
 export const DisabledErrorHandling: Story = {
 	parameters: {
 		a11y: {
-			disable: true,
+			disable: false,
 		},
 		sourceCode: [
 			{
@@ -1411,6 +1447,7 @@ export const DisabledErrorHandling: Story = {
 						<p>Ce champ est requis et affichera une erreur s'il est vide.</p>
 						<PhoneField
 							v-bind="args"
+							:disable-error-handling="false"
 						/>
 					</div>
 				</div>
@@ -1422,7 +1459,7 @@ export const DisabledErrorHandling: Story = {
 export const FormValidation: Story = {
 	parameters: {
 		a11y: {
-			disable: true,
+			disable: false,
 		},
 		sourceCode: [
 			{
@@ -1438,7 +1475,7 @@ export const FormValidation: Story = {
 							:outlinedIndicatif="true"
 							:withCountryCode="true"
 							:country-code-required="true"
-							:isValidatedOnBlur="false"
+							:isValidatedOnBlur="true"
 							:readonly="readonly"
 							:disabled="disabled"
 						/>
@@ -1493,7 +1530,7 @@ export const FormValidation: Story = {
 		displayFormat: 'code',
 		customIndicatifs: [],
 		useCustomIndicatifsOnly: false,
-		isValidatedOnBlur: false,
+		isValidatedOnBlur: true,
 		bgColor: 'white',
 		readonly: false,
 		disabled: false,
@@ -1527,6 +1564,7 @@ export const FormValidation: Story = {
 				<div class="pa-4">
 					<form @submit.prevent="submitForm" class="d-flex flex-column">
 						<PhoneField
+							ref="phoneFieldRef"
 							v-bind="args"
 						/>
 						<v-btn type="submit" color="primary" class="mt-4" style="width: 200px;">Soumettre le formulaire</v-btn>