@cnamts/synapse 1.0.15 → 1.0.17

package/src/components/ChipList/ChipList.vue

@@ -112,12 +112,12 @@
 	})
 
 	/**
-   * Retourne la couleur de fond correspondant à l'état du chip
-   *
-   * @param state - L'état du chip
-   * @param options - Les options de personnalisation
-   * @returns La couleur de fond correspondante
-   */
+	 * Retourne la couleur de fond correspondant à l'état du chip
+	 *
+	 * @param state - L'état du chip
+	 * @param options - Les options de personnalisation
+	 * @returns La couleur de fond correspondante
+	 */
 	function getBackgroundColor(state: ChipState): string {
 		// Si des options Vuetify sont définies et qu'une couleur est spécifiée, on l'utilise
 		const vuetifyColor = props.vuetifyOptions?.chip?.color
@@ -211,16 +211,24 @@
 							:icon="customIcon || getIcon(item.state)"
 							:color="item.state"
 							decorative
+							class="mr-1"
 						/>
 					</template>
 
-					<span>{{ item.text }}</span>
+					<span
+						role="status"
+						:aria-label="locales.item(item.text)"
+						aria-live="polite"
+					>
+						{{ item.text }}
+					</span>
 
 					<template v-if="displayAppendStateIcon">
 						<SyIcon
 							v-bind="options.icon"
 							:icon="customIcon || getIcon(item.state)"
 							decorative
+							class="ml-1"
 						/>
 					</template>
 
@@ -229,8 +237,10 @@
 						v-bind="options.btn"
 						:aria-label="`Supprimer le filtre '${item.text}'`"
 						icon
-						class="remove-chip"
+						class="remove-chip ml-1"
 						@click="emitRemoveEvent(item)"
+						@keydown.enter.prevent="emitRemoveEvent(item)"
+						@keydown.space.prevent="emitRemoveEvent(item)"
 					>
 						<SyIcon
 							v-bind="options.icon"
@@ -242,7 +252,6 @@
 				</VChip>
 			</li>
 
-			<!-- Élément +N intégré dans la liste HTML -->
 			<li
 				v-if="showOverflowChip"
 				class="d-inline-flex"
@@ -250,18 +259,14 @@
 				<VChip
 					v-bind="options.chip"
 					class="overflow-chip text-cyan-darken-40 ma-1"
-					tabindex="0"
 					:aria-label="overflowAriaLabel"
 					@click="toggleShowAllItems"
-					@keydown.enter="toggleShowAllItems"
-					@keydown.space.prevent="toggleShowAllItems"
 				>
 					{{ overflowText }}
 				</VChip>
 			</li>
 		</ul>
 
-		<!-- Boutons d'action (hors de la liste) -->
 		<div
 			v-if="showAllItems || !readonly"
 			class="d-flex align-center"
@@ -325,7 +330,7 @@
 
 	// Améliorer le contraste des bordures de focus pour les boutons de suppression
 	&:focus-visible {
-		outline: 2px solid tokens.$primary-base !important;
+		outline: 2px solid #fff !important;
 		outline-offset: -2px !important;
 	}
 }
@@ -351,12 +356,11 @@
 }
 
 .overflow-chip {
-	border: 1px solid tokens.$cyan-lighten-90 !important;
 	cursor: pointer;
 
 	&:focus-visible {
 		outline: 2px solid tokens.$primary-base !important;
-		outline-offset: -2px !important;
+		outline-offset: 2px !important;
 	}
 }
 
@@ -368,7 +372,6 @@
 // Bouton "Réinitialiser le filtre" - améliorer le contraste de la bordure de focus
 .overflow-btn:focus-visible {
 	outline: 2px solid tokens.$primary-base !important;
-	outline-offset: -2px !important;
 }
 
 // Styles spécifiques pour améliorer le contraste de focus selon le thème du chip

package/src/components/ChipList/locales.ts

@@ -5,4 +5,5 @@ export const locales = {
 	showMoreFilters: 'Afficher {count} filtres supplémentaires',
 	hideExtraFilters: 'Réduire',
 	overflowAriaLabel: 'Afficher {count} filtres supplémentaires : {items}',
+	item: (item: string): string => `Filtre : ${item}`,
 } as const

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

@@ -0,0 +1,40 @@
+// @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 ChipList from '../ChipList.vue'
+import type { ChipItem, ChipState } from '../types'
+
+// Scénario d’accessibilité :
+// - plusieurs chips avec différents états (success, info)
+// - liste rendue avec structure UL/LI et boutons de suppression visibles
+
+describe('ChipList – accessibility (axe)', () => {
+	const defaultItems: ChipItem[] = [
+		{
+			text: 'Email',
+			value: 'email',
+			state: 'success' as ChipState,
+		},
+		{
+			text: 'SMS',
+			value: 'sms',
+			state: 'info' as ChipState,
+		},
+	]
+
+	it('has no obvious axe violations with default items', async () => {
+		const wrapper = mount(ChipList, {
+			props: {
+				items: defaultItems,
+			},
+		})
+
+		const results = await axe(wrapper.element as HTMLElement)
+		assertNoA11yViolations(results, 'ChipList – default items', {
+			ignoreRules: ['region'],
+		})
+	})
+})

package/src/components/CollapsibleList/Accessibilite.mdx

@@ -1,18 +1,74 @@
-import { Meta, Story } from '@storybook/addon-docs';
+import { Meta, Story } from '@storybook/blocks';
 import * as AccessStories from './Accessibilite.stories.ts';
-import '../../stories/styles/shared.css';
+import * as CollapsibleListStories from './CollapsibleList.stories';
+import AccessibilityIcon from '@/common/imgs/accessibility-svgrepo-com.svg';
+import {
+	AccessibilityGuideLayout,
+	CriteriaSection,
+	CriteriaCard,
+	DemoSection,
+	BestPracticesSection,
+	ResourcesSection,
+	AuditSection,
+} from '../../stories/accessibility/AccessibilityGuideLayout.mdx';
 
 <Meta of={AccessStories} />
 
-<div className="header">
-  <h1>Accessibilité</h1>
-  <p>Informations sur l'accessibilité du composant</p>
-</div>
+<AccessibilityGuideLayout
+	componentName="CollapsibleList"
+	iconSrc={AccessibilityIcon}
+	apgHref="https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/"
+>
+	<CriteriaSection>
+		<CriteriaCard icon="🔍" title="Structure sémantique">
+			<ul>
+				<li><strong>Comportement adaptatif</strong> : Section pliable sur mobile, liste statique sur desktop</li>
+				<li><strong>Sur mobile</strong> : <code>role="button"</code> pour l'en-tête et <code>role="region"</code> pour le contenu, <code>aria-expanded</code></li>
+				<li><strong>Sur desktop</strong> : Liste <code>&lt;ul&gt;</code> avec éléments <code>&lt;li&gt;</code> et liens <code>&lt;a&gt;</code></li>
+				<li><strong>Liens accessibles</strong> : <code>aria-label</code> sur les liens pour descriptions complètes</li>
+			</ul>
+		</CriteriaCard>
 
-<Story of={AccessStories.Legende} />
-<br />
+		<CriteriaCard icon="⌨️" title="Navigation et interaction clavier">
+			<ul>
+				<li><strong>Sur mobile</strong> : Touches Espace/Entrée pour ouvrir/fermer, Tab pour naviguer</li>
+				<li><strong>Sur desktop</strong> : Navigation Tab standard dans la liste</li>
+				<li><strong>Focus visible</strong> : Indicateurs de focus sur l'en-tête et les liens</li>
+			</ul>
+		</CriteriaCard>
 
---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
+		<CriteriaCard icon="📱" title="États et retours d'information">
+			<ul>
+				<li><strong>État d'expansion (mobile)</strong> : <code>aria-expanded</code> et icône indicative</li>
+				<li><strong>Indication visuelle</strong> : Changements de couleur au focus et hover</li>
+				<li><strong>Contenu masqué (mobile)</strong> : Liste cachée par défaut, visible à l'ouverture</li>
+			</ul>
+		</CriteriaCard>
+	</CriteriaSection>
 
-<Story of={AccessStories.AccessibilitePanel} />
-<br />
+	<DemoSection componentName="CollapsibleList">
+		<Story of={CollapsibleListStories.Default} />
+	</DemoSection>
+
+	<BestPracticesSection>
+		<ul>
+			<li>Utilisez un titre descriptif pour l'en-tête</li>
+			<li>Assurez-vous que le contenu est pertinent et non redondant</li>
+			<li>Évitez de placer des éléments interactifs complexes dans le contenu</li>
+			<li>Fournissez une alternative non-JavaScript si nécessaire</li>
+		</ul>
+	</BestPracticesSection>
+
+	<ResourcesSection>
+		<ul>
+			<li><a href="https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/" target="_blank" rel="noopener noreferrer">Guide des pratiques d'auteur WAI-ARIA pour les disclosures</a></li>
+			<li><a href="https://inclusive-components.design/collapsible-sections/" target="_blank" rel="noopener noreferrer">Inclusive Components: Collapsible Sections</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>
+		</ul>
+	</ResourcesSection>
+
+<AuditSection>
+		<p>Rapport d'audit manuel : <a href="/audits/CollapsibleList.xlsx" style={{color: '#0C41BD'}}>Voir le rapport</a></p>
+		<p style={{color: 'grey', fontSize: '14px'}}>Correctifs associés (<a href="https://github.com/assurance-maladie-digital/design-system-v3/pull/792" target="_blank" style={{color: '#0C41BD'}}>issue #792</a>)</p>
+	</AuditSection>
+</AccessibilityGuideLayout>

package/src/components/CollapsibleList/tests/CollapsibleList.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 CollapsibleList from '../CollapsibleList.vue'
+import type { ListItem } from '../types'
+
+// Scénario d’accessibilité : liste en mode desktop (non mobile)
+// avec un titre et deux liens, structure UL/LI et focus visible sur les liens.
+
+describe('CollapsibleList – accessibility (axe)', () => {
+	const items: ListItem[] = [
+		{
+			text: 'Mon espace santé',
+			href: 'https://www.ameli.fr/assure/sante/mon-espace-sante',
+		},
+		{
+			text: 'Accomplir les bons gestes',
+			href: 'https://www.ameli.fr/assure/sante/bons-gestes',
+		},
+	]
+
+	it('has no obvious axe violations in desktop mode', async () => {
+		const wrapper = mount(CollapsibleList, {
+			props: {
+				listTitle: 'Santé',
+				items,
+			},
+		})
+
+		const results = await axe(wrapper.element as HTMLElement)
+		assertNoA11yViolations(results, 'CollapsibleList – desktop', {
+			ignoreRules: ['region'],
+		})
+	})
+})

package/src/components/ContextualMenu/ContextualMenu.stories.ts

@@ -223,6 +223,9 @@ export const WithAnchors: Story = {
 		}
 	},
 	parameters: {
+		a11y: {
+			disable: true,
+		},
 		sourceCode: [
 			{
 				name: 'Template',

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

@@ -0,0 +1,30 @@
+// @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 ContextualMenu from '../ContextualMenu.vue'
+import type { MenuItem } from '../types'
+
+// Scénario d’accessibilité : menu contextuel avec deux entrées,
+// structure nav > ul > li > a, avec aria-label fourni.
+
+describe('ContextualMenu – accessibility (axe)', () => {
+	const items: MenuItem[] = [
+		{ text: 'Titre 1', hash: '#example-1' },
+		{ text: 'Titre 2', hash: '#example-2' },
+	]
+
+	it('has no obvious axe violations with default items', async () => {
+		const wrapper = mount(ContextualMenu, {
+			props: {
+				ariaLabel: 'Menu contextuel de test',
+				items,
+			},
+		})
+
+		const results = await axe(wrapper.element as HTMLElement)
+		assertNoA11yViolations(results, 'ContextualMenu – default items')
+	})
+})

package/src/components/CookieBanner/CookieBanner.stories.ts

@@ -258,6 +258,9 @@ export const Default: Story = {
 	},
 
 	parameters: {
+		a11y: {
+			disable: true,
+		},
 		sourceCode: [
 			{
 				name: 'Template',
@@ -353,6 +356,9 @@ export const WithoutCookiesItems: Story = {
 		}
 	},
 	parameters: {
+		a11y: {
+			disable: true,
+		},
 		sourceCode: [
 			{
 				name: 'Template',
@@ -405,6 +411,9 @@ export const BannerDescriptionSlot: Story = {
 		}
 	},
 	parameters: {
+		a11y: {
+			disable: true,
+		},
 		sourceCode: [
 			{
 				name: 'Template',
@@ -511,6 +520,9 @@ export const CookiesDescriptionSlots: Story = {
 		}
 	},
 	parameters: {
+		a11y: {
+			disable: true,
+		},
 		sourceCode: [
 			{
 				name: 'Template',
@@ -607,6 +619,9 @@ export const Customization: Story = {
 		}
 	},
 	parameters: {
+		a11y: {
+			disable: true,
+		},
 		sourceCode: [
 			{
 				name: 'Template',

package/src/components/CookieBanner/CookieBanner.vue

@@ -177,7 +177,6 @@
 			>
 				<div class="d-flex align-start flex-nowrap pa-0 mb-6">
 					<h2
-
 						class="text-h5 font-weight-bold"
 					>
 						{{ locales.title }}

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

@@ -0,0 +1,29 @@
+// @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 CookieBanner from '../CookieBanner.vue'
+
+// Scénario d’accessibilité : bannière de cookies affichée avec son contenu
+// par défaut et ses trois actions (Personnaliser, Refuser, Accepter).
+
+describe('CookieBanner – accessibility (axe)', () => {
+	it('has no obvious axe violations in default state', async () => {
+		const wrapper = mount(CookieBanner, {
+			global: {
+				stubs: {
+					Teleport: true,
+				},
+			},
+		})
+
+		await wrapper.vm.$nextTick()
+
+		const results = await axe(wrapper.element as HTMLElement)
+		assertNoA11yViolations(results, 'CookieBanner – default', {
+			ignoreRules: ['region'],
+		})
+	})
+})

package/src/components/CookiesSelection/CookiesInformation/tests/CookiesInformation.a11y.spec.ts

@@ -0,0 +1,46 @@
+// @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 CookiesInformation from '../CookiesInformation.vue'
+import { locales } from '../locales'
+
+const cookies = [
+	{
+		name: 'session',
+		description: 'Sauvegarde la session pour rester connecté.',
+		conservation: '20 heures',
+	},
+	{
+		name: 'cookie_policy',
+		description: 'Sauvegarde les préférences de cookies.',
+		conservation: '1 an',
+	},
+]
+
+// Scénario d’accessibilité : section d’information sur une catégorie de cookies
+// (par ex. "functional"), avec tableau détaillé et groupe de boutons radio.
+
+describe('CookiesInformation – accessibility (axe)', () => {
+	it('has no obvious axe violations for functional cookies section', async () => {
+		const wrapper = mount(CookiesInformation, {
+			props: {
+				tableItems: cookies,
+				type: 'functional',
+			},
+		})
+
+		// Vérification rapide que le contenu attendu est bien rendu
+		const text = wrapper.text()
+		// Utilisation des locales pour garantir un scénario cohérent
+		if (!text.includes(locales.functional.title))
+			throw new Error('CookiesInformation not rendered as expected')
+
+		const results = await axe(wrapper.element as HTMLElement)
+		assertNoA11yViolations(results, 'CookiesInformation – functional', {
+			ignoreRules: ['region'],
+		})
+	})
+})

package/src/components/CookiesSelection/CookiesTable/tests/CookiesTable.a11y.spec.ts

@@ -0,0 +1,37 @@
+// @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 CookiesTable from '../CookiesTable.vue'
+
+const cookies = [
+	{
+		name: 'session',
+		description: 'Sauvegarde la session pour rester connecté.',
+		conservation: '20 heures',
+	},
+	{
+		name: 'cookie_policy',
+		description: 'Sauvegarde les préférences de cookies.',
+		conservation: '1 an',
+	},
+]
+
+// Scénario d’accessibilité : tableau des cookies avec en-têtes et deux lignes.
+
+describe('CookiesTable – accessibility (axe)', () => {
+	it('has no obvious axe violations with default cookies list', async () => {
+		const wrapper = mount(CookiesTable, {
+			props: {
+				items: cookies,
+			},
+		})
+
+		const results = await axe(wrapper.element as HTMLElement)
+		assertNoA11yViolations(results, 'CookiesTable – default items', {
+			ignoreRules: ['region'],
+		})
+	})
+})

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

@@ -0,0 +1,58 @@
+// @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 CookiesSelection from '../CookiesSelection.vue'
+
+const cookiesList = {
+	essentials: [
+		{
+			name: 'session',
+			description: 'Sauvegarde la session pour rester connecté.',
+			conservation: '20 heures',
+		},
+		{
+			name: 'cookie_policy',
+			description: 'Sauvegarde les préférences de cookies.',
+			conservation: '1 an',
+		},
+	],
+	functional: [
+		{
+			name: 'contrast',
+			description: 'Sauvegarde la personnalisation de l’affichage.',
+			conservation: '1 an',
+		},
+	],
+	analytics: [
+		{
+			name: 'user_id',
+			description: 'Sauvegarde l’identifiant unique de visiteur.',
+			conservation: '6 mois',
+		},
+	],
+}
+
+// Scénario d’accessibilité : formulaire complet de choix des cookies,
+// avec sections fonctionnelles et analytics, et bouton de sauvegarde.
+
+describe('CookiesSelection – accessibility (axe)', () => {
+	it('has no obvious axe violations for full cookie preferences form', async () => {
+		const wrapper = mount(CookiesSelection, {
+			props: {
+				items: cookiesList,
+			},
+		})
+
+		// Laisser le temps aux focus/validations de s’appliquer
+		await wrapper.vm.$nextTick()
+		await wrapper.vm.$nextTick()
+
+		const results = await axe(wrapper.element as HTMLElement)
+		assertNoA11yViolations(results, 'CookiesSelection – full form', {
+			ignoreRules: ['region'],
+		})
+	})
+})

package/src/components/CopyBtn/CopyBtn.stories.ts

@@ -65,6 +65,9 @@ type Story = StoryObj<typeof meta>
 
 export const Default: Story = {
 	parameters: {
+		a11y: {
+			disable: true,
+		},
 		sourceCode: [
 			{
 				name: 'Template',
@@ -140,6 +143,9 @@ export const Default: Story = {
 
 export const NoTooltip: Story = {
 	parameters: {
+		a11y: {
+			disable: true,
+		},
 		sourceCode: [
 			{
 				name: 'Template',
@@ -199,6 +205,9 @@ export const NoTooltip: Story = {
 
 export const SlotIcon: Story = {
 	parameters: {
+		a11y: {
+			disable: true,
+		},
 		sourceCode: [
 			{
 				name: 'Template',
@@ -268,6 +277,9 @@ export const SlotIcon: Story = {
 
 export const RemoveSeparators: Story = {
 	parameters: {
+		a11y: {
+			disable: true,
+		},
 		sourceCode: [
 			{
 				name: 'Template',
@@ -330,6 +342,9 @@ export const RemoveSeparators: Story = {
 
 export const MultiSeparators: Story = {
 	parameters: {
+		a11y: {
+			disable: true,
+		},
 		sourceCode: [
 			{
 				name: 'Template',
@@ -392,6 +407,9 @@ export const MultiSeparators: Story = {
 
 export const RemoveSpaces: Story = {
 	parameters: {
+		a11y: {
+			disable: true,
+		},
 		sourceCode: [
 			{
 				name: 'Template',
@@ -453,6 +471,9 @@ export const RemoveSpaces: Story = {
 
 export const SlotTooltip: Story = {
 	parameters: {
+		a11y: {
+			disable: true,
+		},
 		sourceCode: [
 			{
 				name: 'Template',

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

@@ -0,0 +1,40 @@
+// @vitest-environment jsdom
+
+import { describe, it, beforeEach, afterEach, vi } from 'vitest'
+import { mount } from '@vue/test-utils'
+import { axe } from 'vitest-axe'
+import { assertNoA11yViolations } from '@tests/unit/accessibility/axeUtils'
+import CopyBtn from '../CopyBtn.vue'
+
+// Scénario d’accessibilité : bouton de copie avec aria-label et tooltip,
+// sans interaction (on vérifie la structure initiale).
+
+describe('CopyBtn – accessibility (axe)', () => {
+	beforeEach(() => {
+		const copy = vi.fn()
+		const navigator = {
+			clipboard: {
+				writeText: copy,
+			},
+		} as unknown as Navigator
+
+		vi.spyOn(window, 'navigator', 'get').mockReturnValue(navigator)
+	})
+
+	afterEach(() => {
+		vi.restoreAllMocks()
+	})
+
+	it('has no obvious axe violations in default state', async () => {
+		const wrapper = mount(CopyBtn, {
+			props: {
+				textToCopy: 'Texte à copier',
+			},
+		})
+
+		const results = await axe(wrapper.element as HTMLElement)
+		assertNoA11yViolations(results, 'CopyBtn – default state', {
+			ignoreRules: ['region'],
+		})
+	})
+})

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

@@ -26,7 +26,6 @@ exports[`CopyBtn > renders correctly 1`] = `
     origin="auto"
     scrim="false"
     scrollstrategy="reposition"
-    sticktotarget="false"
     zindex="2000"
   ></v-tooltip-stub>
 </div>