@cnamts/synapse 1.0.21 → 1.0.23

package/src/components/UploadWorkflow/accessibilite/UploadWorkflow.a11y.spec.ts

@@ -0,0 +1,110 @@
+// @vitest-environment jsdom
+
+import { describe, it } from 'vitest'
+import { mount } from '@vue/test-utils'
+import { axe } from 'vitest-axe'
+import { assertNoA11yViolations } from '@tests/unit/accessibility/axeUtils'
+import UploadWorkflow from '@/components/UploadWorkflow/UploadWorkflow.vue'
+
+// Scénario d’accessibilité : zone de dépôt de fichier simple, sans fichier sélectionné,
+// avec les textes d’aide par défaut.
+
+describe('UploadWorkflow – accessibility (axe)', () => {
+	it('has no obvious axe violations', async () => {
+		const wrapper = mount(UploadWorkflow, {
+			attachTo: document.body,
+			props: {
+				uploadList: [
+					{
+						id: '1',
+						title: 'Carte d\'identité',
+					},
+					{
+						id: '2',
+						title: 'Facture de soin',
+						optional: true,
+					},
+					{
+						id: '3',
+						title: 'Relevé d\'identité bancaire',
+						optional: true,
+					},
+				],
+			},
+		})
+
+		const results = await axe(wrapper.element as HTMLElement)
+		assertNoA11yViolations(results, 'UploadWorflow', {
+			ignoreRules: ['region'],
+		})
+	})
+
+	it('has no obvious axe violations in the modal of file selection', async () => {
+		const wrapper = mount(UploadWorkflow, {
+			attachTo: document.body,
+			props: {
+				uploadList: [
+					{
+						id: 'ID',
+						title: 'Carte d\'identité',
+					},
+					{
+						id: 'bill',
+						title: 'Facture de soin',
+					},
+				],
+			},
+		})
+
+		const file: File = new File([''], 'uploadInField.pdf', {
+			type: 'application/pdf',
+		})
+
+		await wrapper.find('input').trigger('drop', {
+			dataTransfer: {
+				files: [file],
+			},
+		})
+
+		const results = await axe(document.body)
+		assertNoA11yViolations(results, 'UploadWorkflow - file selection modal', {
+			ignoreRules: ['region'],
+		})
+	})
+
+	it('has no obvious axe violations in the modal of file preview', async () => {
+		const wrapper = mount(UploadWorkflow, {
+			attachTo: document.body,
+			props: {
+				uploadList: [
+					{
+						id: 'ID',
+						title: 'Carte d\'identité',
+						showPreviewBtn: true,
+					},
+					{
+						id: 'bill',
+						title: 'Facture de soin',
+					},
+				],
+				modelValue: [
+					{
+						fileName: 'file1.pdf',
+						file: new File([''], 'file1.pdf', {
+							type: 'application/pdf',
+						}),
+						id: 'ID',
+						title: 'Carte d\'identité',
+					},
+				],
+			},
+		})
+
+		await wrapper.find('.file-item button').trigger('click')
+
+		const results = await axe(document.body)
+		assertNoA11yViolations(results, 'UploadWorkflow - file preview modal', {
+			ignoreRules: ['region'],
+		})
+	})
+})

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

@@ -6,7 +6,7 @@ import UploadWorkflow from '../UploadWorkflow.vue'
 import { locales as fileListLocales } from '@/components/FileList/UploadItem/locales'
 import { locales as FileUploadLocales } from '@/components/FileUpload/locales'
 import { afterEach } from 'node:test'
-import { VSelect } from 'vuetify/components'
+import { SySelect } from '@/components'
 
 describe('UploadWorkflow', () => {
 	afterEach(() => {
@@ -35,24 +35,6 @@ describe('UploadWorkflow', () => {
 		expect(wrapper.find('.sy-file-upload').isVisible()).toBeTruthy()
 	})
 
-	it('renders default title with role heading and configured aria-level', () => {
-		const wrapper = mount(UploadWorkflow, {
-			props: {
-				uploadList: [
-					{
-						id: 'ID',
-						title: 'Carte d\'identité',
-					},
-				],
-				headingLevel: 2,
-			},
-		})
-
-		const title = wrapper.find('[role="heading"]')
-		expect(title.exists()).toBe(true)
-		expect(title.attributes('aria-level')).toBe('2')
-	})
-
 	it('shows the file in the list when set with the list button', async () => {
 		const wrapper = mount(UploadWorkflow, {
 			props: {
@@ -75,7 +57,7 @@ describe('UploadWorkflow', () => {
 			type: 'application/pdf',
 		})
 
-		await wrapper.find('input').trigger('drop', {
+		await wrapper.find('.sy-file-upload').trigger('drop', {
 			dataTransfer: {
 				files: [file],
 			},
@@ -155,14 +137,14 @@ describe('UploadWorkflow', () => {
 			type: 'application/pdf',
 		})
 
-		await wrapper.find('input').trigger('drop', {
+		await wrapper.find('.sy-file-upload').trigger('drop', {
 			dataTransfer: {
 				files: [file],
 			},
 		})
 
-		wrapper.find('.v-select input').setValue('bill')
-		wrapper.findComponent(VSelect).vm.$emit('update:modelValue', 'bill')
+		wrapper.find('.sy-select input').setValue('bill')
+		wrapper.findComponent(SySelect).vm.$emit('update:modelValue', 'bill')
 
 		await wrapper.find('[data-test-id="confirm-btn"]').trigger('click')
 
@@ -204,7 +186,7 @@ describe('UploadWorkflow', () => {
 			type: 'application/pdf',
 		})
 
-		await wrapper.find('input').trigger('drop', {
+		await wrapper.find('.sy-file-upload').trigger('drop', {
 			dataTransfer: {
 				files: [file],
 			},
@@ -248,7 +230,7 @@ describe('UploadWorkflow', () => {
 
 		await wrapper.find('.file-item button').trigger('click')
 
-		await wrapper.find('input').trigger('drop', {
+		await wrapper.find('.sy-file-upload').trigger('drop', {
 			dataTransfer: {
 				files: [image],
 			},

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

@@ -8,16 +8,13 @@ exports[`UploadWorkflow > render the upload list 1`] = `
   "
   style="width: 100%;"
 >
-  <div
-    aria-level="4"
-    class="
-      mb-2
-      text-h6
-    "
-    role="heading"
-  >
+  <h4 class="
+    mb-2
+    sy-heading
+    text-h6
+  ">
     Documents à nous transmettre
-  </div>
+  </h4>
   <ul
     class="upload-list"
     style="width: 100%;"
@@ -61,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
@@ -117,7 +123,7 @@ exports[`UploadWorkflow > render the upload list 1`] = `
               data-no-activator=""
             >
               <span>
-                Importer
+                Importer le fichier
               </span>
             </span>
             <!---->
@@ -168,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
@@ -224,7 +239,7 @@ exports[`UploadWorkflow > render the upload list 1`] = `
               data-no-activator=""
             >
               <span>
-                Importer
+                Importer le fichier
               </span>
             </span>
             <!---->
@@ -242,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/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')"
 				>