@cnamts/synapse 1.0.21 → 1.0.23

package/src/components/FooterBar/FooterBar.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 	import { computed, useSlots } from 'vue'
 	import { type RouteLocationRaw } from 'vue-router'
+	import { useTheme } from 'vuetify'
 
 	import Logo from '@/components/Logo/Logo.vue'
 	import { LogoSize } from '@/components/Logo/LogoSize'
@@ -23,11 +24,13 @@
 		linkItems?: LinkItem[] | null
 		items?: LinkItem[] | null
 		sitemapRoute?: RouteLocationRaw
+		helpRoute?: RouteLocationRaw
 		cguRoute?: RouteLocationRaw
 		cookiesRoute?: RouteLocationRaw
 		legalNoticeRoute?: RouteLocationRaw
 		a11yStatementRoute?: RouteLocationRaw
 		hideSitemapLink?: boolean
+		hideHelpLink?: boolean
 		hideCguLink?: boolean
 		hideCookiesLink?: boolean
 		hideLegalNoticeLink?: boolean
@@ -37,16 +40,20 @@
 		hideSocialMediaLinks?: boolean
 		socialMediaLinks?: SocialMediaLink[]
 		light?: boolean
+		backOffice?: boolean
+		backOfficeText?: string
 	}>(), {
 		a11yCompliance: 'non-compliant',
 		linkItems: null,
 		items: null,
 		sitemapRoute: () => ({ name: 'sitemap' }),
+		helpRoute: () => ({ name: 'help' }),
 		cguRoute: () => ({ name: 'cgu' }),
 		cookiesRoute: () => ({ name: 'cookies' }),
 		legalNoticeRoute: () => ({ name: 'legalNotice' }),
 		a11yStatementRoute: () => ({ name: 'a11yStatement' }),
 		hideSitemapLink: false,
+		hideHelpLink: false,
 		hideCguLink: false,
 		hideCookiesLink: false,
 		hideLegalNoticeLink: false,
@@ -56,6 +63,8 @@
 		hideSocialMediaLinks: false,
 		socialMediaLinks: () => defaultSocialMediaLinks as SocialMediaLink[],
 		light: false,
+		backOffice: false,
+		backOfficeText: undefined,
 	})
 
 	const arrowTopIcon = mdiArrowUp
@@ -63,6 +72,11 @@
 	const slots = useSlots()
 	const display = useDisplay()
 	const options = useCustomizableOptions(config, props)
+	const vuetifyTheme = useTheme()
+
+	const emit = defineEmits<{
+		(e: 'event', item: string): void
+	}>()
 
 	const getLinkComponent = (item: LinkItem): string => {
 		return item.href ? 'a' : 'RouterLink'
@@ -96,7 +110,7 @@
 
 	const footerLinksMapping = computed(() => {
 		if (props.linkItems) {
-			return props.linkItems as LinkItem[]
+			return filterByTheme(props.linkItems as LinkItem[])
 		}
 
 		const linksMapping: LinkItem[] = [
@@ -104,6 +118,13 @@
 				text: locales.sitemapLabel,
 				to: props.sitemapRoute,
 				hidden: props.hideSitemapLink,
+				theme: 'cnam',
+			},
+			{
+				text: locales.HelpLabel,
+				to: props.helpRoute,
+				hidden: props.hideHelpLink,
+				theme: 'ap',
 			},
 			{
 				text: locales.cguLabel,
@@ -114,6 +135,7 @@
 				text: locales.cookiesLabel,
 				to: props.cookiesRoute,
 				hidden: props.hideCookiesLink,
+				theme: 'cnam',
 			},
 			{
 				text: locales.legalNoticeLabel,
@@ -127,9 +149,25 @@
 			},
 		] as LinkItem[]
 
-		return linksMapping.filter(item => !item.hidden)
+		return filterByTheme(linksMapping)
 	})
 
+	function filterByTheme(items: LinkItem[]): LinkItem[] {
+		return items
+			.filter(item => !item.hidden)
+			.filter(item =>
+				!vuetifyTheme.name.value || !item.theme || item.theme === vuetifyTheme.name.value,
+			)
+	}
+
+	const fontStyle = computed(() => ({
+		fontSize: vuetifyTheme.name.value === 'ap' ? '14px' : '',
+	}))
+
+	function emitEvent(item: LinkItem) {
+		emit('event', item.text)
+	}
+
 	defineExpose({
 		logoSize,
 	})
@@ -176,6 +214,7 @@
 
 				<VBtn
 					id="scroll-btn"
+					class="back-to-top"
 					v-bind="options.goTopBtn"
 					:aria-label="locales.goTopBtnLabel"
 					@click="scrollToTop"
@@ -205,7 +244,7 @@
 
 			<ul
 				:class="{ 'py-2 py-sm-0': !extendedMode }"
-				class="vd-footer-bar-links text-sm-center d-flex flex-column flex-sm-row flex-wrap align-start justify-center max-width-none mx-n3 my-n3"
+				class="vd-footer-bar-links text-sm-center d-flex flex-column flex-sm-row flex-wrap align-center justify-center max-width-none mx-n3 my-n3"
 			>
 				<slot name="prepend" />
 
@@ -215,20 +254,31 @@
 				>
 					<component
 						:is="getLinkComponent(item)"
+						v-if="!backOffice"
 						:href="item.href"
 						:to="item.to"
 						:aria-label="item.ariaLabel"
 						:target="item.openInNewTab ? '_blank' : undefined"
 						:rel="item.openInNewTab ? 'noopener noreferrer' : undefined"
 						class="my-3 mx-4"
+						:style="fontStyle"
+						@click="emitEvent(item)"
 					>
 						{{ item.text }}
 					</component>
 				</li>
+				<li
+					v-if="props.backOffice"
+					class="my-3 mx-4"
+					:style="fontStyle"
+				>
+					CNAM - {{ props.backOfficeText }}
+				</li>
 
 				<li
 					v-if="props.version"
-					class="my-3 mx-4"
+					class="my-3 mx-4 version"
+					:style="fontStyle"
 				>
 					{{ locales.versionLabel }} {{ props.version }}
 				</li>
@@ -283,11 +333,19 @@ a {
 			color: rgb(var(--v-theme-primary));
 		}
 
+		a.v-btn {
+			border-radius: var(tokens.$radius-rounded) !important;
+		}
+
 		a.v-btn:hover {
 			background: rgb(0 0 0 / 5%);
 		}
 	}
 
+	.back-to-top {
+		border-radius: var(tokens.$radius-rounded) !important;
+	}
+
 	button.v-btn:hover {
 		background: rgb(0 0 0 / 5%);
 	}
@@ -297,11 +355,7 @@ a {
 	}
 
 	.v-divider {
-		border-color: rgba(tokens.$parma-darken-60, 1);
-	}
-
-	svg.logo {
-		fill: rgb(var(--v-theme-primary));
+		border-color: var(--footer-background);
 	}
 
 	.scroll {
@@ -314,6 +368,10 @@ a {
 	.vd-footer-bar-links li,
 	.vd-footer-bar-links a {
 		color: $white;
+
+		&.version {
+			color: tokens.$neutral-white-alpha;
+		}
 	}
 
 	p,

package/src/components/FooterBar/config.ts

@@ -3,7 +3,7 @@ import type { VariantType, DensityType } from '@/types/vuetifyTypes'
 export const config = {
 	footer: {
 		elevation: 3,
-		color: 'parma-darken60',
+		color: 'var(--footer-background)',
 		height: 'auto',
 	},
 	goTopBtn: {
@@ -11,7 +11,7 @@ export const config = {
 		density: 'compact' as DensityType,
 		icon: 'true',
 		variant: 'text' as VariantType,
-		color: 'parma-darken60',
+		color: 'var(--footer-background)',
 	},
 	goTopBtnIcon: {
 		color: 'white',

package/src/components/FooterBar/locales.ts

@@ -3,6 +3,7 @@ import { A11yComplianceEnum } from './A11yCompliance'
 export const locales = {
 	goTopBtnLabel: 'Retour en haut de la page',
 	sitemapLabel: 'Plan du site',
+	HelpLabel: 'Aide et configuration',
 	cguLabel: 'Conditions générales d’utilisation',
 	cookiesLabel: 'Gestion des cookies',
 	legalNoticeLabel: 'Mentions légales',

package/src/components/FooterBar/tests/FooterBarConfig.spec.ts

@@ -7,7 +7,7 @@ describe('FooterBar config', () => {
 	})
 
 	it('should have correct footer color', () => {
-		expect(config.footer.color).toBe('parma-darken60')
+		expect(config.footer.color).toBe('var(--footer-background)')
 	})
 
 	it('should have correct footer minHeight', () => {

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

@@ -4,7 +4,6 @@ exports[`FooterBar > renders correctly 1`] = `
 <footer
   class="
     align-stretch
-    bg-parma-darken60
     elevation-3
     flex-column
     pa-3
@@ -15,14 +14,17 @@ exports[`FooterBar > renders correctly 1`] = `
     w-100
   "
   role="contentinfo"
-  style="height: auto;"
+  style="
+    background-color: var(--footer-background);
+    height: auto;
+  "
 >
   <div class="container">
     <!-- v-if -->
     <!-- v-if -->
     <!-- v-if -->
     <ul class="
-      align-start
+      align-center
       d-flex
       flex-column
       flex-sm-row
@@ -36,17 +38,6 @@ exports[`FooterBar > renders correctly 1`] = `
       text-sm-center
       vd-footer-bar-links
     ">
-      <li>
-        <routerlink
-          class="
-            mx-4
-            my-3
-          "
-          to="[object Object]"
-        >
-          Plan du site
-        </routerlink>
-      </li>
       <li>
         <routerlink
           class="
@@ -58,17 +49,6 @@ exports[`FooterBar > renders correctly 1`] = `
           Conditions générales d’utilisation
         </routerlink>
       </li>
-      <li>
-        <routerlink
-          class="
-            mx-4
-            my-3
-          "
-          to="[object Object]"
-        >
-          Gestion des cookies
-        </routerlink>
-      </li>
       <li>
         <routerlink
           class="
@@ -92,6 +72,7 @@ exports[`FooterBar > renders correctly 1`] = `
         </routerlink>
       </li>
       <!-- v-if -->
+      <!-- v-if -->
     </ul>
   </div>
 </footer>

package/src/components/FooterBar/types.d.ts

@@ -7,4 +7,5 @@ export interface LinkItem {
 	href?: string
 	ariaLabel?: string
 	openInNewTab?: boolean
+	theme?: string
 }

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

@@ -1,15 +1,68 @@
-import { Meta, Story } from '@storybook/addon-docs';
+import { Meta, Primary } from '@storybook/blocks';
 import * as Stories from '../FranceConnectBtn.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={Stories} />
 
-<div className="header">
-  <h1>Accessibilité</h1>
-</div>
-
-
-<div class="mt-2">
-<p>Rapport d’audit manuel : <a href="/audits/FranceConnectBtn.xlsx" style={{ color:'#0C41BD' }}>Voir le rapport</a></p>
+<AccessibilityGuideLayout
+	componentName="FranceConnectBtn"
+	iconSrc={AccessibilityIcon}
+	apgHref="https://www.w3.org/WAI/ARIA/apg/patterns/button/"
+>
+	<div class="mt-8">
+		<p>Rapport d’audit manuel : <a href="/audits/FranceConnectBtn.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/4005" target="_blank" style={{color:'#0C41BD'}}>issue #4005</a>)</p>
 	</div>
+
+	<CriteriaSection>
+		<CriteriaCard icon="🔍" title="Structure sémantique et attributs">
+			<ul>
+				<li><strong>Liens natifs</strong> : Utilisation de balises <code>&lt;a&gt;</code> pour le bouton principal et le lien d'information, garantissant une sémantique correcte.</li>
+				<li><strong>Labels explicites</strong> : Utilisation de l'attribut <code>aria-label</code> sur les liens pour fournir une description claire aux lecteurs d'écran (ex: "S'identifier avec FranceConnect" ou "S'identifier avec FranceConnect+").</li>
+				<li><strong>SVG masqué</strong> : Le logo SVG complexe est masqué aux technologies d'assistance avec <code>aria-hidden="true"</code> et <code>role="presentation"</code> car l'information est déjà portée par l'attribut <code>aria-label</code> du lien parent.</li>
+				<li><strong>Ouverture de fenêtre</strong> : Le lien externe informe l'utilisateur de l'ouverture d'un nouvel onglet, avec une icône explicitement masquée (<code>decorative=true</code>).</li>
+			</ul>
+		</CriteriaCard>
+
+		<CriteriaCard icon="⌨️" title="Navigation et interaction clavier">
+			<ul>
+				<li><strong>Focus natif</strong> : Les liens sont naturellement accessibles via la touche <kbd>Tab</kbd>.</li>
+				<li><strong>Indicateur de focus</strong> : Un style de focus clair, visible et avec un décalage (<code>outline-offset</code>) est implémenté pour garantir une bonne visibilité lors de la navigation au clavier.</li>
+			</ul>
+		</CriteriaCard>
+
+		<CriteriaCard icon="🎨" title="Styles et contrastes">
+			<ul>
+				<li><strong>Couleurs institutionnelles</strong> : Respect strict des couleurs et contrastes de la charte FranceConnect (Bleu France), garantissant un ratio de contraste suffisant.</li>
+				<li><strong>Adaptation au thème sombre</strong> : Ajustement des couleurs de fond (ex: <code>#8585f6</code>) et de texte en mode sombre pour maintenir la lisibilité et l'accessibilité visuelle.</li>
+			</ul>
+		</CriteriaCard>
+	</CriteriaSection>
+
+	<DemoSection componentName="FranceConnectBtn">
+		<Primary />
+	</DemoSection>
+
+	<BestPracticesSection>
+		<ul>
+			<li><strong>Positionnement</strong> : Placez toujours ce bouton dans un contexte de connexion ou d'authentification.</li>
+			<li><strong>Respect de la charte</strong> : Ne modifiez pas les proportions, les couleurs (en dehors du mode sombre) ou les libellés de ce bouton, car ils sont soumis aux règles strictes de la direction interministérielle du numérique (DINUM).</li>
+			<li>Assurez-vous que le lien <code>href</code> fourni pointe vers la véritable interface de redirection d'authentification.</li>
+		</ul>
+	</BestPracticesSection>
+
+	<ResourcesSection>
+		<ul>
+			<li><a href="https://franceconnect.gouv.fr/partenaires" target="_blank" rel="noopener noreferrer">Documentation et charte FranceConnect</a></li>
+			<li><a href="https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#6.1" target="_blank" rel="noopener noreferrer">RGAA : Liens et navigation</a></li>
+		</ul>
+	</ResourcesSection>
+</AccessibilityGuideLayout>

package/src/components/HeaderBar/HeaderBar.stories.ts

@@ -158,6 +158,18 @@ const meta = {
 				},
 			},
 		},
+		'headingLevelTitle': {
+			control: { type: 'select', options: [1, 2, 3, 4, 5, 6] },
+			description: 'Le niveau de titre pour le titre du service.',
+			table: {
+				type: {
+					summary: '1 | 2 | 3 | 4 | 5 | 6',
+				},
+				defaultValue: {
+					summary: '1',
+				},
+			},
+		},
 	},
 } satisfies Meta<typeof HeaderBar>
 
@@ -167,6 +179,7 @@ type Story = StoryObj<typeof meta>
 
 export const Default: Story = {
 	args: {
+		headingLevelTitle: 1,
 		serviceTitle: 'Synapse',
 		serviceSubtitle: 'Design System',
 	},
@@ -184,6 +197,7 @@ export const Default: Story = {
 					<HeaderBar
 						service-title="Synapse"
 						service-subtitle="Design System"
+						:heading-level-title="1"
 					/>
 				</template>
 				`,
@@ -202,6 +216,7 @@ export const Default: Story = {
 
 export const WithRightMenu: Story = {
 	args: {
+		headingLevelTitle: 1,
 		serviceTitle: 'Synapse',
 		serviceSubtitle: 'Design System',
 	},
@@ -309,6 +324,7 @@ export const WithRightMenu: Story = {
 
 export const CustomLogo: Story = {
 	args: {
+		headingLevelTitle: 1,
 		serviceTitle: 'Synapse',
 		serviceSubtitle: 'Design System',
 		sticky: false,
@@ -446,7 +462,7 @@ export const CustomLogo: Story = {
 }
 
 export const CustomBrand: Story = {
-	args: {},
+	args: { headingLevelTitle: 1 },
 	render: (args) => {
 		return {
 			components: { HeaderBar },
@@ -500,6 +516,7 @@ export const CustomBrand: Story = {
 
 export const Sticky: Story = {
 	args: {
+		headingLevelTitle: 1,
 		serviceTitle: 'Synapse',
 		serviceSubtitle: 'Design System',
 	},
@@ -543,6 +560,7 @@ export const Sticky: Story = {
 
 export const WithHeaderToolbar: Story = {
 	args: {
+		headingLevelTitle: 1,
 		serviceTitle: 'Synapse',
 		serviceSubtitle: 'Design System',
 	},
@@ -598,6 +616,7 @@ export const WithHeaderToolbar: Story = {
 
 export const WithSubHeader: Story = {
 	args: {
+		headingLevelTitle: 1,
 		serviceTitle: 'Synapse',
 		serviceSubtitle: 'Design System',
 	},
@@ -657,6 +676,7 @@ export const WithSubHeader: Story = {
 
 export const DefaultSlot: Story = {
 	args: {
+		headingLevelTitle: 1,
 		serviceTitle: 'Synapse',
 		serviceSubtitle: 'Design System',
 	},
@@ -722,6 +742,7 @@ export const DefaultSlot: Story = {
 
 export const PrependSlot: Story = {
 	args: {
+		headingLevelTitle: 1,
 		serviceTitle: 'Synapse',
 		serviceSubtitle: 'Design System',
 	},
@@ -776,6 +797,7 @@ export const PrependSlot: Story = {
 
 export const AppendSlot: Story = {
 	args: {
+		headingLevelTitle: 1,
 		serviceTitle: 'Synapse',
 		serviceSubtitle: 'Design System',
 	},

package/src/components/HeaderBar/HeaderBar.vue

@@ -23,6 +23,7 @@
 			to?: RouteLocationRaw
 			href?: string
 		}
+		headingLevelTitle?: 1 | 2 | 3 | 4 | 5 | 6
 	}
 
 	defineSlots<{
@@ -57,6 +58,7 @@
 			serviceSubtitle: undefined,
 			homeLink: undefined,
 			width: '1712px',
+			headingLevelTitle: 1,
 		})
 
 	function registerHeaderMenu(childMenuStatus: DeepReadonly<Ref<boolean>>) {
@@ -188,11 +190,13 @@
 							:home-aria-label
 							:service-title
 							:service-subtitle
+							:heading-level-title="headingLevelTitle"
 						>
 							<HeaderLogo
 								:aria-label="homeAriaLabel"
 								:service-title="serviceTitle"
 								:service-subtitle="serviceSubtitle"
+								:heading-level-title="headingLevelTitle"
 								:home-link
 							>
 								<template
@@ -205,6 +209,7 @@
 										:service-title
 										:service-subtitle
 										:home-link
+										:heading-level-title="headingLevelTitle"
 									/>
 								</template>
 							</HeaderLogo>

package/src/components/HeaderBar/HeaderLogo/HeaderLogo.vue

@@ -6,6 +6,7 @@
 	import { locales } from './locales'
 	import LogoMobile from './logos/Logo-mobile.vue'
 	import Logo from './logos/Logo.vue'
+	import SyHeading from '@/components/SyHeading/SyHeading.vue'
 
 	const props = withDefaults(defineProps<{
 		ariaLabel?: string
@@ -16,6 +17,7 @@
 			to?: RouteLocationRaw
 			href?: string
 		}
+		headingLevelTitle?: 1 | 2 | 3 | 4 | 5 | 6
 	}>(), {
 		ariaLabel: locales.ariaLabel,
 		serviceTitle: undefined,
@@ -23,6 +25,7 @@
 		homeLink: () => ({
 			href: '/',
 		}),
+		headingLevelTitle: 1,
 	})
 
 	defineSlots<{
@@ -87,9 +90,12 @@
 			</svg>
 
 			<div v-if="serviceTitle">
-				<h1 class="service-title">
+				<SyHeading
+					class="service-title"
+					:level="headingLevelTitle"
+				>
 					{{ serviceTitle }}
-				</h1>
+				</SyHeading>
 				<div
 					v-if="serviceSubtitle"
 					class="service-subtitle"

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

@@ -52,6 +52,7 @@ describe('HeaderLogo', () => {
 	it('sould display the service and the logo aria-label', async () => {
 		const wrapper = mount(HeaderLogo, {
 			props: {
+				headingLevelTitle: 2,
 				ariaLabel: 'Test aria label',
 				serviceTitle: 'Test service title',
 				serviceSubtitle: 'Test service subtitle',
@@ -68,6 +69,7 @@ describe('HeaderLogo', () => {
 	it('should render only the serviceTitle slot when set', async () => {
 		const wrapper = mount(HeaderLogo, {
 			props: {
+				headingLevelTitle: 2,
 				serviceTitle: 'Test service title',
 			},
 			slots: {
@@ -86,6 +88,7 @@ describe('HeaderLogo', () => {
 			global: {
 				stubs: ['RouterLink'] },
 			props: {
+				headingLevelTitle: 2,
 				homeLink: {
 					to: '/',
 				},
@@ -99,6 +102,7 @@ describe('HeaderLogo', () => {
 	it('render a div when there there is no `RouterLink` component registered', async () => {
 		const wrapper = mount(HeaderLogo, {
 			props: {
+				headingLevelTitle: 2,
 				homeLink: {
 					to: '/',
 				},
@@ -111,6 +115,7 @@ describe('HeaderLogo', () => {
 	it('render a div when the homeLink properties `to` and `href` are both set to `undefined`', async () => {
 		const wrapper = mount(HeaderLogo, {
 			props: {
+				headingLevelTitle: 2,
 				homeLink: {
 					to: undefined,
 					href: undefined,

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

@@ -1,15 +1,34 @@
 import { Meta, Story } from '@storybook/blocks'
 import * as HeaderBarStories from '../HeaderBar.stories';
 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={HeaderBarStories}/>
 
-<div className="header">
-  <h1>Accessibilité</h1>
-</div>
-
 
-<div class="mt-2">
+<AccessibilityGuideLayout
+	componentName="HeaderBar"
+	iconSrc={AccessibilityIcon}
+>
+		<div class="mt-6">
 <p>Rapport d’audit manuel : <a href="/audits/HeaderBar.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/643" target="_blank" style={{color:'#0C41BD'}}>issue #643</a>)</p>
 </div>
+<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 h2, défini dans l’implémentation du composant.</li>
+      <code>&lt;HeaderBar
+          :heading-level="2" /&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>
+</AccessibilityGuideLayout>

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

@@ -16,6 +16,7 @@ describe('HeaderBar – accessibility (axe)', () => {
 	it('has no obvious axe violations with sticky header and logo', async () => {
 		const wrapper = mount(HeaderBar, {
 			props: {
+				headingLevelTitle: 1,
 				sticky: true,
 				serviceTitle: 'Synapse',
 				serviceSubtitle: 'Design System',