@cnamts/synapse 1.0.20 → 1.0.22

package/src/components/UploadWorkflow/tests/__snapshots__/UploadWorkflow.spec.ts.snap

@@ -10,6 +10,7 @@ exports[`UploadWorkflow > render the upload list 1`] = `
 >
   <h4 class="
     mb-2
+    sy-heading
     text-h6
   ">
     Documents à nous transmettre
@@ -57,11 +58,20 @@ exports[`UploadWorkflow > render the upload list 1`] = `
               text-base
             "></div>
             <!-- v-if -->
-            <!-- v-if -->
+            <div
+              class="
+                file-item__error-message
+                text-error
+              "
+              role="status"
+            >
+              <!-- v-if -->
+            </div>
           </div>
         </div>
         <div class="file-item__actions">
           <button
+            aria-label="Importer le fichier Carte d'identité"
             class="
               file-item__action
               file-item__action-upload
@@ -164,11 +174,20 @@ exports[`UploadWorkflow > render the upload list 1`] = `
               text-base
             "></div>
             <!-- v-if -->
-            <!-- v-if -->
+            <div
+              class="
+                file-item__error-message
+                text-error
+              "
+              role="status"
+            >
+              <!-- v-if -->
+            </div>
           </div>
         </div>
         <div class="file-item__actions">
           <button
+            aria-label="Importer le fichier Facture de soin"
             class="
               file-item__action
               file-item__action-upload
@@ -238,124 +257,132 @@ exports[`UploadWorkflow > render the upload list 1`] = `
     css="true"
     persisted="false"
   >
-    <label
-      class="
-        d-block
-        mt-6
-        pa-4
-        sy-file-upload
-      "
-      for="file-upload-v-2"
-      style="width: 100%;"
-    >
+    <div class="
+      mt-6
+      sy-file-upload-wrapper
+    ">
       <input
         accept=".pdf, .jpg, .jpeg, .png"
+        aria-hidden="true"
         class="sy-file-upload-input"
         id="file-upload-v-2"
+        tabindex="-1"
         type="file"
       />
-      <span class="sy-file-upload-placeholder">
-        <i
-          aria-hidden="true"
-          class="
-            1
-            1
-            1
-            11
-            11.1
-            11.2
-            12
-            12.5
-            12.63
-            12.85Z
-            13.78
-            13L12
-            13L9.4
-            14.4L11
-            14.4L16
-            14.58
-            14.93
-            15.5
-            16.85
-            16.96
-            17.38
-            18.43
-            18.5
-            18.69
-            19
-            19
-            2.17
-            2.61
-            20
-            20
-            20.38
-            20.73
-            20H13V12.85L14.6
-            20H6.5Q4.22
-            21.69
-            21.86
-            23
-            23
-            23
-            3.35
-            4
-            4
-            4
-            5.25
-            5.43
-            5.88
-            6.04
-            6.85
-            7.75
-            8.07
-            9.15
-            9.57
-            9.63
-            9L8
-            M11
-            mdi
-            notranslate
-            text-primary
-            v-icon
-            v-theme--light
-          "
-          style="
-            font-size: 40px;
-            height: 40px;
-            width: 40px;
-          "
-        ></i>
-        <span class="
-          font-weight-medium
-          mt-1
-          text-black
-        ">
-          <span>
-            Déposer votre fichier ici
+      <div
+        class="
+          d-block
+          mt-6
+          pa-4
+          sy-file-upload
+        "
+        role="button"
+        style="width: 100%;"
+        tabindex="0"
+        title="Téléverser un fichier"
+      >
+        <span class="sy-file-upload-placeholder">
+          <i
+            aria-hidden="true"
+            class="
+              1
+              1
+              1
+              11
+              11.1
+              11.2
+              12
+              12.5
+              12.63
+              12.85Z
+              13.78
+              13L12
+              13L9.4
+              14.4L11
+              14.4L16
+              14.58
+              14.93
+              15.5
+              16.85
+              16.96
+              17.38
+              18.43
+              18.5
+              18.69
+              19
+              19
+              2.17
+              2.61
+              20
+              20
+              20.38
+              20.73
+              20H13V12.85L14.6
+              20H6.5Q4.22
+              21.69
+              21.86
+              23
+              23
+              23
+              3.35
+              4
+              4
+              4
+              5.25
+              5.43
+              5.88
+              6.04
+              6.85
+              7.75
+              8.07
+              9.15
+              9.57
+              9.63
+              9L8
+              M11
+              mdi
+              notranslate
+              text-primary
+              v-icon
+              v-theme--light
+            "
+            style="
+              font-size: 40px;
+              height: 40px;
+              width: 40px;
+            "
+          ></i>
+          <span class="
+            font-weight-medium
+            mt-1
+            text-black
+          ">
+            <span>
+              Déposer votre fichier ici
+            </span>
+          </span>
+          <span class="
+            mb-2
+            sy-file-upload-caption
+          ">
+            Ou
+          </span>
+          <span class="
+            bg-primary
+            sy-file-upload-btn
+            text-white
+          ">
+            Choisir un fichier
+          </span>
+          <span class="
+            mt-4
+            sy-file-upload-caption
+          ">
+            Taille max. : 10 Mo. Formats acceptés : pdf, jpg, jpeg, png
           </span>
         </span>
-        <span class="
-          mb-2
-          sy-file-upload-caption
-        ">
-          Ou
-        </span>
-        <span class="
-          bg-primary
-          elevation-2
-          sy-file-upload-btn
-          text-white
-        ">
-          Choisir un fichier
-        </span>
-        <span class="
-          mt-4
-          sy-file-upload-caption
-        ">
-          Taille max. : 10 Mo. Formats acceptés : pdf, jpg, jpeg, png
-        </span>
-      </span>
-    </label>
+      </div>
+    </div>
   </transition-stub>
   <!---->
   <!---->

package/src/components/UploadWorkflow/useFileList.ts

@@ -8,6 +8,10 @@ export default function useFileList(
 ) {
 	const errorSelectedFiles = ref<string[]>([])
 
+	function notifySelectedFilesChanged() {
+		selectedFiles.value = selectedFiles.value.slice()
+	}
+
 	function removeFromErrorList(fileId: string) {
 		const errorIndex = errorSelectedFiles.value.findIndex(item => item === fileId)
 		if (errorIndex !== -1) {
@@ -22,12 +26,14 @@ export default function useFileList(
 	function resetFile(fileItem: FileListItem | SelectedFile) {
 		const itemIndex = selectedFiles.value.findIndex(item => item.id === fileItem.id)
 		selectedFiles.value.splice(itemIndex, 1)
+		notifySelectedFilesChanged()
 	}
 
 	function replaceFile(file: File, item: SelectedFile, state: FileState = 'success') {
 		item.file = file
 		item.fileName = file.name
 		item.state = state
+		notifySelectedFilesChanged()
 	}
 
 	function addOrReplaceFile(file: File, fileId: string, state: FileState = 'success') {
@@ -52,6 +58,7 @@ export default function useFileList(
 				fileName: file.name,
 				file,
 			})
+			notifySelectedFilesChanged()
 			removeFromErrorList(fileId)
 		}
 	}

package/src/components/UserMenuBtn/UserMenuBtn.stories.ts

@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
+import { mdiAccount, mdiCog, mdiShieldAccount } from '@mdi/js'
 import UserMenuBtn from './UserMenuBtn.vue'
 
 const meta = {
@@ -63,7 +64,7 @@ const meta = {
 			description: 'Liste des éléments du menu utilisateur',
 			table: {
 				type: {
-					summary: '{ text: string, value: string, link?: string, to?: RouteLocationRaw }[]',
+					summary: '{ text: string, value: string, link?: string, to?: RouteLocationRaw, icon?: string }[]',
 				},
 			},
 		},
@@ -143,9 +144,6 @@ type Story = StoryObj<typeof meta>
 
 export const Default: Story = {
 	parameters: {
-		a11y: {
-			disable: true,
-		},
 		sourceCode: [
 			{
 				name: 'Template',
@@ -197,11 +195,59 @@ export const Default: Story = {
 		}
 	},
 }
+
+export const WithIcons: Story = {
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `<template>
+ <UserMenuBtn
+  v-model="selected"
+  :menu-items="menuItems"
+/>
+</template>`,
+			},
+			{
+				name: 'Script',
+				code: `<script setup lang="ts">
+ import { ref } from 'vue'
+ import { mdiAccount, mdiCog, mdiShieldAccount } from '@mdi/js'
+ import { UserMenuBtn } from '@cnamts/synapse'
+
+ const selected = ref(null)
+ const menuItems = ref([
+  { text: 'Administration', value: 'Administration', icon: mdiShieldAccount },
+  { text: 'Profil', value: 'Profil', icon: mdiAccount },
+  { text: 'Paramètres', value: 'Paramètres', icon: mdiCog },
+ ])
+</script>`,
+			},
+		],
+	},
+	args: {
+		...Default.args,
+		menuItems: [
+			{ text: 'Administration', value: 'Administration', icon: mdiShieldAccount },
+			{ text: 'Profil', value: 'Profil', icon: mdiAccount },
+			{ text: 'Paramètres', value: 'Paramètres', icon: mdiCog },
+		],
+	},
+	render: (args) => {
+		return {
+			components: { UserMenuBtn },
+			setup() {
+				return { args }
+			},
+			template: `
+<div class="pa-4">
+	<UserMenuBtn v-bind="args"/>
+</div>`,
+		}
+	},
+}
 export const HideLogoutButton: Story = {
 	parameters: {
-		a11y: {
-			disable: true,
-		},
 		sourceCode: [
 			{
 				name: 'Template',
@@ -251,9 +297,6 @@ export const HideLogoutButton: Story = {
 
 export const HideUserIcon: Story = {
 	parameters: {
-		a11y: {
-			disable: true,
-		},
 		sourceCode: [
 			{
 				name: 'Template',
@@ -303,9 +346,6 @@ export const HideUserIcon: Story = {
 
 export const MobileVersion: Story = {
 	parameters: {
-		a11y: {
-			disable: true,
-		},
 		sourceCode: [
 			{
 				name: 'Template',
@@ -355,9 +395,6 @@ export const MobileVersion: Story = {
 
 export const CustomFullName: Story = {
 	parameters: {
-		a11y: {
-			disable: true,
-		},
 		sourceCode: [
 			{
 				name: 'Template',
@@ -407,9 +444,6 @@ export const CustomFullName: Story = {
 
 export const CustomLogoutText: Story = {
 	parameters: {
-		a11y: {
-			disable: true,
-		},
 		sourceCode: [
 			{
 				name: 'Template',
@@ -459,9 +493,6 @@ export const CustomLogoutText: Story = {
 
 export const CustomAdditionalInformation: Story = {
 	parameters: {
-		a11y: {
-			disable: true,
-		},
 		sourceCode: [
 			{
 				name: 'Template',
@@ -511,9 +542,6 @@ export const CustomAdditionalInformation: Story = {
 
 export const WithVuetifyOptions: Story = {
 	parameters: {
-		a11y: {
-			disable: true,
-		},
 		sourceCode: [
 			{
 				name: 'Template',
@@ -575,9 +603,6 @@ export const WithVuetifyOptions: Story = {
 
 export const LogoutEvent: Story = {
 	parameters: {
-		a11y: {
-			disable: true,
-		},
 		sourceCode: [
 			{
 				name: 'Template',
@@ -631,9 +656,6 @@ export const LogoutEvent: Story = {
 
 export const Slot: Story = {
 	parameters: {
-		a11y: {
-			disable: true,
-		},
 		sourceCode: [
 			{
 				name: 'Template',

package/src/components/UserMenuBtn/UserMenuBtn.vue

@@ -8,7 +8,7 @@
 	import { defaultOptions } from './config'
 	import SyIcon from '@/components/Customs/SyIcon/SyIcon.vue'
 
-	type MenuItem = { text: string, value: string, link?: string, to?: RouteLocationRaw }
+	type MenuItem = { text: string, value: string, link?: string, to?: RouteLocationRaw, icon?: string }
 
 	const props = withDefaults(defineProps<CustomizableOptions & {
 		menuItems?: MenuItem[]
@@ -70,6 +70,9 @@
 				<VListItem
 					v-if="!hideLogoutBtn"
 					class="logout"
+					tag="li"
+					role="menuitem"
+					tabindex="0"
 					v-bind="options['logoutListItem']"
 					@click="$emit('logout')"
 				>

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

@@ -1,12 +1,76 @@
-import { Meta, Story } from '@storybook/addon-docs';
-import * as Stories from '../UserMenuBtn.stories.ts';
+import { Meta, Primary } from '@storybook/blocks';
+import * as UserMenuBtnStories from '../UserMenuBtn.stories.ts';
+import AccessibilityIcon from '@/common/imgs/accessibility-svgrepo-com.svg';
 import '@/stories/styles/shared.css';
+import {
+	AccessibilityGuideLayout,
+	CriteriaSection,
+	CriteriaCard,
+	DemoSection,
+	BestPracticesSection,
+	ResourcesSection,
+} from '@/stories/accessibility/AccessibilityGuideLayout.mdx';
 
-<Meta of={Stories} />
+<Meta of={UserMenuBtnStories} />
 
-<div className="header">
-  <h1>Accessibilité</h1>
-  <p>Cette page sera bientôt disponible</p>
-</div>
+<AccessibilityGuideLayout
+	componentName="UserMenuBtn"
+	iconSrc={AccessibilityIcon}
+	apgHref="https://www.w3.org/WAI/ARIA/apg/patterns/menu-button/"
+>
+	<CriteriaSection>
+		<CriteriaCard icon="🔍" title="Structure sémantique">
+			<ul>
+				<li><strong>Rôles ARIA</strong> : <code>role="menu"</code> pour la liste et <code>role="menuitem"</code> pour chaque option (y compris le bouton de déconnexion).</li>
+				<li><strong>Attributs d'association</strong> : <code>aria-labelledby</code> relie le menu au bouton généré, <code>aria-haspopup</code>/<code>aria-expanded</code>/<code>aria-controls</code> sont gérés par <code>VMenu</code>.</li>
+				<li><strong>Étiquette accessible</strong> : un texte masqué (<code>label</code>, par défaut « Menu utilisateur ») assure le nom du bouton, même en mode icône seule.</li>
+				<li><strong>Suivi de l'item actif</strong> : <code>aria-activedescendant</code> pointe vers l'option active via un identifiant slugifié.</li>
+			</ul>
+		</CriteriaCard>
 
-<br />
+		<CriteriaCard icon="⌨️" title="Navigation clavier complète">
+			<ul>
+				<li><strong>Tabulation</strong> : accès au bouton puis parcours des options.</li>
+				<li><strong>Entrée/Espace</strong> : ouverture du menu et activation d'une option.</li>
+				<li><strong>Flèches</strong> : navigation verticale entre les éléments du menu.</li>
+				<li><strong>Échap</strong> : fermeture du menu et restitution du focus sur le bouton.</li>
+			</ul>
+		</CriteriaCard>
+
+		<CriteriaCard icon="🎯" title="Gestion du focus & retours">
+			<ul>
+				<li>Focus placé sur la première option à l'ouverture, puis renvoyé vers le bouton à la fermeture.</li>
+				<li><code>aria-expanded</code> reflète l'état d'ouverture ; <code>aria-current="page"</code> sur l'élément sélectionné.</li>
+				<li>Styles <code>:focus-visible</code> renforcés sur le bouton et les éléments du menu pour une indication claire.</li>
+			</ul>
+		</CriteriaCard>
+
+		<CriteriaCard icon="📱" title="Compatibilité mobile & personnalisation">
+			<ul>
+				<li>Modes <code>isMobileView</code> et <code>iconOnly</code> compactent l'affichage tout en conservant un libellé pour les lecteurs d'écran.</li>
+				<li>Options <code>menu</code> / <code>btn</code> / <code>list</code> personnalisables sans dégrader les attributs ARIA.</li>
+				<li>Le bouton de déconnexion optionnel (<code>hideLogoutBtn</code>) reste exposé comme élément de menu clavier/navigateur.</li>
+			</ul>
+		</CriteriaCard>
+	</CriteriaSection>
+
+	<DemoSection componentName="UserMenuBtn">
+		<Primary />
+	</DemoSection>
+
+	<BestPracticesSection>
+		<ul>
+			<li>Fournir un libellé clair pour <code>label</code> (ex. « Menu utilisateur », « Compte de Marie »), surtout en mode icône seule.</li>
+			<li>Limiter le nombre d'options et placer les actions destructives ou sensibles (ex. déconnexion) en fin de liste.</li>
+			<li>Utiliser des intitulés explicites pour les éléments du menu ; éviter les abréviations ou les seules icônes.</li>
+			<li>Vérifier le focus visible et le contraste des états actifs/sélectionnés, notamment sur fond personnalisé.</li>
+		</ul>
+	</BestPracticesSection>
+
+	<ResourcesSection>
+		<ul>
+			<li><a href="https://www.w3.org/WAI/ARIA/apg/patterns/menu-button/" target="_blank" rel="noopener noreferrer">WAI-ARIA Authoring Practices : Menu button</a></li>
+			<li><a href="https://inclusive-components.design/menus-menu-buttons/" target="_blank" rel="noopener noreferrer">Inclusive Components : Menus &amp; Menu Buttons</a></li>
+		</ul>
+	</ResourcesSection>
+</AccessibilityGuideLayout>

package/src/components/index.ts

@@ -12,6 +12,7 @@ export { default as HeaderMenuBtn } from './HeaderBar/HeaderMenuBtn/HeaderMenuBt
 export { default as HeaderLoading } from './HeaderLoading/HeaderLoading.vue'
 export { default as HeaderToolbar } from './HeaderToolbar/HeaderToolbar.vue'
 export { default as SubHeader } from './SubHeader/SubHeader.vue'
+export { default as SyHeading } from './SyHeading/SyHeading.vue'
 
 // ===========================
 // Layout
@@ -53,6 +54,7 @@ export { default as SySelect } from './Customs/Selects/SySelect/SySelect.vue'
 export { default as SyAutocomplete } from './Customs/Selects/SyAutocomplete/SyAutocomplete.vue'
 // export { default as SyBtnSelect } from './Customs/Selects/SyBtnSelect/SyBtnSelect.vue'
 export { default as SyCheckbox } from './Customs/SyCheckbox/SyCheckbox.vue'
+export { default as SyCheckBoxGroup } from './Customs/SyCheckBoxGroup/SyCheckBoxGroup.vue'
 export { default as SyForm } from './Customs/SyForm/SyForm.vue'
 export { default as SyRadioGroup } from './Customs/SyRadioGroup/SyRadioGroup.vue'
 export { default as SyTextField } from './Customs/SyTextField/SyTextField.vue'
@@ -119,6 +121,8 @@ export { default as SyAlert } from './SyAlert/SyAlert.vue'
 export { default as ErrorPage } from './ErrorPage/ErrorPage.vue'
 export { default as MaintenancePage } from './MaintenancePage/MaintenancePage.vue'
 export { default as NotFoundPage } from './NotFoundPage/NotFoundPage.vue'
+export { default as StatusPage } from './StatusPage/StatusPage.vue'
+export { default as DeclarationAccessibilityPage } from './DeclarationAccessibilityPage/DeclarationAccessibilityPage.vue'
 
 // ===========================
 // Amelipro

package/src/components/types.ts

@@ -8,3 +8,7 @@ export type NavigationProps =
 	| { href: string, to?: never }
 	| { to: RouteLocationRaw, href?: never }
 	| { href?: never, to?: never }
+
+// Type pour les rôles ARIA utilisés dans les composants
+export type AriaRole = 'main' | 'region' | 'navigation' | 'contentinfo' | 'banner'
+export type PageAriaRole = 'main' | 'region'

package/src/composables/date/tests/useDateInitialization.spec.ts

@@ -1,4 +1,4 @@
-import { describe, it, expect } from 'vitest'
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
 import { initializeSelectedDates, type DateInput } from '../useDateInitialization'
 
 describe('useDateInitialization', () => {
@@ -76,6 +76,27 @@ describe('useDateInitialization', () => {
 			expect((result2 as Date).getDate()).toBe(15)
 		})
 
+		describe('timezone regression', () => {
+			let tzOffsetSpy: ReturnType<typeof vi.spyOn> | null = null
+
+			beforeEach(() => {
+				tzOffsetSpy = vi.spyOn(Date.prototype, 'getTimezoneOffset').mockReturnValue(240)
+			})
+
+			afterEach(() => {
+				tzOffsetSpy?.mockRestore()
+				tzOffsetSpy = null
+			})
+
+			it('does not shift day when parsing YYYY-MM-DD in a negative timezone (regression)', () => {
+				const result = initializeSelectedDates('2022-10-18', 'DD/MM/YYYY', 'YYYY-MM-DD')
+				expect(result).toBeInstanceOf(Date)
+				expect((result as Date).getFullYear()).toBe(2022)
+				expect((result as Date).getMonth()).toBe(9)
+				expect((result as Date).getDate()).toBe(18)
+			})
+		})
+
 		it('returns null for object input', () => {
 			const result = initializeSelectedDates({}, 'DD/MM/YYYY')
 			expect(result).toBeNull()