@cnamts/synapse 1.0.21 → 1.0.23

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

@@ -17,6 +17,7 @@ describe('HeaderBar', () => {
 	it('should render the component', async () => {
 		const wrapper = mount(HeaderBar, {
 			props: {
+				headingLevelTitle: 1,
 				sticky: false,
 			},
 			attachTo: document.body,
@@ -121,6 +122,7 @@ describe('HeaderBar', () => {
 	it('should render in sticky mode', async () => {
 		const wrapper = mount(HeaderBar, {
 			props: {
+				headingLevelTitle: 1,
 				sticky: true,
 			},
 			attachTo: document.body,
@@ -150,6 +152,7 @@ describe('HeaderBar', () => {
 		window.happyDOM.setInnerWidth(600)
 		const wrapper = mount(HeaderBar, {
 			props: {
+				headingLevelTitle: 1,
 				hideWhenDown: true,
 			},
 			attachTo: document.body,

package/src/components/HeaderNavigationBar/HeaderNavigationBar.stories.ts

@@ -278,6 +278,7 @@ type Story = StoryObj<typeof meta>
 
 export const Default: Story = {
 	args: {
+		headingLevelTitle: 1,
 		items: [
 			{
 				label: 'Home',
@@ -319,6 +320,7 @@ export const Default: Story = {
 
 export const WithScroll: Story = {
 	args: {
+		headingLevelTitle: 1,
 		items: [
 			{
 				label: 'Home',
@@ -375,6 +377,7 @@ export const WithScroll: Story = {
 
 export const WithManyItems: Story = {
 	args: {
+		headingLevelTitle: 1,
 		items: [
 			{
 				label: 'Home',
@@ -906,6 +909,7 @@ export const WithVuetifyOptions: Story = {
 
 export const WithTabConfirmation: Story = {
 	args: {
+		headingLevelTitle: 1,
 		items: [
 			{ label: 'Home', href: '/home' },
 			{ label: 'Test avec href', href: '/test-avec-href' },

package/src/components/HeaderNavigationBar/HeaderNavigationBar.vue

@@ -41,6 +41,7 @@
 			confirmationMessage?: boolean
 			/** Largeur interne */
 			width?: string
+			headingLevelTitle?: 1 | 2 | 3 | 4 | 5 | 6
 		}>(),
 		{
 			// Confirmation related defaults
@@ -56,6 +57,7 @@
 			maxHorizontalMenuItems: 6,
 			items: undefined,
 			width: '1712px',
+			headingLevelTitle: 1,
 		})
 
 	// Définition des événements émis
@@ -125,6 +127,7 @@
 <template>
 	<HeaderBar
 		:sticky="sticky"
+		:heading-level-title="headingLevelTitle"
 		:hide-when-down="hideWhenDown"
 		:home-aria-label="homeAriaLabel"
 		:service-title="serviceTitle"

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

@@ -26,6 +26,7 @@ describe('HeaderNavigationBar', () => {
 				},
 			},
 			props: {
+				headingLevelTitle: 1,
 				items: [
 					{
 						label: 'Home',
@@ -68,6 +69,7 @@ describe('HeaderNavigationBar', () => {
 				},
 			},
 			props: {
+				headingLevelTitle: 1,
 				items: [
 					{
 						label: 'Home',
@@ -102,6 +104,7 @@ describe('HeaderNavigationBar', () => {
 				},
 			},
 			props: {
+				headingLevelTitle: 1,
 				items: [
 					{
 						label: 'Home',

package/src/components/LogoBrandSection/LogoBrandSection.stories.ts

@@ -5,6 +5,20 @@ const meta = {
 	title: 'Composants/Données/LogoBrandSection',
 	component: LogoBrandSection,
 	argTypes: {
+		'headingLevelTitle': {
+			control: {
+				type: 'select',
+			},
+			options: [1, 2, 3, 4, 5, 6],
+			description: 'Le niveau de titre pour le serviceTitle.',
+		},
+		'headingLevelSubtitle': {
+			control: {
+				type: 'select',
+			},
+			options: [1, 2, 3, 4, 5, 6],
+			description: 'Le niveau de titre pour le serviceSubTitle.',
+		},
 		'theme': {
 			description: 'Applique un preset de style à la section.',
 			control: {
@@ -72,6 +86,8 @@ const meta = {
 	},
 	args: {
 		theme: 'default',
+		headingLevelSubtitle: 2,
+		headingLevelTitle: 1,
 	},
 } satisfies Meta<typeof LogoBrandSection>
 
@@ -81,6 +97,8 @@ type Story = StoryObj<typeof LogoBrandSection>
 
 export const Default: Story = {
 	args: {
+		headingLevelSubtitle: 2,
+		headingLevelTitle: 1,
 		serviceTitle: 'Synapse',
 		serviceSubTitle: 'Documentation du Design System',
 	},
@@ -91,6 +109,8 @@ export const Default: Story = {
 				code: `
 				<template>
 					<LogoBrandSection
+						:heading-level-title="headingLevelTitle"
+						:heading-level-subtitle="headingLevelSubtitle"
 						service-title="Synapse"
 						service-sub-title="Documentation du Design System"
 					/>
@@ -113,6 +133,8 @@ export const WithBrand: Story = {
 	args: {
 		serviceTitle: 'Synapse',
 		serviceSubTitle: ' Documentation du Design System',
+		headingLevelTitle: 1,
+		headingLevelSubtitle: 2,
 	},
 	render: (args) => {
 		return {

package/src/components/LogoBrandSection/LogoBrandSection.vue

@@ -8,6 +8,7 @@
 	import { locales } from './locales'
 	import { secondaryLogoMapping } from './secondaryLogoMapping'
 	import type { Theme } from './types'
+	import SyHeading from '@/components/SyHeading/SyHeading.vue'
 
 	const props = withDefaults(
 		defineProps<{
@@ -21,12 +22,16 @@
 				to?: RouteLocationRaw
 				href?: string
 			}
+			headingLevelTitle?: 1 | 2 | 3 | 4 | 5 | 6
+			headingLevelSubtitle?: 1 | 2 | 3 | 4
 		}>(), {
 			theme: 'default',
 			serviceTitle: undefined,
 			serviceSubTitle: undefined,
 			mobileVersion: false,
 			reduceLogo: false,
+			headingLevelTitle: 1,
+			headingLevelSubtitle: 2,
 			homeLink: () => ({
 				href: '/',
 			}),
@@ -246,12 +251,14 @@
 				class="vd-title-container d-flex justify-center flex-column text-primary"
 			>
 				<slot name="brand-content">
-					<h1
+					<SyHeading
 						v-if="service.title"
 						:class="{
 							'vd-compte-entreprise-title': isCompteEntreprise,
+							'vd-title text-caption text-md-subtitle-1 font-weight-medium': headingLevelTitle === 1,
+							'vd-title text-caption font-weight-medium': headingLevelTitle !== 1,
 						}"
-						class="vd-title text-caption text-md-subtitle-1 font-weight-medium"
+						:level="headingLevelTitle"
 					>
 						<template v-if="typeof service.title === 'string'">
 							<span>
@@ -267,14 +274,15 @@
 								{{ service.title.highlight }}
 							</span>
 						</template>
-					</h1>
+					</SyHeading>
 
-					<h2
+					<SyHeading
 						v-if="showServiceSubTitle"
 						class="vd-title text-caption"
+						:level="headingLevelSubtitle"
 					>
 						{{ service.subTitle }}
-					</h2>
+					</SyHeading>
 				</slot>
 			</div>
 		</slot>

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

@@ -17,6 +17,8 @@ describe('LogoBrandSection – accessibility (axe)', () => {
 				},
 			},
 			props: {
+				headingLevelTitle: 1,
+				headingLevelSubtitle: 2,
 				theme: 'default',
 				serviceTitle: 'Service Title',
 				serviceSubTitle: 'Service Sub Title',

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

@@ -9,6 +9,8 @@ describe('LogoBrandSection', () => {
 			global: {
 				stubs: ['RouterLink', 'Logo'] },
 			props: {
+				headingLevelTitle: 1,
+				headingLevelSubtitle: 2,
 				theme: 'default',
 				serviceTitle: 'Service Title',
 				serviceSubTitle: 'Service Sub Title',
@@ -28,6 +30,8 @@ describe('LogoBrandSection', () => {
 			global: {
 				stubs: ['RouterLink', 'Logo'] },
 			props: {
+				headingLevelTitle: 1,
+				headingLevelSubtitle: 2,
 				theme: 'default',
 				serviceTitle: 'Service Title',
 				serviceSubTitle: 'Service Sub Title',
@@ -42,6 +46,8 @@ describe('LogoBrandSection', () => {
 			global: {
 				stubs: ['RouterLink', 'Logo'] },
 			props: {
+				headingLevelTitle: 1,
+				headingLevelSubtitle: 2,
 				theme: 'compte-entreprise',
 			},
 		})
@@ -54,6 +60,8 @@ describe('LogoBrandSection', () => {
 			global: {
 				stubs: ['RouterLink', 'Logo'] },
 			props: {
+				headingLevelTitle: 1,
+				headingLevelSubtitle: 2,
 				theme: 'default',
 				serviceTitle: 'Service Title',
 				serviceSubTitle: 'Service Sub Title',
@@ -74,6 +82,8 @@ describe('LogoBrandSection', () => {
 			global: {
 				stubs: ['RouterLink', 'Logo'] },
 			props: {
+				headingLevelTitle: 1,
+				headingLevelSubtitle: 2,
 				theme: 'default',
 				serviceTitle: 'Service Title',
 				serviceSubTitle: 'Service Sub Title',
@@ -88,6 +98,8 @@ describe('LogoBrandSection', () => {
 			global: {
 				stubs: ['RouterLink', 'Logo'] },
 			props: {
+				headingLevelTitle: 1,
+				headingLevelSubtitle: 2,
 				theme: 'default',
 				serviceTitle: 'Service Title',
 				serviceSubTitle: '',
@@ -102,6 +114,8 @@ describe('LogoBrandSection', () => {
 			global: {
 				stubs: ['RouterLink', 'Logo'] },
 			props: {
+				headingLevelTitle: 1,
+				headingLevelSubtitle: 2,
 				serviceTitle: 'Service Title',
 				serviceSubTitle: 'Service Sub Title',
 			},
@@ -116,6 +130,8 @@ describe('LogoBrandSection', () => {
 			global: {
 				stubs: ['RouterLink', 'Logo'] },
 			props: {
+				headingLevelTitle: 1,
+				headingLevelSubtitle: 2,
 				theme: 'cnam',
 				serviceTitle: 'Service Title',
 				serviceSubTitle: 'Service Sub Title',
@@ -131,6 +147,8 @@ describe('LogoBrandSection', () => {
 			global: {
 				stubs: ['RouterLink', 'Logo'] },
 			props: {
+				headingLevelTitle: 1,
+				headingLevelSubtitle: 2,
 				theme: 'compte-entreprise',
 				serviceTitle: 'Service Title',
 				serviceSubTitle: 'Service Sub Title',
@@ -146,6 +164,8 @@ describe('LogoBrandSection', () => {
 			global: {
 				stubs: ['RouterLink', 'Logo'] },
 			props: {
+				headingLevelTitle: 1,
+				headingLevelSubtitle: 2,
 				theme: 'risque-pro',
 				reduceLogo: false,
 			},
@@ -160,6 +180,8 @@ describe('LogoBrandSection', () => {
 			global: {
 				stubs: ['RouterLink', 'Logo'] },
 			props: {
+				headingLevelTitle: 1,
+				headingLevelSubtitle: 2,
 				theme: 'risque-pro',
 				reduceLogo: true,
 			},
@@ -173,6 +195,8 @@ describe('LogoBrandSection', () => {
 			global: {
 				stubs: ['RouterLink', 'Logo'] },
 			props: {
+				headingLevelTitle: 1,
+				headingLevelSubtitle: 2,
 				theme: 'compte-entreprise',
 			},
 		})
@@ -185,6 +209,8 @@ describe('LogoBrandSection', () => {
 			global: {
 				stubs: ['RouterLink', 'Logo'] },
 			props: {
+				headingLevelTitle: 1,
+				headingLevelSubtitle: 2,
 				theme: 'compte-ameli',
 				mobileVersion: true,
 			},
@@ -199,6 +225,8 @@ describe('LogoBrandSection', () => {
 			global: {
 				stubs: ['RouterLink', 'Logo'] },
 			props: {
+				headingLevelTitle: 1,
+				headingLevelSubtitle: 2,
 				theme: 'default',
 				reduceLogo: true,
 			},
@@ -212,6 +240,8 @@ describe('LogoBrandSection', () => {
 			global: {
 				stubs: ['RouterLink', 'Logo'] },
 			props: {
+				headingLevelTitle: 1,
+				headingLevelSubtitle: 2,
 				theme: 'default',
 				reduceLogo: false,
 			},
@@ -225,6 +255,8 @@ describe('LogoBrandSection', () => {
 			global: {
 				stubs: ['RouterLink', 'Logo'] },
 			props: {
+				headingLevelTitle: 1,
+				headingLevelSubtitle: 2,
 				theme: 'compte-ameli',
 			},
 		})
@@ -237,6 +269,8 @@ describe('LogoBrandSection', () => {
 			global: {
 				stubs: ['RouterLink', 'Logo'] },
 			props: {
+				headingLevelTitle: 1,
+				headingLevelSubtitle: 2,
 				theme: 'default',
 				homeLink: {
 					href: '#',
@@ -252,6 +286,8 @@ describe('LogoBrandSection', () => {
 			global: {
 				stubs: ['RouterLink', 'Logo'] },
 			props: {
+				headingLevelTitle: 1,
+				headingLevelSubtitle: 2,
 				theme: 'default',
 				homeLink: {
 					to: '/',
@@ -267,6 +303,8 @@ describe('LogoBrandSection', () => {
 			global: {
 				stubs: ['RouterLink', 'Logo'] },
 			props: {
+				headingLevelTitle: 1,
+				headingLevelSubtitle: 2,
 				theme: 'default',
 				homeLink: {
 					href: undefined,
@@ -283,6 +321,8 @@ describe('LogoBrandSection', () => {
 			global: {
 				stubs: ['RouterLink', 'Logo'] },
 			props: {
+				headingLevelTitle: 1,
+				headingLevelSubtitle: 2,
 				theme: 'default',
 			},
 		})
@@ -295,6 +335,8 @@ describe('LogoBrandSection', () => {
 			global: {
 				stubs: ['RouterLink', 'Logo'] },
 			props: {
+				headingLevelTitle: 1,
+				headingLevelSubtitle: 2,
 				theme: 'ameli-pro',
 			},
 		})
@@ -307,6 +349,8 @@ describe('LogoBrandSection', () => {
 			global: {
 				stubs: ['RouterLink', 'Logo'] },
 			props: {
+				headingLevelTitle: 1,
+				headingLevelSubtitle: 2,
 				theme: 'ameli',
 				homeLink: {
 					href: undefined,

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

@@ -44,6 +44,7 @@ exports[`LogoBrandSection > renders correctly 1`] = `
   ">
     <h1 class="
       font-weight-medium
+      sy-heading
       text-caption
       text-md-subtitle-1
       vd-title
@@ -53,6 +54,7 @@ exports[`LogoBrandSection > renders correctly 1`] = `
       </span>
     </h1>
     <h2 class="
+      sy-heading
       text-caption
       vd-title
     ">

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

@@ -1,10 +1,76 @@
-import { Meta, Story } from '@storybook/addon-docs';
-import * as LunarCalendar from '../LunarCalendar.stories';
-import '@/stories/styles/shared.css';
+import { Meta, Primary } from '@storybook/blocks';
+import * as Stories from '../LunarCalendar.stories';
+import AccessibilityIcon from '@/common/imgs/accessibility-svgrepo-com.svg';
+import {
+	AccessibilityGuideLayout,
+	CriteriaSection,
+	CriteriaCard,
+	DemoSection,
+	BestPracticesSection,
+	ResourcesSection,
+} from '@/stories/accessibility/AccessibilityGuideLayout.mdx';
 
-<Meta of={LunarCalendar} />
+<Meta of={Stories}/>
 
-<div className="header">
-  <h1>Accessibilité</h1>
-  <p>Cette page sera bientôt disponible</p>
-</div>
+<AccessibilityGuideLayout
+	componentName="LunarCalendar"
+	iconSrc={AccessibilityIcon}
+	apgHref="https://www.w3.org/WAI/ARIA/apg/patterns/textfield/"
+>
+
+<CriteriaSection>
+
+<CriteriaCard title="Structure sémantique">
+- **Champ de saisie natif** : Utilise un élément `input` de type texte avec masque de formatage
+- **Label associé** : Le label est correctement associé au champ via le composant SyTextField
+- **Masque de saisie** : Le format `JJ/MM/AAAA` est appliqué via la directive `v-maska`
+- **Icônes décoratives** : Les icônes calendrier sont marquées comme décoratives
+</CriteriaCard>
+
+<CriteriaCard title="États et feedback">
+- **Messages d'erreur** : Les erreurs de validation sont annoncées via `aria-describedby`
+- **Messages de succès** : Les confirmations sont également annoncées aux lecteurs d'écran
+- **Champ requis** : L'attribut `required` est correctement appliqué quand nécessaire
+- **Contraintes de dates** : Validation des années min/max avec feedback approprié
+</CriteriaCard>
+
+<CriteriaCard title="Navigation au clavier">
+- **Tabulation** : Navigation au clavier standard via le composant SyTextField
+- **Saisie guidée** : Le masque facilite la saisie en indiquant le format attendu
+- **Effacement** : Support du bouton d'effacement quand `isClearable` est activé
+- **Focus visible** : Indication claire du focus pour les utilisateurs clavier
+</CriteriaCard>
+
+</CriteriaSection>
+
+<DemoSection componentName="LunarCalendar">
+	<Primary />
+</DemoSection>
+
+## Bonnes pratiques
+
+<BestPracticesSection>
+	<ul>
+		<li><strong>Label descriptif</strong> : Utiliser un label qui explique clairement qu'il s'agit d'une date lunaire et indiquer le format attendu JJ/MM/AAAA.</li>
+		<li><strong>Messages clairs</strong> : Fournir des messages d'erreur qui expliquent le format attendu et les contraintes de validité.</li>
+		<li><strong>Contraintes pertinentes</strong> : Définir des plages d'années logiques pour le contexte d'utilisation.</li>
+		<li><strong>Feedback immédiat</strong> : Valider dès la perte du focus pour guider l'utilisateur dans sa saisie.</li>
+		<li><strong>Placeholder utile</strong> : Utiliser JJ/MM/AAAA comme placeholder pour renforcer le format attendu.</li>
+		<li><strong>Icônes appropriées</strong> : Les icônes calendrier aident à identifier visuellement le type de saisie attendue.</li>
+		<li><strong>Effacement facilité</strong> : Activer isClearable pour permettre aux utilisateurs de corriger facilement leur saisie.</li>
+	</ul>
+</BestPracticesSection>
+
+## Ressources
+
+<ResourcesSection>
+	<ul>
+		<li><a href="https://www.w3.org/WAI/ARIA/apg/patterns/textfield/" target="_blank" rel="noopener noreferrer">WAI-ARIA Authoring Practices - Text Input</a></li>
+		<li><a href="https://developer.mozilla.org/fr/docs/Web/HTML/Element/input" target="_blank" rel="noopener noreferrer">MDN Web Docs - input element</a></li>
+		<li><a href="https://developer.mozilla.org/fr/docs/Web/Accessibility/ARIA/Roles/textbox_role" target="_blank" rel="noopener noreferrer">MDN Web Docs - ARIA: textbox role</a></li>
+		<li><a href="https://www.numerique.gouv.fr/publications/rgaa-accessibilite/#critere-118-champs-de-saisie" target="_blank" rel="noopener noreferrer">RGAA - Critère 11.8 - Champs de saisie</a></li>
+		<li><a href="/docs/components-customs-sytextfield--docs" target="_blank" rel="noopener noreferrer">Documentation SyTextField</a></li>
+	</ul>
+</ResourcesSection>
+
+</AccessibilityGuideLayout>

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

@@ -0,0 +1,163 @@
+// @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 LunarCalendar from '../LunarCalendar.vue'
+
+describe('LunarCalendar – accessibility (axe)', () => {
+	it('has no obvious axe violations with default props', async () => {
+		const wrapper = mount(LunarCalendar, {
+			props: {
+				label: 'Date de naissance lunaire',
+			},
+			modelValue: '',
+		})
+
+		const results = await axe(wrapper.element as HTMLElement)
+		assertNoA11yViolations(results, 'LunarCalendar - default props', {
+			ignoreRules: ['region'],
+		})
+	})
+
+	it('has no obvious axe violations with value', async () => {
+		const wrapper = mount(LunarCalendar, {
+			props: {
+				label: 'Date de naissance lunaire',
+			},
+			modelValue: '15/08/2023',
+		})
+
+		const results = await axe(wrapper.element as HTMLElement)
+		assertNoA11yViolations(results, 'LunarCalendar - with value', {
+			ignoreRules: ['region'],
+		})
+	})
+
+	it('has no obvious axe violations with required field', async () => {
+		const wrapper = mount(LunarCalendar, {
+			props: {
+				label: 'Date de naissance lunaire',
+				required: true,
+			},
+			modelValue: '',
+		})
+
+		const results = await axe(wrapper.element as HTMLElement)
+		assertNoA11yViolations(results, 'LunarCalendar - required field', {
+			ignoreRules: ['region'],
+		})
+	})
+
+	it('has no obvious axe violations with error messages', async () => {
+		const wrapper = mount(LunarCalendar, {
+			props: {
+				label: 'Date de naissance lunaire',
+				required: true,
+			},
+			modelValue: 'invalid',
+		})
+
+		// Trigger validation
+		await wrapper.find('input').trigger('blur')
+
+		const results = await axe(wrapper.element as HTMLElement)
+		assertNoA11yViolations(results, 'LunarCalendar - with errors', {
+			ignoreRules: ['region'],
+		})
+	})
+
+	it('has no obvious axe violations with success messages', async () => {
+		const wrapper = mount(LunarCalendar, {
+			props: {
+				label: 'Date de naissance lunaire',
+				successMessages: 'Date valide',
+			},
+			modelValue: '15/08/2023',
+		})
+
+		const results = await axe(wrapper.element as HTMLElement)
+		assertNoA11yViolations(results, 'LunarCalendar - with success messages', {
+			ignoreRules: ['region'],
+		})
+	})
+
+	it('has no obvious axe violations with clearable field', async () => {
+		const wrapper = mount(LunarCalendar, {
+			props: {
+				label: 'Date de naissance lunaire',
+				isClearable: true,
+			},
+			modelValue: '15/08/2023',
+		})
+
+		const results = await axe(wrapper.element as HTMLElement)
+		assertNoA11yViolations(results, 'LunarCalendar - clearable field', {
+			ignoreRules: ['region'],
+		})
+	})
+
+	it('has no obvious axe violations with prepend icon', async () => {
+		const wrapper = mount(LunarCalendar, {
+			props: {
+				label: 'Date de naissance lunaire',
+				displayPrependIcon: true,
+				displayAppendIcon: false,
+			},
+			modelValue: '',
+		})
+
+		const results = await axe(wrapper.element as HTMLElement)
+		assertNoA11yViolations(results, 'LunarCalendar - with prepend icon', {
+			ignoreRules: ['region'],
+		})
+	})
+
+	it('has no obvious axe violations with append icon', async () => {
+		const wrapper = mount(LunarCalendar, {
+			props: {
+				label: 'Date de naissance lunaire',
+				displayPrependIcon: false,
+				displayAppendIcon: true,
+			},
+			modelValue: '',
+		})
+
+		const results = await axe(wrapper.element as HTMLElement)
+		assertNoA11yViolations(results, 'LunarCalendar - with append icon', {
+			ignoreRules: ['region'],
+		})
+	})
+
+	it('has no obvious axe violations with year constraints', async () => {
+		const wrapper = mount(LunarCalendar, {
+			props: {
+				label: 'Date de naissance lunaire',
+				minYear: 1900,
+				maxYear: 2023,
+			},
+			modelValue: '15/08/2023',
+		})
+
+		const results = await axe(wrapper.element as HTMLElement)
+		assertNoA11yViolations(results, 'LunarCalendar - with year constraints', {
+			ignoreRules: ['region'],
+		})
+	})
+
+	it('has no obvious axe violations with placeholder', async () => {
+		const wrapper = mount(LunarCalendar, {
+			props: {
+				label: 'Date de naissance lunaire',
+				placeholder: 'JJ/MM/AAAA',
+			},
+			modelValue: '',
+		})
+
+		const results = await axe(wrapper.element as HTMLElement)
+		assertNoA11yViolations(results, 'LunarCalendar - with placeholder', {
+			ignoreRules: ['region'],
+		})
+	})
+})