@cnamts/synapse 1.0.23 → 1.0.25

package/src/components/LogoBrandSection/LogoBrandSection.vue

@@ -170,7 +170,7 @@
 		case 'ameli-pro':
 			return cnamLightTheme.secondary
 		case 'compte-entreprise':
-			return '#cd545b'
+			return cnamLightTheme.risquePro
 		default:
 			return cnamLightTheme.primary
 		}
@@ -303,7 +303,7 @@
 		font-weight: 700 !important;
 
 		span {
-			color: #cd545b;
+			color: rgb(var(--v-theme-risquePro));
 		}
 	}
 

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

@@ -1,12 +1,88 @@
-import { Meta, Story } from '@storybook/addon-docs';
-import * as Stories from '../LogoBrandSection.stories.ts';
-import '@/stories/styles/shared.css';
+import { Meta, Story } from '@storybook/blocks';
+import * as LogoBrandSectionStories from '../LogoBrandSection.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={Stories} />
+<Meta of={LogoBrandSectionStories} />
 
-<div className="header">
-  <h1>Accessibilité</h1>
-  <p>Cette page sera bientôt disponible</p>
-</div>
+<AccessibilityGuideLayout
+	componentName="LogoBrandSection"
+	iconSrc={AccessibilityIcon}
+>
+	<AuditSection>
+		<div>Rapport d'audit manuel : <a href="/audits/LogoBrandSection.xlsx" style={{ color: '#0C41BD' }}>Voir le rapport</a></div>
+		<div style={{ color: 'grey', fontSize: '14px', marginTop: '0px' }}>
+			Aucune correction nécessaire.
+		</div>
+	</AuditSection>
+	
+	<CriteriaSection>
+		<CriteriaCard icon="🔗" title="Liens et navigation">
+			<ul>
+				<li><strong>Composant dynamique</strong> : Détecte automatiquement <code>router-link</code>, <code>&lt;a&gt;</code> ou <code>&lt;div&gt;</code> selon <code>homeLink</code>.</li>
+				<li><strong>Label du lien principal</strong> : <code>ariaLabel</code> concaténé avec " Retour vers accueil du site".</li>
+				<li><strong>Label du logo secondaire</strong> : Calculé avec <code>homeLinkPrefix</code> et <code>alt</code> du logo.</li>
+				<li><strong>Lien secondaire</strong> : Uniquement pour les thèmes <code>ameli-pro</code> et <code>ameli</code>.</li>
+			</ul>
+		</CriteriaCard>
 
-<br />
+		<CriteriaCard icon="📝" title="Structure sémantique et titres">
+			<ul>
+				<li><strong>Titre principal</strong> : Utilise <code>SyHeading</code> avec <code>headingLevelTitle</code> (1-6).</li>
+				<li><strong>Sous-titre</strong> : Utilise <code>SyHeading</code> avec <code>headingLevelSubtitle</code> (1-4).</li>
+				<li><strong>Contenu conditionnel</strong> : Affichage du sous-titre uniquement si titre présent et non-mobile.</li>
+				<li><strong>Texte structuré</strong> : Support des titres avec <code>text</code> et <code>highlight</code>.</li>
+			</ul>
+		</CriteriaCard>
+
+		<CriteriaCard icon="🎨" title="Éléments décoratifs et styles">
+			<ul>
+				<li><strong>Séparateur SVG</strong> : <code>focusable="false"</code> et <code>aria-hidden="true"</code>.</li>
+				<li><strong>Couleur du séparateur</strong> : Adaptée selon le thème (secondaire, primaire, #cd545b).</li>
+				<li><strong>Dimensions adaptatives</strong> : Responsive selon <code>mobileVersion</code> et présence logo secondaire.</li>
+				<li><strong>Logo principal</strong> : Props transmises au composant Logo (avatar, taille, signature).</li>
+			</ul>
+		</CriteriaCard>
+
+		<CriteriaCard icon="🖼️" title="Images et logos secondaires">
+			<ul>
+				<li><strong>Logo secondaire</strong> : Balise <code>&lt;img&gt;</code> avec attribut <code>alt</code> descriptif.</li>
+				<li><strong>Mapping des thèmes</strong> : Association automatique du logo selon <code>secondaryLogoMapping</code>.</li>
+				<li><strong>Avatar conditionnel</strong> : Mode avatar si <code>reduceLogo</code> et logo secondaire présent.</li>
+			</ul>
+		</CriteriaCard>
+	</CriteriaSection>
+
+	<DemoSection componentName="LogoBrandSection">
+		<Story of={LogoBrandSectionStories.Default} />
+	</DemoSection>
+
+	<BestPracticesSection>
+		<ul>
+			<li>Fournissez toujours un <code>homeLink.ariaLabel</code> descriptif pour le lien vers l'accueil.</li>
+			<li>Choisissez des niveaux de titres cohérents avec la hiérarchie de votre page.</li>
+			<li>Utilisez <code>mobileVersion</code> pour adapter l'affichage sur petits écrans.</li>
+			<li>Activez <code>reduceLogo</code> dans les espaces contraints ou avec logo secondaire.</li>
+			<li>Vérifiez que les <code>serviceTitle</code> et <code>serviceSubTitle</code> sont pertinents pour le contexte.</li>
+			<li>Testez les différents thèmes pour vous assurer que les contrastes sont maintenus.</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/headings-and-labels.html" target="_blank" rel="noopener noreferrer">WCAG : Titres et étiquettes</a></li>
+			<li><a href="https://www.w3.org/WAI/ARIA/apg/patterns/link/" target="_blank" rel="noopener noreferrer">Guide des pratiques WAI-ARIA : Liens</a></li>
+			<li><a href="https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#9.1" target="_blank" rel="noopener noreferrer">RGAA : Structuration de l'information</a></li>
+			<li><a href="https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#12.6" target="_blank" rel="noopener noreferrer">RGAA : Liens</a></li>
+		</ul>
+	</ResourcesSection>
+</AccessibilityGuideLayout>

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

@@ -1,6 +1,6 @@
 import { describe, expect, it } from 'vitest'
 import LunarCalendar from '../LunarCalendar.vue'
-import { mount } from '@vue/test-utils'
+import { flushPromises, mount } from '@vue/test-utils'
 
 describe('LunarCalendar', () => {
 	it('renders correctly', () => {
@@ -56,6 +56,7 @@ describe('LunarCalendar', () => {
 			const input = wrapper.find('input')
 			await input.setValue('10/19/1995')
 			await input.trigger('blur')
+			await flushPromises()
 
 			expect(wrapper.html()).toContain('L\'année doit être supérieure ou égale à 1996.')
 		})
@@ -72,6 +73,7 @@ describe('LunarCalendar', () => {
 			const input = wrapper.find('input')
 			await input.setValue('10/19/1995')
 			await input.trigger('blur')
+			await flushPromises()
 
 			expect(wrapper.html()).toContain('L\'année doit être inférieure ou égale à 1994.')
 		})

package/src/components/LunarCalendar/useLunarCalendarValidation.ts

@@ -20,13 +20,12 @@ export function useLunarCalendarValidation(
 	)
 
 	const validation = useValidation({
-		customRules: rules.value,
 		showSuccessMessages: successMessage !== undefined,
 		fieldIdentifier: toValue(label),
 	})
 
-	function validateOnSubmit() {
-		const result = validation.validateField(
+	async function validateOnSubmit() {
+		const result = await validation.validateField(
 			modelValue.value,
 			rules.value,
 		)
@@ -36,8 +35,8 @@ export function useLunarCalendarValidation(
 
 	useValidatable(validateOnSubmit, validation.clearValidation)
 
-	function validate() {
-		return validation.validateField(
+	async function validate() {
+		return await validation.validateField(
 			modelValue.value,
 			rules.value,
 		)

package/src/components/MonthPicker/MonthPickerVisual/VisualPickerHeader.vue

@@ -103,7 +103,7 @@
 .visual-picker-header {
 	padding-block: 16px;
 	background-color: rgb(var(--v-theme-primary, '12, 65, 154'));
-	color: #fff;
+	color: rgb(var(--v-theme-textOnDark));
 }
 
 .visual-picker-header__title {

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

@@ -1,4 +1,4 @@
-import { mount } from '@vue/test-utils'
+import { flushPromises, mount } from '@vue/test-utils'
 import { describe, afterEach, expect, it, vi } from 'vitest'
 import MonthPicker from '../MonthPicker.vue'
 import { nextTick } from 'vue'
@@ -1238,6 +1238,7 @@ describe('mounthpicker', () => {
 
 			const yearButton = wrapper.findComponent({ name: 'YearSelector' }).find('.year-2025')
 			await yearButton.trigger('click')
+			await flushPromises()
 
 			expect(wrapper.find('.v-field--error').exists()).toBe(true)
 			expect(wrapper.find('.v-input__details').text()).toBe('The year must be 2026 or later.')

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

@@ -2169,7 +2169,7 @@ exports[`mounthpicker > should open the menu when clicking on the input 1`] = `
   <div class="visual-picker-header">
     <div
       class="visual-picker-header__title"
-      id="v-3-title"
+      id="v-4-title"
     >
       Sélectionner un mois
     </div>
@@ -2439,20 +2439,20 @@ exports[`mounthpicker > should render mounthpicker 1`] = `
                 v-field-label
                 v-label
               "
-              id="input-v-1-label"
+              id="input-v-2-label"
             >
               <!---->
               Début du projet
             </label>
             <!---->
             <input
-              aria-describedby="input-v-1-messages"
+              aria-describedby="input-v-2-messages"
               aria-label="Début du projet"
-              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"
               size="1"
               title="Début du projet"
               type="text"
@@ -2477,7 +2477,7 @@ exports[`mounthpicker > should render mounthpicker 1`] = `
                   v-field-label--floating
                   v-label
                 "
-                for="input-v-1"
+                for="input-v-2"
               >
                 <!---->
                 Début du projet
@@ -2521,7 +2521,7 @@ exports[`mounthpicker > should render mounthpicker 1`] = `
       <div
         aria-live="polite"
         class="v-input__details"
-        id="input-v-1-messages"
+        id="input-v-2-messages"
         role="alert"
       >
         <transition-group-stub

package/src/components/NirField/NirField.stories.ts

@@ -1332,6 +1332,10 @@ export const WithCustomLocale: Story = {
 		required: true,
 		showSuccessMessages: true,
 		customLocale: {
+			numberLabel: 'Numéro de sécurité sociale',
+			keyLabel: 'Clé',
+			numberHint: '',
+			keyHint: '',
 			errorRequiredNumber: 'Veuillez renseigner votre numéro de sécurité sociale (13 caractères).',
 			errorInvalidNumber: 'Format NIR non reconnu, merci de vérifier.',
 			errorRequiredKey: 'La clé (2 chiffres) est requise.',
@@ -1411,7 +1415,7 @@ export const ComplexNirType: Story = {
 		  :required="false"
 		  numberLabel="Numéro de sécurité sociale"
 		  keyLabel="Clé"
-		  :nirType="complexe"
+		  nirType="complexe"
 		  :displayKey="true"
 		 />
     </template>
@@ -1424,7 +1428,7 @@ export const ComplexNirType: Story = {
      	import { NirField } from '@cnamts/synapse'
      	import { ref } from 'vue'
      
-		const value = ref('184027512345674')
+			const value = ref('712125233333340')
 
 		return { value }
 	</script>