@cnamts/synapse 1.0.21 → 1.0.22

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
@@ -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
@@ -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')"
 				>

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

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'