@cnamts/synapse 1.0.21 → 1.0.23

package/src/components/SubHeader/SubHeader.stories.ts

@@ -11,6 +11,10 @@ const meta = {
 		layout: 'fullscreen',
 	},
 	argTypes: {
+		'headingLevel': {
+			control: { type: 'select' },
+			options: [1, 2, 3, 4, 5, 6],
+		},
 		'hideBackBtn': {
 			type: 'boolean',
 			control: { type: 'boolean' },
@@ -160,6 +164,7 @@ export const Default: Story = {
 		],
 	},
 	args: {
+		'headingLevel': 2,
 		'backBtnText': 'Retour',
 		'hideBackBtn': false,
 		'titleText': 'Paul Dupont',
@@ -222,6 +227,7 @@ export const BackgroundCustom: Story = {
 		],
 	},
 	args: {
+		headingLevel: 2,
 		backBtnText: 'Retour',
 		hideBackBtn: false,
 		titleText: 'Paul Dupont',
@@ -303,6 +309,7 @@ export const DataList: Story = {
 		],
 	},
 	args: {
+		headingLevel: 2,
 		backBtnText: 'Retour',
 		hideBackBtn: false,
 		titleText: 'Paul Dupont',
@@ -399,6 +406,7 @@ export const DataListFixedHeight: Story = {
 		],
 	},
 	args: {
+		headingLevel: 2,
 		backBtnText: 'Retour',
 		hideBackBtn: false,
 		titleText: 'Paul Dupont',
@@ -503,6 +511,7 @@ export const ActionBtn: Story = {
 		],
 	},
 	args: {
+		headingLevel: 2,
 		backBtnText: 'Retour',
 		hideBackBtn: false,
 		titleText: 'Paul Dupont',
@@ -718,6 +727,7 @@ export const Loading: Story = {
 		],
 	},
 	args: {
+		headingLevel: 2,
 		backBtnText: 'Retour',
 		hideBackBtn: false,
 		titleText: 'Paul Dupont',
@@ -803,6 +813,7 @@ export const SlotAdditionalInformations: Story = {
 		],
 	},
 	args: {
+		'headingLevel': 2,
 		'backBtnText': 'Retour',
 		'hideBackBtn': false,
 		'titleText': 'Paul Dupont',
@@ -898,6 +909,7 @@ export const SlotBackBtn: Story = {
 		'subTitleText': '1 69 08 75 125 456 75',
 		'subTitleAccessibleName': 'Numéro de sécurité sociale de Paul Dupont : 1 69 08 75 125 456 75',
 		'loading': false,
+		'headingLevel': 2,
 		'back-btn': `<template #back-btn>
 	<VBtn
 		color="white"
@@ -970,6 +982,7 @@ export const SlotBackBtnIcon: Story = {
 		],
 	},
 	args: {
+		'headingLevel': 2,
 		'backBtnText': 'Retour',
 		'hideBackBtn': false,
 		'titleText': 'Paul Dupont',
@@ -1037,6 +1050,7 @@ export const SlotTitle: Story = {
 		],
 	},
 	args: {
+		headingLevel: 2,
 		backBtnText: 'Retour',
 		hideBackBtn: false,
 		titleText: 'Paul Dupont',
@@ -1102,6 +1116,7 @@ export const SlotSubTitle: Story = {
 		],
 	},
 	args: {
+		'headingLevel': 2,
 		'backBtnText': 'Retour',
 		'hideBackBtn': false,
 		'titleText': 'Paul Dupont',
@@ -1171,6 +1186,7 @@ export const SlotRightContent: Story = {
 		],
 	},
 	args: {
+		'headingLevel': 2,
 		'backBtnText': 'Retour',
 		'hideBackBtn': false,
 		'titleText': 'Paul Dupont',

package/src/components/SubHeader/SubHeader.vue

@@ -13,6 +13,7 @@
 	import HeaderLoading from '../HeaderLoading/HeaderLoading.vue'
 	import type { DataListActionEvent, DataListGroupItems } from '../DataListGroup/types'
 	import { VThemeProvider } from 'vuetify/components'
+	import SyHeading from '@/components/SyHeading/SyHeading.vue'
 
 	const props = withDefaults(defineProps<CustomizableOptions & Widthable & {
 		hideBackBtn?: boolean
@@ -25,6 +26,7 @@
 		dataListGroupItems?: DataListGroupItems | undefined
 		loading?: boolean
 		renderFixedHeight?: boolean
+		headingLevel?: 1 | 2 | 3 | 4 | 5 | 6
 	}>(), {
 		hideBackBtn: false,
 		backBtnText: locales.backBtnText,
@@ -36,6 +38,7 @@
 		dataListGroupItems: undefined,
 		loading: false,
 		renderFixedHeight: false,
+		headingLevel: 1,
 	})
 
 	const options = useCustomizableOptions(config, props)
@@ -118,13 +121,14 @@
 								theme="dark"
 								height="2rem"
 							/>
-							<h2
+							<SyHeading
 								v-else-if="titleText"
 								class="text-h5 font-weight-bold"
 								:aria-label="titleAccessibleName"
+								:level="headingLevel"
 							>
 								{{ titleText }}
-							</h2>
+							</SyHeading>
 						</VFadeTransition>
 					</slot>
 
@@ -230,5 +234,4 @@
 		background-color: #e6e6e6 !important;
 	}
 }
-
 </style>

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

@@ -1,15 +1,36 @@
 import { Meta, Story } from '@storybook/addon-docs';
 import * as SubHeaderStories from '../SubHeader.stories.ts';
 import '@/stories/styles/shared.css';
+import AccessibilityIcon from '@/common/imgs/accessibility-svgrepo-com.svg';
+import {
+	AccessibilityGuideLayout,
+	CriteriaSection,
+	CriteriaCard,
+	DemoSection,
+	BestPracticesSection,
+	ResourcesSection,
+} from '@/stories/accessibility/AccessibilityGuideLayout.mdx';
 
 <Meta of={SubHeaderStories} />
-
-<div className="header">
-  <h1>Accessibilité</h1>
-</div>
-
-
+<AccessibilityGuideLayout
+	componentName="SubHeader"
+	iconSrc={AccessibilityIcon}
+>
 <div class="mt-2">
 <p>Rapport d’audit manuel : <a href="/audits/SubHeader.xlsx" style={{ color:'#0C41BD' }}>Voir le rapport</a></p>
 		<p style={{ color: 'grey', fontSize: '14px', marginTop: '0px' }}>Correctifs associés (<a href="https://github.com/assurance-maladie-digital/design-system-v3/issues/942" target="_blank" style={{color:'#0C41BD'}}>issue #942</a>)</p>
 	</div>
+<CriteriaSection>
+<CriteriaCard icon="🧩" title="Niveau de titre configurable via la prop headingLevel">
+  <ul>
+    <li>Le niveau du titre (h1 à h6) est défini grâce à la propriété <strong>headingLevel</strong> déclarée dans le composant. Si aucune valeur n’est fournie, le composant applique par défaut un titre de niveau h4, défini dans l’implémentation du composant.</li>
+      <code>&lt;SubHeader :heading-level="4" /&gt; </code>
+    
+    <li><strong>Accessibilité</strong> : Permet que la hiérarchie entre les titres soit pertinente (critère 9.1.1 RGAA) </li>
+  </ul>
+</CriteriaCard>
+</CriteriaSection>
+
+
+
+</AccessibilityGuideLayout>

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

@@ -0,0 +1,20 @@
+// @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 SubHeader from '../SubHeader.vue'
+
+describe('SubHeader – accessibility (axe)', () => {
+	it('has no obvious axe violations', async () => {
+		const wrapper = mount(SubHeader, {
+			slots: {
+				default: '<h1>Mon titre principal</h1>',
+			},
+		})
+
+		const results = await axe(wrapper.element as HTMLElement)
+		assertNoA11yViolations(results, 'SubHeader – default state')
+	})
+})

package/src/components/SyAlert/SyAlert.vue

@@ -10,6 +10,7 @@
 	} from '@mdi/js'
 	import type { VIcon } from 'vuetify/components'
 	import SyIcon from '@/components/Customs/SyIcon/SyIcon.vue'
+	import { vRgaaSvgFix } from '@/directives/rgaaSvgFix'
 
 	defineOptions({
 		inheritAttrs: false,
@@ -119,6 +120,7 @@
 
 <style lang="scss" scoped>
 @use '@/assets/tokens';
+@use '@/assets/apTokens';
 @use 'sass:map';
 
 .sy-alert {
@@ -256,41 +258,41 @@
 	@include redesign(
 		'warning',
 		(
-			'background': tokens.$colors-background-warning,
-			'accent': tokens.$colors-border-warning,
-			'border': tokens.$colors-border-warning,
-			'icon':tokens.$colors-icon-warning,
-			'icon-bg': tokens.$colors-background-warning-subdued,
+			'background': var(--alert-warning-background),
+			'accent': var(--alert-warning-accent),
+			'border': var(--alert-warning-border),
+			'icon':var(--alert-warning-icon),
+			'icon-bg': var(--alert-warning-icon-bg),
 		)
 	);
 	@include redesign(
 		'success',
 		(
-			'background': tokens.$colors-background-success,
-			'accent': tokens.$colors-border-success,
-			'border': tokens.$colors-border-success,
-			'icon':tokens.$colors-icon-success,
-			'icon-bg': tokens.$colors-background-success-subdued,
+			'background': var(--alert-success-background),
+			'accent': var(--alert-success-accent),
+			'border': var(--alert-success-border),
+			'icon':var(--alert-success-icon),
+			'icon-bg': var(--alert-success-icon-bg),
 		)
 	);
 	@include redesign(
 		'error',
 		(
-			'background': tokens.$colors-background-error,
-			'accent': tokens.$colors-border-error,
-			'border': tokens.$colors-border-error,
-			'icon':tokens.$colors-icon-error,
-			'icon-bg': tokens.$colors-background-error-subdued,
+			'background': var(--alert-error-background),
+			'accent': var(--alert-error-accent),
+			'border': var(--alert-error-border),
+			'icon':var(--alert-error-icon),
+			'icon-bg': var(--alert-error-icon-bg),
 		)
 	);
 	@include redesign(
 		'info',
 		(
-			'background': tokens.$colors-background-info,
-			'accent': tokens.$colors-border-info,
-			'border': tokens.$colors-border-info,
-			'icon':tokens.$colors-icon-info,
-			'icon-bg': tokens.$colors-background-info-subdued,
+			'background': var(--alert-info-background),
+			'accent': var(--alert-info-accent),
+			'border': var(--alert-info-border),
+			'icon':var(--alert-info-icon),
+			'icon-bg': var(--alert-info-icon-bg),
 		)
 	);
 }

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

@@ -1,12 +1,82 @@
-import { Meta, Story } from '@storybook/addon-docs';
-import * as SyAlertStorie from '../SyAlert.stories';
-import '@/stories/styles/shared.css';
+import { Meta, Primary } from '@storybook/blocks';
+import * as SyAlertStories from '../SyAlert.stories.ts';
+import AccessibilityIcon from '@/common/imgs/accessibility-svgrepo-com.svg';
+import {
+	AccessibilityGuideLayout,
+	CriteriaSection,
+	CriteriaCard,
+	DemoSection,
+	BestPracticesSection,
+	ResourcesSection,
+} from '@/stories/accessibility/AccessibilityGuideLayout.mdx';
 
-<Meta of={SyAlertStorie} />
+<Meta of={SyAlertStories}/>
 
-<div className="header">
-  <h1>Accessibilité</h1>
-</div>
+<AccessibilityGuideLayout
+	componentName="SyAlert"
+	iconSrc={AccessibilityIcon}
+	apgHref="https://www.w3.org/WAI/ARIA/apg/patterns/alert/"
+>
+	<div class="mt-8">
+		<p>Rapport d'audit manuel : <a href="/audits/SyAlert.xlsx" style={{ color:'#0C41BD' }}>Voir le rapport</a></p>
+		<p style={{ color: 'grey', fontSize: '14px', marginTop: '0px' }}>Correctifs associés (<a href="https://github.com/assurance-maladie-digital/design-system-v3/issues/4010" target="_blank" style={{color:'#0C41BD'}}>issue #4010</a>)</p>
+	</div>
 
-  <p>Rapport d’audit manuel : <a href="/audits/SyAlert.xlsx" style={{ color:'#0C41BD' }}>Voir le rapport</a></p>
-  <p style={{ color: 'grey', fontSize: '14px', margin: '0px' }}>Correctifs associés (<a href="https://github.com/assurance-maladie-digital/design-system-v3/issues/4010" target="_blank" style={{color:'#0C41BD'}}>issue #4010</a>)</p>
+	<CriteriaSection>
+		<CriteriaCard icon="🔍" title="Rôle ARIA et structure sémantique">
+			<ul>
+				<li><strong>Rôle alert</strong> : Le composant utilise <code>role="alert"</code> pour annoncer automatiquement le message aux lecteurs d'écran</li>
+				<li><strong>Types sémantiques</strong> : Quatre types disponibles (<code>success</code>, <code>info</code>, <code>warning</code>, <code>error</code>) avec icônes appropriées</li>
+				<li><strong>Gestion Vuetify</strong> : Le rôle <code>role="undefined"</code> sur VAlert évite les conflits de rôles avec le conteneur parent</li>
+			</ul>
+		</CriteriaCard>
+
+		<CriteriaCard icon="🎨" title="Icônes et éléments décoratifs">
+			<ul>
+				<li><strong>Rôle presentation</strong> : Les SVG des icônes reçoivent <code>role="presentation"</code> via <code>v-rgaa-svg-fix</code> pour éviter la lecture superflue</li>
+				<li><strong>Icône décorative</strong> : L'icône de fermeture utilise <code>decorative</code> pour être masquée aux lecteurs d'écran</li>
+				<li><strong>Texte visible</strong> : Le bouton de fermeture contient le texte "Fermer" pour une accessibilité complète</li>
+			</ul>
+		</CriteriaCard>
+
+		<CriteriaCard icon="⌨️" title="Interaction et fermeture">
+			<ul>
+				<li><strong>Bouton natif</strong> : Utilisation de <code>VBtn</code> pour la fermeture, garantissant un comportement clavier natif</li>
+				<li><strong>Focus visible</strong> : Style <code>:focus-visible</code> avec outline clair pour la navigation au clavier</li>
+				<li><strong>Contrôle modelValue</strong> : Fermeture gérée via <code>v-model</code> pour une cohérence réactive</li>
+			</ul>
+		</CriteriaCard>
+
+		<CriteriaCard icon="📱" title="Variantes et styles accessibles">
+			<ul>
+				<li><strong>Deux variantes</strong> : <code>tonal</code> (fond coloré) et <code>outlined</code> (contour) avec contrastes adaptés</li>
+				<li><strong>Thème sombre</strong> : Styles spécifiques pour le mode dark avec contrastes inversés</li>
+				<li><strong>Responsive</strong> : Adaptation mobile avec flexbox et espacement optimisé</li>
+			</ul>
+		</CriteriaCard>
+	</CriteriaSection>
+
+	<DemoSection componentName="SyAlert">
+		<Primary />
+	</DemoSection>
+
+	<BestPracticesSection>
+		<ul>
+			<li><strong>Type approprié</strong> : Choisissez <code>error</code> pour les erreurs bloquantes, <code>warning</code> pour les avertissements, <code>success</code> pour les confirmations, <code>info</code> pour les informations</li>
+			<li><strong>Fermeture conditionnelle</strong> : Utilisez <code>closable={true}</code> uniquement si l'utilisateur peut ignorer l'alerte en toute sécurité</li>
+			<li><strong>Messages concis</strong> : Gardez les textes clairs et directs pour une compréhension rapide</li>
+			<li><strong>Positionnement</strong> : Placez les alertes de manière visible mais non intrusive dans le flux de navigation</li>
+			<li><strong>Évitez les multiples</strong> : Ne cumulez pas plusieurs alertes simultanément pour éviter la surcharge cognitive</li>
+		</ul>
+	</BestPracticesSection>
+
+	<ResourcesSection>
+		<ul>
+			<li><a href="https://www.w3.org/WAI/ARIA/apg/patterns/alert/" target="_blank" rel="noopener noreferrer">Guide des pratiques WAI-ARIA : Alertes</a></li>
+			<li><a href="https://www.w3.org/WAI/WCAG21/quickref/" target="_blank" rel="noopener noreferrer">Référence rapide WCAG 2.1</a></li>
+			<li><a href="https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#10.6" target="_blank" rel="noopener noreferrer">RGAA Critère 10.6 : Messages d'erreur</a></li>
+			<li><a href="https://inclusive-components.design/notifications/" target="_blank" rel="noopener noreferrer">Inclusive Components: Notifications</a></li>
+		</ul>
+	</ResourcesSection>
+
+</AccessibilityGuideLayout>

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

@@ -0,0 +1,23 @@
+// @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 SyAlert from '../SyAlert.vue'
+
+describe('SyAlert – accessibility (axe)', () => {
+	it('has no obvious axe violations', async () => {
+		const wrapper = mount(SyAlert, {
+			props: {
+				type: 'info',
+			},
+			slots: {
+				default: 'Ceci est un message d\'information.',
+			},
+		})
+
+		const results = await axe(wrapper.element as HTMLElement)
+		assertNoA11yViolations(results, 'SyAlert – default state')
+	})
+})

package/src/components/SyBtnMenu/SyBtnMenu.vue

@@ -2,6 +2,7 @@
 	import { ref, watch, computed, onMounted, useSlots, type PropType, nextTick } from 'vue'
 	import { useDisplay } from 'vuetify'
 	import slugify from 'slugify'
+	import SyIcon from '@/components/Customs/SyIcon/SyIcon.vue'
 
 	type Item = string | Record<string, unknown>
 
@@ -34,6 +35,10 @@
 			type: String,
 			default: 'value',
 		},
+		iconKey: {
+			type: String,
+			default: 'icon',
+		},
 		primaryInfo: {
 			type: String,
 			default: 'Information principale',
@@ -217,28 +222,35 @@
 					:aria-labelledby="generatedId"
 					:aria-activedescendant="getSelectedValue() ? `item-${slugify(getSelectedValue()!)}` : undefined"
 				>
-					<li
+					<VListItem
 						v-for="(item, index) in formattedItems"
 						:id="`item-${slugify(item[props.textKey] as string)}`"
 						:key="index"
+						tag="li"
+						:class="`text-${props?.options['list']?.textColor}`"
+						v-bind="props.options['list']"
+						:href="item.link"
+						:to="item.to"
+						:tabindex="0"
+						role="menuitem"
+						:aria-current="selectedItem === item ? 'page' : undefined"
+						@click="selectItem(item)"
 					>
-						<VListItem
-							:class="`text-${props?.options['list']?.textColor}`"
-							v-bind="props.options['list']"
-							:href="item.link"
-							:to="item.to"
-							:tabindex="0"
-							role="menuitem"
-							:aria-current="selectedItem === item ? 'page' : undefined"
-							@click="selectItem(item)"
+						<template
+							v-if="item[props.iconKey]"
+							#prepend
 						>
-							<VListItemTitle
-								class="item-title"
-							>
-								{{ item[props.textKey] }}
-							</VListItemTitle>
-						</VListItem>
-					</li>
+							<SyIcon
+								:icon="item[props.iconKey] as string"
+								decorative
+							/>
+						</template>
+						<VListItemTitle
+							class="item-title"
+						>
+							{{ item[props.textKey] }}
+						</VListItemTitle>
+					</VListItem>
 					<slot />
 					<slot name="footer-list-item" />
 				</VList>
@@ -312,4 +324,8 @@
 .item-title {
 	white-space: wrap;
 }
+
+:deep(.v-list-item__prepend) {
+	display: unset !important;
+}
 </style>

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

@@ -0,0 +1,38 @@
+// @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 SyBtnMenu from '../SyBtnMenu.vue'
+
+// Scénario d’accessibilité : menu utilisateur desktop avec une option et déploiement du menu.
+
+describe('SyBtnMenu – accessibility (axe)', () => {
+	it('has no obvious axe violations with menu open', async () => {
+		const wrapper = mount(SyBtnMenu, {
+			props: {
+				primaryInfo: 'John Doe',
+				secondaryInfo: 'Additional Info',
+				menuItems: [
+					{ text: 'Profil', value: 'profile' },
+				],
+				isMobileView: false,
+			},
+			attachTo: document.body,
+		})
+
+		// Ouvrir le menu pour inclure la liste dans l’analyse axe
+		const activator = wrapper.find('.sy-user-menu-btn')
+		if (activator.exists()) {
+			await activator.trigger('click')
+		}
+
+		const results = await axe(document.body)
+		assertNoA11yViolations(results, 'SyBtnMenu – menu open', {
+			ignoreRules: ['region'],
+		})
+
+		wrapper.unmount()
+	})
+})

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

@@ -1,5 +1,6 @@
 import { describe, it, expect } from 'vitest'
 import { mount } from '@vue/test-utils'
+import { nextTick } from 'vue'
 import SyBtnMenu from '../SyBtnMenu.vue'
 
 describe('SyBtnMenu', () => {
@@ -164,4 +165,44 @@ describe('SyBtnMenu', () => {
 
 		wrapper.unmount()
 	})
+
+	it('renders a prepend icon when menu item provides icon', async () => {
+		const wrapper = mount(SyBtnMenu, {
+			props: {
+				primaryInfo: 'John Doe',
+				menuItems: [
+					{ text: 'Administration', value: 'admin', icon: 'mdi-account' },
+				],
+			},
+			attachTo: document.body,
+		})
+
+		await wrapper.find('.sy-user-menu-btn').trigger('click')
+		await nextTick()
+
+		const prependIcon = document.body.querySelector('.v-list-item__prepend .v-icon') as HTMLElement | null
+		expect(prependIcon).not.toBeNull()
+		expect(prependIcon?.classList.contains('mdi-account')).toBe(true)
+
+		wrapper.unmount()
+	})
+
+	it('does not render a prepend icon when menu item has no icon', async () => {
+		const wrapper = mount(SyBtnMenu, {
+			props: {
+				primaryInfo: 'John Doe',
+				menuItems: [
+					{ text: 'Administration', value: 'admin' },
+				],
+			},
+			attachTo: document.body,
+		})
+
+		await wrapper.find('.sy-user-menu-btn').trigger('click')
+
+		const prependIcon = wrapper.find('.v-list-item__prepend .v-icon')
+		expect(prependIcon.exists()).toBe(false)
+
+		wrapper.unmount()
+	})
 })