@cnamts/synapse 1.0.23 → 1.0.25

package/src/components/Amelipro/AmeliproTextField/AmeliproTextField.vue

@@ -446,8 +446,6 @@
 </template>
 
 <style lang="scss" scoped>
-@use '@/assets/amelipro/apTokens2026' as apTokens;
-
 .amelipro-text-field {
 	& :deep(.v-field__outline) {
 		border-color: v-bind(inputBorderStyle);
@@ -465,25 +463,25 @@
 }
 
 .amelipro-validation-rules {
-	font-size: apTokens.$font-size-xs;
-	color: apTokens.$ap-grey;
+	font-size: var(--v-ap-fontSizeXs);
+	color: rgb(var(--v-theme-ap-grey));
 
 	.amelipro-validation-rule {
 		&.is-valid {
-			color: apTokens.$ap-turquoise-darken1;
+			color: rgb(var(--v-theme-success));
 		}
 	}
 }
 
 .amelipro-text-field__label {
-	font-size: apTokens.$font-size-xs;
-	font-weight: apTokens.$label-font-weight;
+	font-size: var(--v-ap-fontSizeXs);
+	font-weight: var(--v-ap-fontWeightBold);
 }
 
 .v-input {
 	& :deep(.v-field__input) {
-		padding-left: 12px;
-		padding-right: 12px;
+		padding-left: var(--v-padding-3);
+		padding-right: var(--v-padding-3);
 	}
 
 	& :deep(.v-field--disabled) {

package/src/components/Amelipro/AmeliproTileBtn/AmeliproTileBtn.vue

@@ -370,14 +370,12 @@
 </template>
 
 <style lang="scss" scoped>
-@use '@/assets/amelipro/apTokens2026' as apTokens;
-
 .amelipro-tile-btn {
 	position: relative;
 	display: flex;
 	flex-direction: column;
-	background-color: apTokens.$ap-white;
-	border-radius: 0.5rem;
+	background-color: rgb(var(--v-theme-surface));
+	border-radius: var(--v-ap-inputRadius);
 	white-space: normal;
 }
 
@@ -398,7 +396,7 @@
 	}
 
 	&:focus {
-		outline: 1px dotted apTokens.$ap-grey-darken1;
+		outline: 1px dotted rgb(var(--v-theme-ap-grey-darken-1));
 	}
 
 	& :deep(.v-btn__content) {

package/src/components/Amelipro/AmeliproTooltips/AmeliproTooltips.vue

@@ -114,8 +114,6 @@
 </template>
 
 <style lang="scss" scoped>
-@use '@/assets/amelipro/apTokens2026' as apTokens;
-
 .v-btn {
 	&.tooltip-btn {
 		width: 1.85em !important;

package/src/components/Amelipro/AmeliproUpload/AmeliproUpload.vue

@@ -643,14 +643,14 @@
 </template>
 
 <style lang="scss" scoped>
-@use '@/assets/amelipro/apTokens2026' as apTokens;
+@use '@/assets/overrides/breakpoints' as bp;
 
 .amelipro-upload {
-	padding: apTokens.$card-padding-tablet;
-	border-radius: apTokens.$card-radius;
+	padding: var(--v-ap-cardPaddingDesktop);
+	border-radius: var(--v-ap-btnRadius);
 
-	@media #{apTokens.$media-only-xs} {
-		padding: apTokens.$card-padding-mobile;
+	@media #{bp.$down-xs} {
+		padding: var(--v-ap-cardPaddingMobile);
 	}
 }
 
@@ -687,7 +687,7 @@
 	}
 
 	& :deep(.label-outline) {
-		outline: 1px dotted apTokens.$ap-grey-darken1;
+		outline: 1px dotted rgb(var(--v-theme-ap-grey-darken-1));
 	}
 
 	& :deep(.v-input__control) {

package/src/components/Amelipro/ServiceMenu/ServiceMenu.vue

@@ -174,7 +174,7 @@
 </template>
 
 <style lang="scss" scoped>
-@use '@/assets/amelipro/apTokens2026' as apTokens;
+@use '@/assets/overrides/breakpoints' as bp;
 
 :deep(.v-overlay__content) {
 	top: 40px;
@@ -183,7 +183,7 @@
 	z-index: 8;
 	border-radius: 4px;
 
-	@media #{apTokens.$media-up-md} {
+	@media #{bp.$up-md} {
 		left: -800px;
 	}
 }

package/src/components/Amelipro/StructureMenu/StructureBtn/StructureBtn.vue

@@ -52,7 +52,7 @@
 </template>
 
 <style lang="scss" scoped>
-@use '@/assets/amelipro/apTokens2026' as apTokens;
+@use '@/assets/overrides/breakpoints' as bp;
 
 .v-btn {
 	letter-spacing: unset;
@@ -74,10 +74,10 @@
 	}
 
 	&:focus {
-		outline: 1px dotted apTokens.$ap-grey-darken1;
+		outline: 1px dotted rgb(var(--v-theme-ap-grey-darken-1));
 	}
 
-	@media #{apTokens.$media-only-xs} {
+	@media #{bp.$down-xs} {
 		margin-bottom: 8px;
 		width: 100% !important;
 	}
@@ -87,7 +87,7 @@
 	opacity: 1 !important;
 
 	:deep(.v-btn__content) {
-		color: apTokens.$ap-grey !important;
+		color: rgb(var(--v-theme-ap-grey)) !important;
 	}
 }
 </style>

package/src/components/Amelipro/StructureMenu/StructureItem/StructureItem.vue

@@ -107,8 +107,6 @@
 </template>
 
 <style lang="scss" scoped>
-@use '@/assets/amelipro/apTokens2026' as apTokens;
-
 input {
 	position: absolute;
 	width: 0;
@@ -122,17 +120,17 @@ input {
 
 .hover-style {
 	&:hover {
-		background-color: apTokens.$ap-blue-lighten3 !important;
+		background-color: rgb(var(--v-theme-ap-blue-lighten-3)) !important;
 	}
 }
 
 .selected-border {
-	border: 1px solid apTokens.$ap-blue;
+	border: 1px solid rgb(var(--v-theme-ap-blue));
 }
 
 .structure {
-	font-size: apTokens.$font-size-xs;
-	color: apTokens.$ap-grey-darken1;
+	font-size: var(--v-ap-fontSizeXs);
+	color: rgb(var(--v-theme-ap-grey-darken-1));
 
 	.name {
 		font-weight: 600;

package/src/components/Amelipro/StructureMenu/StructureMenu.vue

@@ -227,7 +227,7 @@
 </template>
 
 <style lang="scss" scoped>
-@use '@/assets/amelipro/apTokens2026' as apTokens;
+@use '@/assets/overrides/breakpoints' as bp;
 
 .v-input.amelipro-switch {
 	margin-top: 0;
@@ -237,7 +237,7 @@
 	width: 50% !important;
 	max-width: 50% !important;
 
-	@media #{apTokens.$media-down-md} {
+	@media #{bp.$down-sm} {
 		width: 100% !important;
 		max-width: 100% !important;
 	}

package/src/components/Amelipro/StructureMenu/StructureTabs/StructureTabs.vue

@@ -177,10 +177,10 @@
 </template>
 
 <style lang="scss" scoped>
-@use '@/assets/amelipro/apTokens2026' as apTokens;
+@use '@/assets/overrides/breakpoints' as bp;
 
 .tabs-btn-wrapper {
-	@media #{apTokens.$media-only-xs} {
+	@media #{bp.$down-xs} {
 		width: 100% !important;
 	}
 }

package/src/components/Amelipro/UserMenu/UserMenu.vue

@@ -130,8 +130,6 @@
 </template>
 
 <style lang="scss" scoped>
-@use '@/assets/amelipro/apTokens2026' as apTokens;
-
 .v-btn :deep(.v-btn__content) {
 	opacity: 1 !important;
 }
@@ -154,7 +152,7 @@
 }
 
 .user-menu-last-connexion {
-	font-size: apTokens.$font-size-xs;
+	font-size: var(--v-ap-fontSizeXs);
 }
 
 .user-menu__btn--account,

package/src/components/BackBtn/tests/BackBtn.visual.cy.ts

@@ -0,0 +1,43 @@
+import BackBtn from '../BackBtn.vue'
+
+describe('BackBtn - Visual regression tests', () => {
+	it('displays the btn by default', () => {
+		cy.mountWithVuetify(BackBtn)
+
+		cy.get('.v-btn').should('be.visible')
+		cy.matchImageSnapshot('back-btn-default', cy.get('.v-btn'))
+	})
+
+	it('displays the btn without icon', () => {
+		cy.mountWithVuetify(BackBtn, {
+			props: { hideBackIcon: true },
+		})
+
+		cy.get('.v-btn').should('be.visible')
+		cy.matchImageSnapshot('back-btn-no-icon', cy.get('.v-btn'))
+	})
+
+	it('displays the btn in dark mode', () => {
+		cy.mountWithVuetify(BackBtn, {
+			props: {
+				dark: true,
+			},
+		})
+		cy.get('.v-application').invoke('css', 'background-color', '#121212')
+
+		cy.get('.v-btn').should('be.visible')
+		cy.get('.v-btn').matchImageSnapshot('back-btn-dark-mode', cy.get('.v-btn'))
+		cy.get('.v-application').invoke('css', 'background-color', '')
+	})
+
+	it('displays the btn with custom background', () => {
+		cy.mountWithVuetify(BackBtn, {
+			props: { backgroundColor: '#f5f5f5' },
+		})
+
+		cy.get('.v-btn').should('be.visible')
+		// cy.get('.v-btn').matchImageSnapshot('back-btn-custom-bg')
+		// take a snapshot of the button and not the whole page to avoid snapshotting the background color of the page
+		cy.matchImageSnapshot('back-btn-custom-bg', cy.get('.v-btn'))
+	})
+})

package/src/components/Captcha/Captcha.vue

@@ -300,8 +300,6 @@
 </template>
 
 <style scoped lang="scss">
-@use '@/assets/tokens';
-
 .label-options {
 	font-size: 0.875rem;
 	font-weight: 400;
@@ -310,7 +308,7 @@
 .captcha-audio :deep(.v-btn__content) span {
 	display: flex;
 	align-items: center;
-	gap: tokens.$gap-2;
+	gap: var(--v-gap-2);
 	letter-spacing: 0%;
 }
 

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

@@ -1,10 +1,88 @@
-import { Meta, Story } from '@storybook/addon-docs';
-import * as CaptchaStorie from '../Captcha.stories';
-import '@/stories/styles/shared.css';
+import { Meta, Story } from '@storybook/blocks';
+import * as CaptchaStories from '../Captcha.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={CaptchaStorie} />
+<Meta of={CaptchaStories} />
 
-<div className="header">
-  <h1>Accessibilité</h1>
-  <p>Cette page sera bientôt disponible</p>
-</div>
+<AccessibilityGuideLayout
+	componentName="Captcha"
+	iconSrc={AccessibilityIcon}
+>
+	
+	<CriteriaSection>
+		<CriteriaCard icon="🖼️" title="Images et alternatives textuelles">
+			<ul>
+				<li><strong>Image captcha</strong> : Attribut <code>alt</code> avec <code>locales.captchaImgAlt</code> ("Le captcha à saisir").</li>
+				<li><strong>Skeleton loader</strong> : <code>aria-label</code> avec <code>locales.captchaImgLoading</code> pendant le chargement.</li>
+				<li><strong>Gestion des erreurs</strong> : Émission de l'événement <code>imageError</code> en cas d'échec de chargement.</li>
+			</ul>
+		</CriteriaCard>
+
+		<CriteriaCard icon="🎵" title="Captcha audio et contrôles">
+			<ul>
+				<li><strong>Bouton audio</strong> : <code>aria-label</code> dynamique avec <code>locales.audio.loading</code> pendant le chargement.</li>
+				<li><strong>Icônes décoratives</strong> : <code>aria-hidden="true"</code> sur les icônes volume-up et SyIcon décoratives.</li>
+				<li><strong>États lecture/pause</strong> : Texte alternatif avec <code>locales.pause</code> et <code>locales.play</code>.</li>
+			</ul>
+		</CriteriaCard>
+
+		<CriteriaCard icon="📝" title="Formulaires et champs de saisie">
+			<ul>
+				<li><strong>Champ de saisie</strong> : Utilise <code>SyTextField</code> avec label descriptif selon le type (image/audio).</li>
+				<li><strong>Validation</strong> : Règle personnalisée avec message <code>locales.required</code>.</li>
+				<li><strong>États du champ</strong> : Désactivé si rejeté, readonly si succès, messages d'erreur.</li>
+				<li><strong>Labellisation</strong> : Labels spécifiques avec <code>locales.image.textfieldLabel</code> et <code>locales.audio.textfieldLabel</code>.</li>
+			</ul>
+		</CriteriaCard>
+
+		<CriteriaCard icon="🔄" title="Boutons d'action et navigation">
+			<ul>
+				<li><strong>Texte masqué</strong> : <code>&lt;p class="d-sr-only"&gt;</code> avec <code>locales.renew</code> pour le bouton de renouvellement.</li>
+				<li><strong>Icônes décoratives</strong> : Attribut <code>decorative</code> sur les SyIcon pour ne pas polluer les lecteurs d'écran.</li>
+				<li><strong>Boutons configurables</strong> : Utilisation de <code>CaptchaBtn</code> avec icônes et textes appropriés.</li>
+			</ul>
+		</CriteriaCard>
+
+		<CriteriaCard icon="⚠️" title="Alertes et messages d'erreur">
+			<ul>
+				<li><strong>Composant d'alerte</strong> : Utilise <code>VAlert</code> avec couleur "error" et variant "text".</li>
+				<li><strong>Icône d'erreur</strong> : SyIcon décoratif avec <code>mdiAlertCircleOutline</code>.</li>
+				<li><strong>Cliquabilité</strong> : L'alerte est cliquable pour renouveler le captcha.</li>
+			</ul>
+		</CriteriaCard>
+	</CriteriaSection>
+
+	<DemoSection componentName="Captcha">
+		<Story of={CaptchaStories.Default} />
+	</DemoSection>
+
+	<BestPracticesSection>
+		<ul>
+			<li>Fournissez toujours les URLs requises (<code>urlCreate</code>, <code>urlGetImage</code>, <code>urlGetAudio</code>).</li>
+			<li>Personnalisez les <code>locales</code> pour adapter les messages à votre langue.</li>
+			<li>Configurez un <code>helpDesk</code> approprié pour les utilisateurs en difficulté.</li>
+			<li>Utilisez <code>tagTitle</code> pour un niveau de titre cohérent avec votre page.</li>
+			<li>Gérez les erreurs avec <code>errorMessage</code> pour un feedback clair.</li>
+			<li>Testez les deux modes (image et audio) pour une accessibilité complète.</li>
+		</ul>
+	</BestPracticesSection>
+
+	<ResourcesSection>
+		<ul>
+			<li><a href="https://www.w3.org/WAI/WCAG21/Understanding/non-text-content.html" target="_blank" rel="noopener noreferrer">WCAG : Contenu non textuel</a></li>
+			<li><a href="https://www.w3.org/WAI/WCAG21/Understanding/error-identification.html" target="_blank" rel="noopener noreferrer">WCAG : Identification des erreurs</a></li>
+			<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://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#1.4" target="_blank" rel="noopener noreferrer">RGAA : Captchas</a></li>
+			<li><a href="https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#1.5" target="_blank" rel="noopener noreferrer">RGAA : Solution d’accès alternatif</a></li>
+		</ul>
+	</ResourcesSection>
+</AccessibilityGuideLayout>

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

@@ -117,21 +117,21 @@ exports[`Captcha > renders correctly in audio mode 1`] = `
                     v-field-label
                     v-label
                   "
-                  for="input-v-2"
-                  id="input-v-2-label"
+                  for="input-v-3"
+                  id="input-v-3-label"
                 >
                   <!---->
                   Caractères de l’audio
                 </label>
                 <!---->
                 <input
-                  aria-describedby="input-v-2-messages"
+                  aria-describedby="input-v-3-messages"
                   aria-label="Caractères de l’audio"
-                  aria-labelledby="input-v-2-label"
+                  aria-labelledby="input-v-3-label"
                   autocomplete="off"
                   class="v-field__input"
                   direction="horizontal"
-                  id="input-v-2"
+                  id="input-v-3"
                   title="Caractères de l’audio"
                   type="text"
                 />
@@ -170,7 +170,7 @@ exports[`Captcha > renders correctly in audio mode 1`] = `
               appear="false"
               class="v-messages"
               css="true"
-              id="input-v-2-messages"
+              id="input-v-3-messages"
               name="slide-y-transition"
               persisted="false"
               tag="div"
@@ -459,21 +459,21 @@ exports[`Captcha > renders correctly in image mode 1`] = `
                     v-field-label
                     v-label
                   "
-                  for="input-v-1"
-                  id="input-v-1-label"
+                  for="input-v-2"
+                  id="input-v-2-label"
                 >
                   <!---->
                   Caractères de l’image
                 </label>
                 <!---->
                 <input
-                  aria-describedby="input-v-1-messages"
+                  aria-describedby="input-v-2-messages"
                   aria-label="Caractères de l’image"
-                  aria-labelledby="input-v-1-label"
+                  aria-labelledby="input-v-2-label"
                   autocomplete="off"
                   class="v-field__input"
                   direction="horizontal"
-                  id="input-v-1"
+                  id="input-v-2"
                   title="Caractères de l’image"
                   type="text"
                 />
@@ -512,7 +512,7 @@ exports[`Captcha > renders correctly in image mode 1`] = `
               appear="false"
               class="v-messages"
               css="true"
-              id="input-v-1-messages"
+              id="input-v-2-messages"
               name="slide-y-transition"
               persisted="false"
               tag="div"

package/src/components/ChipList/ChipList.stories.ts

@@ -713,9 +713,6 @@ export const CustomResetText: Story = {
 
 export const WithOverflow: Story = {
 	parameters: {
-		a11y: {
-			disable: true,
-		},
 		sourceCode: [
 			{
 				name: 'Template',
@@ -809,9 +806,6 @@ export const WithOverflow: Story = {
 
 export const WithEvents: Story = {
 	parameters: {
-		a11y: {
-			disable: true,
-		},
 		sourceCode: [
 			{
 				name: 'Template',
@@ -923,9 +917,6 @@ const handleReset = () => {
 
 export const WithPrependStateIcon: Story = {
 	parameters: {
-		a11y: {
-			disable: true,
-		},
 		sourceCode: [
 			{
 				name: 'Template',
@@ -1004,9 +995,6 @@ const items: ChipItem[] = [
 
 export const WithAppendStateIcon: Story = {
 	parameters: {
-		a11y: {
-			disable: true,
-		},
 		sourceCode: [
 			{
 				name: 'Template',
@@ -1085,9 +1073,6 @@ const items: ChipItem[] = [
 
 export const WithCustomIcon: Story = {
 	parameters: {
-		a11y: {
-			disable: true,
-		},
 		sourceCode: [
 			{
 				name: 'Template',

package/src/components/ChipList/ChipList.vue

@@ -245,7 +245,7 @@
 						<SyIcon
 							v-bind="options.icon"
 							:icon="deleteIcon"
-							:color="item.state"
+							:color="item.state || 'white'"
 							decorative
 						/>
 					</VBtn>
@@ -260,7 +260,11 @@
 					v-bind="options.chip"
 					class="overflow-chip text-cyan-darken-40 ma-1"
 					:aria-label="overflowAriaLabel"
+					role="button"
+					tabindex="0"
 					@click="toggleShowAllItems"
+					@keydown.enter.prevent="toggleShowAllItems"
+					@keydown.space.prevent="toggleShowAllItems"
 				>
 					{{ overflowText }}
 				</VChip>
@@ -298,8 +302,6 @@
 </template>
 
 <style lang="scss" scoped>
-@use '@/assets/tokens';
-
 // Styles pour la liste HTML native
 .sy-chip-list ul {
 	list-style: none;
@@ -338,30 +340,30 @@
 }
 
 .sy-chip-success {
-	color: tokens.$colors-text-success !important;
-	border: 1px solid tokens.$colors-border-success !important;
+	color: rgb(var(--v-theme-textSuccess)) !important;
+	border: 1px solid rgb(var(--v-theme-borderSuccess)) !important;
 }
 
 .sy-chip-error {
-	color: tokens.$colors-text-error !important;
-	border: 1px solid tokens.$colors-border-error !important;
+	color: rgb(var(--v-theme-textError)) !important;
+	border: 1px solid rgb(var(--v-theme-borderError)) !important;
 }
 
 .sy-chip-info {
-	color: tokens.$colors-text-info !important;
-	border: 1px solid tokens.$colors-border-info !important;
+	color: rgb(var(--v-theme-textInfo)) !important;
+	border: 1px solid rgb(var(--v-theme-borderInfo)) !important;
 }
 
 .sy-chip-warning {
-	color: tokens.$colors-text-warning !important;
-	border: 1px solid tokens.$colors-border-warning !important;
+	color: rgb(var(--v-theme-textWarning)) !important;
+	border: 1px solid rgb(var(--v-theme-borderWarning)) !important;
 }
 
 .overflow-chip {
 	cursor: pointer;
 
 	&:focus-visible {
-		outline: 2px solid tokens.$primary-base !important;
+		outline: 2px solid rgb(var(--v-theme-primary)) !important;
 		outline-offset: 2px !important;
 	}
 }
@@ -373,27 +375,27 @@
 
 // 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: 2px solid rgb(var(--v-theme-primary)) !important;
 }
 
 // Styles spécifiques pour améliorer le contraste de focus selon le thème du chip
 .sy-chip-success .remove-chip:focus-visible {
-	outline: 2px solid tokens.$colors-border-success !important;
+	outline: 2px solid rgb(var(--v-theme-borderSuccess)) !important;
 	outline-offset: -2px !important;
 }
 
 .sy-chip-info .remove-chip:focus-visible {
-	outline: 2px solid tokens.$colors-border-info !important;
+	outline: 2px solid rgb(var(--v-theme-borderInfo)) !important;
 	outline-offset: -2px !important;
 }
 
 .sy-chip-warning .remove-chip:focus-visible {
-	outline: 2px solid tokens.$colors-border-warning !important;
+	outline: 2px solid rgb(var(--v-theme-borderWarning)) !important;
 	outline-offset: -2px !important;
 }
 
 .sy-chip-error .remove-chip:focus-visible {
-	outline: 2px solid tokens.$colors-border-error !important;
+	outline: 2px solid rgb(var(--v-theme-borderError)) !important;
 	outline-offset: -2px !important;
 }
 </style>