@cnamts/synapse 1.0.5 → 1.0.7

package/src/components/DialogBox/Accessibilite.stories.ts

@@ -182,6 +182,10 @@ export const Legende: StoryObj = {
 				  </div>
 				</div>
 			  </div>
+			  <div class="mt-4">
+				  <p>Rapport d’audit manuel : <a href="/audits/DialogBox.xlsx" style="color:#0C41BD;">Voir le rapport</a></p>
+				  <p style="color: grey; font-size: 14px">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>
             `,
 		}
 	},

package/src/components/DialogBox/DialogBox.stories.ts

@@ -2,6 +2,7 @@ import { type Meta, type StoryObj } from '@storybook/vue3'
 import { VBtn } from 'vuetify/components'
 import DialogBox from './DialogBox.vue'
 import { fn } from '@storybook/test'
+import { computed } from 'vue'
 
 const meta: Meta<typeof DialogBox> = {
 	title: 'Composants/Feedback/DialogBox',
@@ -100,6 +101,18 @@ const meta: Meta<typeof DialogBox> = {
 				},
 			},
 		},
+		'autofocusValidateBtn': {
+			control: 'boolean',
+			description: 'Focus automatique sur le bouton de validation à l\'ouverture',
+			table: {
+				type: {
+					summary: 'boolean',
+				},
+				defaultValue: {
+					summary: 'false',
+				},
+			},
+		},
 		'vuetifyOptions': {
 			control: 'object',
 			description: 'Personnalisation des composants Vuetify internes',
@@ -189,7 +202,12 @@ export const Default: Story = {
 		return {
 			components: { DialogBox, VBtn },
 			setup() {
-				return { args }
+				const rest = computed(() => {
+					// eslint-disable-next-line @typescript-eslint/no-unused-vars
+					const { default: _, ...rest } = args
+					return rest
+				})
+				return { args, rest }
 			},
 			template: `
 				<div class="pa-4">
@@ -198,7 +216,7 @@ export const Default: Story = {
 						color="primary"
 					>Toggle DialogBox</VBtn>
 					<DialogBox
-						v-bind="args"
+						v-bind="rest"
 						@confirm="args.modelValue = false"
 						@cancel="args.modelValue = false"
 						@update:modelValue="args.modelValue = $event"
@@ -560,10 +578,7 @@ export const TitleSlot: Story = {
 						@cancel="args.modelValue = false"
 					>
 						<template #title>
-							<VBtn
-								color="primary"
-								@click="args.modelValue = false"
-							>Title slot</VBtn>
+							Title slot
 						</template>
 						{{ args.default }}
 					</DialogBox>
@@ -585,10 +600,7 @@ export const TitleSlot: Story = {
 						v-model="dialogOpen"
 					>
 						<template #title>
-							<VBtn 
-								color="primary"
-								@click="dialogOpen = false"
-							>Title slot</VBtn>
+							Title slot
 						</template>
 						DialogBox content
 					</DialogBox>

package/src/components/DialogBox/DialogBox.vue

@@ -1,10 +1,12 @@
 <script setup lang="ts">
 	import useCustomizableOptions, { type CustomizableOptions } from '@/composables/useCustomizableOptions'
 	import { mdiClose } from '@mdi/js'
-	import { ref } from 'vue'
-	import type { VDialog } from 'vuetify/components'
+	import { ref, useId, watch, nextTick } from 'vue'
+	import type { VBtn, VDialog } from 'vuetify/components'
 	import { config } from './config'
 	import { locales } from './locales'
+	import { useDisplay } from 'vuetify/lib/framework.mjs'
+	import SyIcon from '../Customs/SyIcon/SyIcon.vue'
 
 	const props = withDefaults(defineProps<{
 		title?: string
@@ -13,6 +15,7 @@
 		confirmBtnText?: string
 		hideActions?: boolean
 		persistent?: boolean
+		autofocusValidateBtn?: boolean
 	} & CustomizableOptions>(), {
 		title: undefined,
 		width: '800px',
@@ -20,6 +23,7 @@
 		confirmBtnText: locales.confirmBtn,
 		hideActions: false,
 		persistent: false,
+		autofocusValidateBtn: false,
 	})
 
 	defineEmits(['cancel', 'confirm', 'update:modelValue'])
@@ -33,6 +37,24 @@
 		default: false,
 	})
 
+	const confirmBtn = ref<VBtn | null>(null)
+	// Restor the focus to the last active element when the dialog is closed
+	let activeElement: HTMLElement | null = null
+	watch(dialog, (newValue) => {
+		if (newValue) {
+			activeElement = document.activeElement as HTMLElement
+			if (props.autofocusValidateBtn) {
+				nextTick(() => {
+					confirmBtn.value?.$el.focus()
+				})
+			}
+		}
+		else if (activeElement) {
+			activeElement.focus()
+		}
+	}, { immediate: true })
+
+	const id = `dialog-${useId()}`
 	const dialogContent = ref<VDialog | undefined>(undefined)
 
 	const options = useCustomizableOptions(config, props)
@@ -75,6 +97,9 @@
 			selectableElements[lastElement].focus()
 		}
 	}
+
+	const display = useDisplay()
+
 </script>
 
 <template>
@@ -86,18 +111,19 @@
 		:retain-focus="false"
 		aria-modal="true"
 		class="sy-dialog-box"
+		:aria-labelledby="id"
 		@keydown.tab="handleFocus"
 	>
 		<VCard
 			v-bind="options.card"
-			id="dialogContent"
+			id="dialog-content"
 			ref="dialogContent"
-			:aria-labelledby="props.title ? props.title : 'dialogContent'"
 		>
 			<VCardTitle v-bind="options.cardTitle">
 				<slot name="title">
 					<h2
 						v-if="title"
+						:id="id"
 						class="text-h6 font-weight-bold"
 					>
 						{{ props.title }}
@@ -108,13 +134,16 @@
 
 				<VBtn
 					v-if="!props.persistent"
+					class="sy-dialog-box-close-btn"
 					v-bind="options.closeBtn"
 					:aria-label="locales.closeBtn"
 					@click="dialog = false"
 				>
-					<VIcon v-bind="options.icon">
-						{{ closeIcon }}
-					</VIcon>
+					<SyIcon
+						:icon="closeIcon"
+						:decorative="true"
+						v-bind="options.icon"
+					/>
 				</VBtn>
 			</VCardTitle>
 			<slot />
@@ -127,20 +156,42 @@
 				<VSpacer v-bind="options.actionsSpacer" />
 
 				<slot name="actions">
-					<VBtn
-						v-bind="options.cancelBtn"
-						@click="$emit('cancel')"
-					>
-						{{ props.cancelBtnText }}
-					</VBtn>
-
-					<VBtn
-						v-bind="options.confirmBtn"
-						data-test-id="confirm-btn"
-						@click="$emit('confirm')"
-					>
-						{{ props.confirmBtnText }}
-					</VBtn>
+					<template v-if="display.xs.value">
+						<VBtn
+							v-bind="options.confirmBtn"
+							data-test-id="confirm-btn"
+							@click="$emit('confirm')"
+						>
+							{{ props.confirmBtnText }}
+						</VBtn>
+
+						<VBtn
+							v-bind="options.cancelBtn"
+							@click="$emit('cancel')"
+						>
+							{{ props.cancelBtnText }}
+						</VBtn>
+					</template>
+					<template v-else>
+						<VBtn
+							class="sy-dialog-box-cancel-btn"
+							v-bind="options.cancelBtn"
+							@click="$emit('cancel')"
+						>
+							{{ props.cancelBtnText }}
+						</VBtn>
+
+						<VBtn
+							v-bind="options.confirmBtn"
+							ref="confirmBtn"
+							class="sy-dialog-box-confirm-btn"
+							:class="props.autofocusValidateBtn ? 'sy-dialog-box-confirm-btn--autofocus' : ''"
+							data-test-id="confirm-btn"
+							@click="$emit('confirm')"
+						>
+							{{ props.confirmBtnText }}
+						</VBtn>
+					</template>
 				</slot>
 			</div>
 		</VCard>
@@ -165,9 +216,25 @@ h2 {
 	text-wrap: balance;
 }
 
+.sy-dialog-box-close-btn:focus-visible,
+.sy-dialog-box-cancel-btn:focus-visible,
+.sy-dialog-box-confirm-btn:focus-visible,
+.sy-dialog-box-confirm-btn--autofocus:focus {
+	:deep(.v-btn__overlay) {
+		display: none;
+	}
+
+	&::after {
+		opacity: 1;
+		border: transparent;
+		outline: 2px solid rgb(var(--v-theme-primary));
+		outline-offset: 2px;
+	}
+}
+
 .sy-dialog-box-actions-ctn {
 	display: flex;
-	flex-direction: column-reverse;
+	flex-direction: column;
 	justify-content: stretch;
 	gap: $spacing-small;
 }

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

@@ -348,4 +348,26 @@ describe('DialogBox', () => {
 			expect(result).toEqual([])
 		})
 	})
+
+	it('focus the confirm button on open if autofocusValidateBtn is true', async () => {
+		const wrapper = mount(DialogBox, {
+			props: {
+				...defaultProps,
+				autofocusValidateBtn: true,
+			},
+			global: {
+				plugins: [vuetify],
+			},
+			attachTo: document.body,
+		})
+
+		const modal = wrapper.getComponent(VCard)
+
+		const confirmBtn = modal.find('[data-test-id="confirm-btn"]')
+
+		await wrapper.vm.$nextTick()
+
+		expect(confirmBtn.element).toEqual(document.activeElement)
+		wrapper.unmount()
+	})
 })

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

@@ -2,6 +2,7 @@
 
 exports[`DialogBox > rendering and props > renders correctly with props 1`] = `
 <div
+  aria-labelledby="dialog-v-0"
   aria-modal="true"
   class="sy-dialog-box"
   modelvalue="true"
@@ -10,7 +11,6 @@ exports[`DialogBox > rendering and props > renders correctly with props 1`] = `
   width="600px"
 >
   <div
-    aria-labelledby="Test title"
     class="
       pa-6
       v-card
@@ -18,7 +18,7 @@ exports[`DialogBox > rendering and props > renders correctly with props 1`] = `
       v-card--variant-elevated
       v-theme--light
     "
-    id="dialogContent"
+    id="dialog-content"
   >
     <!---->
     <div class="v-card__loader">
@@ -81,10 +81,13 @@ exports[`DialogBox > rendering and props > renders correctly with props 1`] = `
       pa-0
       v-card-title
     ">
-      <h2 class="
-        font-weight-bold
-        text-h6
-      ">
+      <h2
+        class="
+          font-weight-bold
+          text-h6
+        "
+        id="dialog-v-0"
+      >
         Test title
       </h2>
       <div class="v-spacer"></div>
@@ -95,6 +98,7 @@ exports[`DialogBox > rendering and props > renders correctly with props 1`] = `
           ml-4
           mr-n2
           mt-n2
+          sy-dialog-box-close-btn
           v-btn
           v-btn--density-default
           v-btn--elevated
@@ -141,6 +145,7 @@ exports[`DialogBox > rendering and props > renders correctly with props 1`] = `
       <div class="v-spacer"></div>
       <button
         class="
+          sy-dialog-box-cancel-btn
           text-primary
           v-btn
           v-btn--density-default
@@ -165,6 +170,7 @@ exports[`DialogBox > rendering and props > renders correctly with props 1`] = `
       <button
         class="
           bg-primary
+          sy-dialog-box-confirm-btn
           v-btn
           v-btn--density-default
           v-btn--elevated

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

@@ -57,6 +57,9 @@ describe('FileUpload', () => {
 			global: {
 				plugins: [vuetify],
 			},
+			props: {
+				modelValue: [], // Ajouter la prop modelValue obligatoire
+			},
 		})
 
 		const label = wrapper.find('label')

package/src/components/FooterBar/FooterBar.vue

@@ -184,6 +184,7 @@
 						v-bind="options.goTopBtnIcon"
 						:icon="arrowTopIcon"
 						class="scroll"
+						label="Aller en haut de la page"
 					/>
 				</VBtn>
 			</div>

package/src/components/HeaderBar/Accessibilite.stories.ts

@@ -216,6 +216,10 @@ export const Legende: StoryObj = {
 				  </div>
 				</div>
 			  </div>
+			  <div class="mt-4">
+				  <p>Rapport d’audit manuel : <a href="/audits/HeaderBar.xlsx" style="color:#0C41BD;">Voir le rapport</a></p>
+				  <p style="color: grey; font-size: 14px">Correctifs associés (<a href="https://github.com/assurance-maladie-digital/design-system-v3/issues/643" target="_blank" style="color:#0C41BD;">issue #643</a>)</p>
+			  </div>
             `,
 		}
 	},

package/src/components/HeaderBar/HeaderBar.mdx

@@ -18,24 +18,39 @@ Pour voir l'utilisation du menu, veuillez consulter le composant `HeaderBurgerMe
 ### Prepend
 
 Le slot `prepend` permet d'ajouter du contenu en haut du header, il suivra le comportement du header au scroll.
-Il est possible de récupérer le status du Menu de header en utilisant la prop `isMenuOpen` du slot `prepend`. (Fonctionne uniquement pour les menu s'enregistrant via la fonction injectée `registerHeaderMenu`, ce qui est le cas pour le composant `HeaderBurgerMenu`)
+Il est possible de récupérer le status du Menu de header en utilisant la prop `menuOpen` du slot `prepend`. (Fonctionne uniquement pour les menus s'enregistrant via la fonction injectée `registerHeaderMenu`, ce qui est le cas pour le composant `HeaderBurgerMenu`).
+Le contenu du slot prend tout l'espace disponible en largeur. Pour que le contenu soit de même dimension que le header, il faut lui appliquer une largeur maximale de `1712px`.
 
 <Source
   dark
   code={`
 <template>
-  <HeaderBar>
-	<template #menu>
-	  <HeaderBurgerMenu>
-		...
-	  </HeaderBurgerMenu>
-	</template>
-	<template #prepend="{ isMenuOpen }">
-	  <div v-if="isMenuOpen">Menu ouvert</div>
-	  <div v-else>Menu fermé</div>
-	</template>
-  </HeaderBar>
+	<HeaderBar>
+		<template #menu>
+			<HeaderBurgerMenu>
+				...
+			</HeaderBurgerMenu>
+		</template>
+		<template #prepend="{ menuOpen }">
+			<div class="header-prepend-content">
+				<div v-if="menuOpen">
+					Menu ouvert
+				</div>
+				<div v-else>
+					Menu fermé
+				</div>
+			</div>
+		</template>
+	</HeaderBar>
 </template>
+
+<style lang="scss" scoped>
+.header-prepend-content {
+	width: 100%;
+	max-width: 1712px;
+	margin: 0 auto;
+}
+</style>
 `}
 />
 
@@ -47,7 +62,11 @@ code:`
 <template>
 	<HeaderBar>
 		<template #prepend>
-			<div style="height: 26px; background-color: RebeccaPurple;"></div>
+			<div style="max-width: 1712px; margin: 0 auto; height: 26px; background-color: #0c419a;" class="pl-md-14 pl-4 text-white">
+				<div>
+					Contenu
+				</div>
+			</div>
 		</template>
 	</HeaderBar>
 </template>
@@ -57,24 +76,28 @@ code:`
 ### Append
 
 Le slot `append` permet d'ajouter du contenu en bas du header, il suivra le comportement du header au scroll.
-Il est également possible de récupérer le status du Menu de header en utilisant la prop `isMenuOpen` du slot `append`.
+Il est également possible de récupérer le status du Menu de header en utilisant la prop `menuOpen` du slot `append`.
+Le contenu du slot prend tout l'espace disponible en largeur. Pour que le contenu soit de même dimension que le header, il faut lui appliquer une largeur maximale de `1712px`.
 
 <Source
 	dark
 	code={`
 <template>
   <HeaderBar>
-	<template #menu>
-	  <HeaderBurgerMenu>
-		...
-	  </HeaderBurgerMenu>
-	</template>
-	<template #append="{ isMenuOpen }">
-	  <div v-if="isMenuOpen">Menu ouvert</div>
+	<template #append="{ menuOpen }">
+	  <div v-if="menuOpen">Menu ouvert</div>
 	  <div v-else>Menu fermé</div>
 	</template>
   </HeaderBar>
 </template>
+
+<style lang="scss" scoped>
+.header-append-content {
+	width: 100%;
+	max-width: 1712px;
+	margin: 0 auto;
+}
+</style>
 `}
 />
 
@@ -86,7 +109,9 @@ Il est également possible de récupérer le status du Menu de header en utilisa
 <template>
 	<HeaderBar>
 		<template #append>
-			<div style="height: 26px; background-color: RebeccaPurple;"></div>
+			<div style="max-width: 1712px; margin: 0 auto; height: 26px; background-color: #0c419a;" class="pl-md-14 pl-4 text-white">
+				<div>contenu</div>
+			</div>
 		</template>
 	</HeaderBar>
 </template>

package/src/components/HeaderBar/HeaderBar.stories.ts

@@ -1,12 +1,13 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
 
-import { mdiAccountCircleOutline, mdiMagnify } from '@mdi/js'
+import { mdiAccountCircleOutline, mdiMagnify, mdiMenu } from '@mdi/js'
 import { VBtn, VListItem, VListItemTitle } from 'vuetify/components'
 import HeaderToolbar from '../HeaderToolbar/HeaderToolbar.vue'
 import LogoBrandSection from '../LogoBrandSection/LogoBrandSection.vue'
 import SubHeader from '../SubHeader/SubHeader.vue'
 import UserMenuBtn from '../UserMenuBtn/UserMenuBtn.vue'
 import HeaderBar from './HeaderBar.vue'
+import SyIcon from '../Customs/SyIcon/SyIcon.vue'
 
 const meta = {
 	title: 'Composants/Structure/HeaderBar',
@@ -194,20 +195,23 @@ export const WithRightMenu: Story = {
 	},
 	render: (args) => {
 		return {
-			components: { HeaderBar, VBtn },
+			components: { HeaderBar, VBtn, SyIcon },
 			setup() {
 				const searchIcon = mdiMagnify
 				const accountIcon = mdiAccountCircleOutline
-				return { args, searchIcon, accountIcon }
+				const menuIcon = mdiMenu
+
+				return { args, searchIcon, accountIcon, menuIcon }
 			},
 			template: `<div class="position: relative">
 				<HeaderBar v-bind="args">
 					<template #header-side="{ menuOpen }">
-						<div class="d-flex justify-center h-100 ga-4 pr-4">
+						<nav class="d-none d-md-flex justify-center h-100 ga-4 pr-4">
 							<VBtn
 								variant="text"
 								:prepend-icon="searchIcon"
 								color="primary"
+								role="search"
 							>
 								Rechercher
 							</VBtn>
@@ -217,7 +221,17 @@ export const WithRightMenu: Story = {
 							>
 								Login
 							</VBtn>
-						</div>
+						</nav>
+						<VBtn
+							class="d-md-none"
+							variant="text"
+						>
+							<SyIcon
+								size="x-large"
+								:icon="menuIcon"
+								aria-label="Ouvrir le menu"
+							/>
+						</VBtn>
 					</template>
 				</HeaderBar>
 			</div>`,
@@ -234,11 +248,12 @@ export const WithRightMenu: Story = {
 						service-subtitle="Design System"
 					>
 						<template #header-side="{ menuOpen }">
-							<div class="d-flex justify-center h-100 ga-4 pr-4">
+							<nav class="d-none d-md-flex justify-center h-100 ga-4 pr-4">
 								<VBtn
 									variant="text"
 									:prepend-icon="mdiMagnify"
 									color="primary"
+									role="search"
 								>
 									Rechercher
 								</VBtn>
@@ -248,7 +263,17 @@ export const WithRightMenu: Story = {
 								>
 									Login
 								</VBtn>
-							</div>
+							</nav>
+							<VBtn
+								class="d-md-none"
+								variant="text"
+							>
+								<SyIcon
+									size="x-large"
+									:icon="mdiMenu"
+									aria-label="Ouvrir le menu"
+								/>
+							</VBtn>
 						</template>
 					</HeaderBar>
 				</template>
@@ -258,9 +283,9 @@ export const WithRightMenu: Story = {
 				name: 'Script',
 				code: `
 				<script setup lang="ts">
-					import { HeaderBar } from '@cnamts/synapse'
+					import { HeaderBar, SyIcon } from '@cnamts/synapse'
 					import { VBtn } from 'vuetify/components'
-					import { mdiMagnify, mdiAccountCircleOutline } from '@mdi/js'
+					import { mdiMagnify, mdiAccountCircleOutline, mdiMenu } from '@mdi/js'
 				</script>
 				`,
 			},
@@ -689,7 +714,11 @@ export const PrependSlot: Story = {
 			template: `
 				<HeaderBar v-bind="args">
 					<template #prepend>
-						<div style="height: 26px; background-color: #0c419a;"></div>
+						<div style="max-width: 1712px; margin: 0 auto; height: 26px; background-color: #0c419a;" class="pl-md-14 pl-4 text-white">
+							<div>
+								contenu
+							</div>
+						</div>
 					</template>
 				</HeaderBar>
 			`,
@@ -703,7 +732,11 @@ export const PrependSlot: Story = {
 				<template>
 					<HeaderBar>
 						<template #prepend>
-							<div style="height: 26px; background-color: #0c419a;"></div>
+							<div style="max-width: 1712px; margin: 0 auto; height: 26px; background-color: #0c419a;" class="pl-md-14 pl-4 text-white">
+								<div>
+									contenu
+								</div>
+							</div>
 						</template>
 					</HeaderBar>
 				</template>
@@ -735,7 +768,11 @@ export const AppendSlot: Story = {
 			template: `
 				<HeaderBar v-bind="args">
 					<template #append>
-						<div style="height: 26px; background-color: #0c419a;"></div>
+						<div style="max-width: 1712px; margin: 0 auto; height: 26px; background-color: #0c419a;" class="pl-md-14 pl-4 text-white">
+							<div>
+								contenu
+							</div>
+						</div>
 					</template>
 				</HeaderBar>
 			`,
@@ -749,7 +786,11 @@ export const AppendSlot: Story = {
 				<template>
 					<HeaderBar>
 						<template #append>
-							<div style="height: 26px; background-color: #0c419a;"></div>
+							<div style="max-width: 1712px; margin: 0 auto; height: 26px; background-color: #0c419a;" class="pl-md-14 pl-4 text-white">
+								<div>
+									contenu
+								</div>
+							</div>
 						</template>
 					</HeaderBar>
 				</template>

package/src/components/HeaderBar/HeaderBar.vue

@@ -151,11 +151,12 @@
 	})
 
 </script>
-
+<!-- eslint-disable vuejs-accessibility/no-redundant-roles -->
 <template>
 	<header
 		ref="header"
 		class="header"
+		role="banner"
 		:style="headerStyle"
 	>
 		<div