@cnamts/synapse 1.0.21 → 1.0.22

package/src/components/StatusPage/StatusPage.mdx

@@ -15,8 +15,17 @@ import * as StatusPageStories from './StatusPage.stories'
 
 <Controls of={StatusPageStories.Default} />
 
+## Rôle et identifiant ARIA
+
+Les props `role` et `unique-id` permettent de préciser le rôle sémantique du composant et de lier le titre au conteneur via `aria-labelledby`.
+
+Lorsque `role` est défini, l'attribut `aria-labelledby` est automatiquement appliqué sur le `PageContainer` en pointant vers le `h1`.
+
+<Canvas of={StatusPageStories.WithRole} />
+
 ## Lien de retour
 
-Vous pouvez mettre un lien vers une autre page avec les props `btn-text` et `btn-link` ou `btn-href`.
+Vous pouvez mettre un lien vers une autre page avec les props `btn-text` et `btn-link` ou `btn-href`.<br/>
+L'événement `btn-click` est émis lorsque l'utilisateur clique sur le bouton.
 
 <Canvas of={StatusPageStories.WithLink} />

package/src/components/StatusPage/StatusPage.stories.ts

@@ -8,6 +8,10 @@ const meta = {
 		layout: 'fullscreen',
 	},
 	argTypes: {
+		'headingLevel': {
+			control: { type: 'select' },
+			options: [1, 2, 3, 4, 5, 6],
+		},
 		'code': {
 			description: 'Code d\'erreur affiché en premier plan',
 		},
@@ -58,6 +62,7 @@ type Story = StoryObj<typeof StatusPage>
 
 export const Default: Story = {
 	args: {
+		headingLevel: 1,
 		pageTitle: 'une erreur est survenue',
 		code: '500',
 		message: 'Une erreur est survenue de notre côté, veuillez réessayer plus tard. Si le problème persiste veuillez nous contacter par téléphone au 3646',
@@ -96,6 +101,7 @@ export const Default: Story = {
 export const WithLink: Story = {
 	args: {
 		...Default.args,
+		headingLevel: 1,
 		btnHref: '/',
 		btnText: 'Retour à l\'accueil',
 	},
@@ -137,6 +143,7 @@ export const CustomIllustration: Story = {
 		...Default.args,
 		btnHref: '/',
 		btnText: 'Retour à l\'accueil',
+		headingLevel: 1,
 	},
 	parameters: {
 		sourceCode: [
@@ -191,3 +198,39 @@ export const CustomIllustration: Story = {
 		`,
 	}),
 }
+
+export const WithRole: Story = {
+	args: {
+		pageTitle: 'Une erreur est survenue',
+		message: 'Veuillez réessayer ultérieurement.',
+		code: '500',
+		role: 'main',
+		uniqueId: 'status-page-main',
+	},
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `
+				<template>
+					<StatusPage
+						page-title="Une erreur est survenue"
+						message="Veuillez réessayer ultérieurement."
+						code="500"
+						role="main"
+						unique-id="status-page-main"
+					/>
+				</template>
+				`,
+			},
+			{
+				name: 'Script',
+				code: `
+				<script setup lang="ts">
+					import { StatusPage } from '@cnamts/synapse'
+				</script>
+				`,
+			},
+		],
+	},
+}

package/src/components/StatusPage/StatusPage.vue

@@ -1,6 +1,9 @@
 <script setup lang="ts">
 	import type { RouteRecordRaw } from 'vue-router'
 	import PageContainer from '../PageContainer/PageContainer.vue'
+	import { useId } from 'vue'
+	import type { PageAriaRole } from '../types'
+	import SyHeading from '../SyHeading/SyHeading.vue'
 
 	type MessagePart =
 		| { type: 'text', value: string }
@@ -52,6 +55,9 @@
 		btnHref?: string
 		btnLink?: RouteRecordRaw | string
 		hideBtn?: boolean
+		uniqueId?: string
+		role?: PageAriaRole
+		headingLevel?: 1 | 2 | 3 | 4 | 5 | 6
 	}>(), {
 		pageTitle: undefined,
 		message: undefined,
@@ -61,11 +67,24 @@
 		btnLink: '/',
 		btnHref: undefined,
 		hideBtn: false,
+		uniqueId: useId(),
+		role: undefined,
+		headingLevel: 1,
 	})
+
+	const emit = defineEmits(['btn-click'])
+	const emitClickEvent = (): void => {
+		emit('btn-click')
+	}
 </script>
 
 <template>
-	<PageContainer size="md">
+	<PageContainer
+		size="md"
+		:unique-id="uniqueId"
+		:role="role"
+		:aria-labelledby="role ? `${uniqueId}-title` : undefined"
+	>
 		<VCard
 			:elevation="0"
 			class="pa-6 pa-sm-16"
@@ -84,12 +103,14 @@
 						{{ code }}
 					</div>
 
-					<h1
+					<SyHeading
 						v-if="pageTitle"
-						class="mb-2 font-weight-bold text-h5 mb-4"
+						:id="role ? `${uniqueId}-title` : undefined"
+						:class="headingLevel === 1 ? 'mb-2 font-weight-bold text-h5 mb-4' : 'mb-2 font-weight-bold mb-4'"
+						:level="headingLevel"
 					>
 						{{ pageTitle }}
-					</h1>
+					</SyHeading>
 
 					<p v-if="message">
 						<template
@@ -117,6 +138,7 @@
 							:href="btnHref"
 							color="primary"
 							class="mt-6"
+							@click="emitClickEvent"
 						>
 							{{ btnText }}
 						</VBtn>

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

@@ -18,14 +18,19 @@ import {
 >
 
     <CriteriaSection>
+    		<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 h1, défini dans l’implémentation du composant.</li>
+      <code>&lt;StatusPage
+          :heading-level="1" /&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>
         <CriteriaCard icon="🔍" title="Structure sémantique">
             <ul>
-                <li><strong>Titre de page</strong> : le titre est rendu dans une balise <code>h1</code>, unique et descriptif</li>
+                <li><strong>Titre de page</strong> : le titre est rendu dans une balise <code>h1</code>, unique et descriptif — lié au conteneur via <code>aria-labelledby</code> lorsque <code>role</code> est défini</li>
                 <li><strong>Code d'erreur</strong> : le code (ex. <code>500</code>, <code>404</code>) est précédé du texte masqué visuellement <code>codeErrorText</code> (par défaut <em>"Code d'erreur : "</em>) pour les lecteurs d'écran</li>
-                <li><strong>Rôles ARIA hérités</strong> via <code>PageContainer</code> :</li>
-                <ul>
-                    <li>exemple : <code>role="main"</code> représente le contenu principal de la page</li>
-                </ul>
             </ul>
         </CriteriaCard>
 
@@ -52,12 +57,24 @@ import {
                 <li><strong>Slot <code>action</code></strong> : permet d'ajouter des actions supplémentaires accessibles au clavier</li>
             </ul>
         </CriteriaCard>
+
+        <CriteriaCard icon="🏷️" title="Rôle et identifiant ARIA">
+            <ul>
+                <li><strong>Prop <code>role</code></strong> : deux valeurs acceptées: <code>main</code> ou <code>region</code> — propagé au <code>PageContainer</code></li>
+                <li><strong>Prop <code>uniqueId</code></strong> : identifiant unique du conteneur, généré automatiquement via <code>useId()</code> si non fourni — utilisé pour lier le <code>h1</code> au conteneur via <code>aria-labelledby</code> lorsque <code>role</code> est défini</li>
+                <li><strong>Liaison automatique</strong> : quand <code>role</code> est défini, <code>aria-labelledby</code> est automatiquement appliqué sur le <code>PageContainer</code> et l'<code>id</code> correspondant sur le <code>h1</code></li>
+            </ul>
+        </CriteriaCard>
     </CriteriaSection>
 
     <DemoSection title="Avec illustration personnalisée" componentName="StatusPage">
         <Story of={StatusPageStories.CustomIllustration} />
     </DemoSection>
 
+    <DemoSection title="Avec rôle défini" componentName="StatusPage">
+        <Story of={StatusPageStories.WithRole} />
+    </DemoSection>
+
     <BestPracticesSection>
         <ul>
             <li>Toujours renseigner <code>page-title</code> avec un titre clair et unique décrivant l'erreur</li>
@@ -66,6 +83,8 @@ import {
             <li>Ne pas masquer le bouton (<code>hide-btn</code>) sans proposer une alternative de navigation claire</li>
             <li>Les illustrations doivent toujours être décoratives (<code>aria-hidden="true"</code>) — ne jamais y placer d'information essentielle</li>
             <li>Le contenu dans <code>additional-content</code> doit être lisible par les lecteurs d'écran : éviter le contenu purement visuel</li>
+            <li>Utiliser la prop <code>role</code> pour définir le rôle ARIA approprié au contexte</li>
+            <li>Fournir un <code>uniqueId</code> explicite si nécessaire pour garantir une liaison correcte entre le conteneur et le titre</li>
         </ul>
     </BestPracticesSection>
 

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

@@ -13,6 +13,7 @@ describe('StatusPage – accessibility (axe)', () => {
 	it('has no obvious axe violations with title, message and action button', async () => {
 		const wrapper = mount(StatusPage, {
 			props: {
+				headingLevel: 1,
 				pageTitle: 'Une erreur est survenue',
 				message: 'Un problème technique est survenu. Merci de réessayer plus tard.',
 				code: '500',

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

@@ -6,6 +6,7 @@ describe('StatusPage', () => {
 	it('renders correctly', () => {
 		const wrapper = mount(StatusPage, {
 			props: {
+				headingLevel: 1,
 				pageTitle: 'Something went wrong',
 				message: 'Error message',
 			},
@@ -19,6 +20,7 @@ describe('StatusPage', () => {
 	it('renders correctly with undefined route', () => {
 		const wrapper = mount(StatusPage, {
 			props: {
+				headingLevel: 1,
 				code: '501',
 				pageTitle: 'Error',
 				message: 'Error message',
@@ -34,6 +36,7 @@ describe('StatusPage', () => {
 	it('uses href without router navigation when only btnHref is provided', () => {
 		const wrapper = mount(StatusPage, {
 			props: {
+				headingLevel: 1,
 				code: '401',
 				pageTitle: 'Auth error',
 				message: 'You are not authorized',

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

@@ -98,6 +98,7 @@ exports[`StatusPage > renders correctly 1`] = `
             font-weight-bold
             mb-2
             mb-4
+            sy-heading
             text-h5
           ">
             Something went wrong
@@ -226,6 +227,7 @@ exports[`StatusPage > renders correctly with undefined route 1`] = `
             font-weight-bold
             mb-2
             mb-4
+            sy-heading
             text-h5
           ">
             Error

package/src/components/SubHeader/SubHeader.stories.ts

@@ -11,6 +11,10 @@ const meta = {
 		layout: 'fullscreen',
 	},
 	argTypes: {
+		'headingLevel': {
+			control: { type: 'select' },
+			options: [1, 2, 3, 4, 5, 6],
+		},
 		'hideBackBtn': {
 			type: 'boolean',
 			control: { type: 'boolean' },
@@ -160,6 +164,7 @@ export const Default: Story = {
 		],
 	},
 	args: {
+		'headingLevel': 2,
 		'backBtnText': 'Retour',
 		'hideBackBtn': false,
 		'titleText': 'Paul Dupont',
@@ -222,6 +227,7 @@ export const BackgroundCustom: Story = {
 		],
 	},
 	args: {
+		headingLevel: 2,
 		backBtnText: 'Retour',
 		hideBackBtn: false,
 		titleText: 'Paul Dupont',
@@ -303,6 +309,7 @@ export const DataList: Story = {
 		],
 	},
 	args: {
+		headingLevel: 2,
 		backBtnText: 'Retour',
 		hideBackBtn: false,
 		titleText: 'Paul Dupont',
@@ -399,6 +406,7 @@ export const DataListFixedHeight: Story = {
 		],
 	},
 	args: {
+		headingLevel: 2,
 		backBtnText: 'Retour',
 		hideBackBtn: false,
 		titleText: 'Paul Dupont',
@@ -503,6 +511,7 @@ export const ActionBtn: Story = {
 		],
 	},
 	args: {
+		headingLevel: 2,
 		backBtnText: 'Retour',
 		hideBackBtn: false,
 		titleText: 'Paul Dupont',
@@ -718,6 +727,7 @@ export const Loading: Story = {
 		],
 	},
 	args: {
+		headingLevel: 2,
 		backBtnText: 'Retour',
 		hideBackBtn: false,
 		titleText: 'Paul Dupont',
@@ -803,6 +813,7 @@ export const SlotAdditionalInformations: Story = {
 		],
 	},
 	args: {
+		'headingLevel': 2,
 		'backBtnText': 'Retour',
 		'hideBackBtn': false,
 		'titleText': 'Paul Dupont',
@@ -898,6 +909,7 @@ export const SlotBackBtn: Story = {
 		'subTitleText': '1 69 08 75 125 456 75',
 		'subTitleAccessibleName': 'Numéro de sécurité sociale de Paul Dupont : 1 69 08 75 125 456 75',
 		'loading': false,
+		'headingLevel': 2,
 		'back-btn': `<template #back-btn>
 	<VBtn
 		color="white"
@@ -970,6 +982,7 @@ export const SlotBackBtnIcon: Story = {
 		],
 	},
 	args: {
+		'headingLevel': 2,
 		'backBtnText': 'Retour',
 		'hideBackBtn': false,
 		'titleText': 'Paul Dupont',
@@ -1037,6 +1050,7 @@ export const SlotTitle: Story = {
 		],
 	},
 	args: {
+		headingLevel: 2,
 		backBtnText: 'Retour',
 		hideBackBtn: false,
 		titleText: 'Paul Dupont',
@@ -1102,6 +1116,7 @@ export const SlotSubTitle: Story = {
 		],
 	},
 	args: {
+		'headingLevel': 2,
 		'backBtnText': 'Retour',
 		'hideBackBtn': false,
 		'titleText': 'Paul Dupont',
@@ -1171,6 +1186,7 @@ export const SlotRightContent: Story = {
 		],
 	},
 	args: {
+		'headingLevel': 2,
 		'backBtnText': 'Retour',
 		'hideBackBtn': false,
 		'titleText': 'Paul Dupont',

package/src/components/SubHeader/SubHeader.vue

@@ -13,6 +13,7 @@
 	import HeaderLoading from '../HeaderLoading/HeaderLoading.vue'
 	import type { DataListActionEvent, DataListGroupItems } from '../DataListGroup/types'
 	import { VThemeProvider } from 'vuetify/components'
+	import SyHeading from '@/components/SyHeading/SyHeading.vue'
 
 	const props = withDefaults(defineProps<CustomizableOptions & Widthable & {
 		hideBackBtn?: boolean
@@ -25,6 +26,7 @@
 		dataListGroupItems?: DataListGroupItems | undefined
 		loading?: boolean
 		renderFixedHeight?: boolean
+		headingLevel?: 1 | 2 | 3 | 4 | 5 | 6
 	}>(), {
 		hideBackBtn: false,
 		backBtnText: locales.backBtnText,
@@ -36,6 +38,7 @@
 		dataListGroupItems: undefined,
 		loading: false,
 		renderFixedHeight: false,
+		headingLevel: 1,
 	})
 
 	const options = useCustomizableOptions(config, props)
@@ -118,13 +121,14 @@
 								theme="dark"
 								height="2rem"
 							/>
-							<h2
+							<SyHeading
 								v-else-if="titleText"
 								class="text-h5 font-weight-bold"
 								:aria-label="titleAccessibleName"
+								:level="headingLevel"
 							>
 								{{ titleText }}
-							</h2>
+							</SyHeading>
 						</VFadeTransition>
 					</slot>
 
@@ -230,5 +234,4 @@
 		background-color: #e6e6e6 !important;
 	}
 }
-
 </style>

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

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

package/src/components/SyAlert/SyAlert.vue

@@ -119,6 +119,7 @@
 
 <style lang="scss" scoped>
 @use '@/assets/tokens';
+@use '@/assets/apTokens';
 @use 'sass:map';
 
 .sy-alert {
@@ -256,41 +257,41 @@
 	@include redesign(
 		'warning',
 		(
-			'background': tokens.$colors-background-warning,
-			'accent': tokens.$colors-border-warning,
-			'border': tokens.$colors-border-warning,
-			'icon':tokens.$colors-icon-warning,
-			'icon-bg': tokens.$colors-background-warning-subdued,
+			'background': var(--alert-warning-background),
+			'accent': var(--alert-warning-accent),
+			'border': var(--alert-warning-border),
+			'icon':var(--alert-warning-icon),
+			'icon-bg': var(--alert-warning-icon-bg),
 		)
 	);
 	@include redesign(
 		'success',
 		(
-			'background': tokens.$colors-background-success,
-			'accent': tokens.$colors-border-success,
-			'border': tokens.$colors-border-success,
-			'icon':tokens.$colors-icon-success,
-			'icon-bg': tokens.$colors-background-success-subdued,
+			'background': var(--alert-success-background),
+			'accent': var(--alert-success-accent),
+			'border': var(--alert-success-border),
+			'icon':var(--alert-success-icon),
+			'icon-bg': var(--alert-success-icon-bg),
 		)
 	);
 	@include redesign(
 		'error',
 		(
-			'background': tokens.$colors-background-error,
-			'accent': tokens.$colors-border-error,
-			'border': tokens.$colors-border-error,
-			'icon':tokens.$colors-icon-error,
-			'icon-bg': tokens.$colors-background-error-subdued,
+			'background': var(--alert-error-background),
+			'accent': var(--alert-error-accent),
+			'border': var(--alert-error-border),
+			'icon':var(--alert-error-icon),
+			'icon-bg': var(--alert-error-icon-bg),
 		)
 	);
 	@include redesign(
 		'info',
 		(
-			'background': tokens.$colors-background-info,
-			'accent': tokens.$colors-border-info,
-			'border': tokens.$colors-border-info,
-			'icon':tokens.$colors-icon-info,
-			'icon-bg': tokens.$colors-background-info-subdued,
+			'background': var(--alert-info-background),
+			'accent': var(--alert-info-accent),
+			'border': var(--alert-info-border),
+			'icon':var(--alert-info-icon),
+			'icon-bg': var(--alert-info-icon-bg),
 		)
 	);
 }

package/src/components/SyBtnMenu/SyBtnMenu.vue

@@ -2,6 +2,7 @@
 	import { ref, watch, computed, onMounted, useSlots, type PropType, nextTick } from 'vue'
 	import { useDisplay } from 'vuetify'
 	import slugify from 'slugify'
+	import SyIcon from '@/components/Customs/SyIcon/SyIcon.vue'
 
 	type Item = string | Record<string, unknown>
 
@@ -34,6 +35,10 @@
 			type: String,
 			default: 'value',
 		},
+		iconKey: {
+			type: String,
+			default: 'icon',
+		},
 		primaryInfo: {
 			type: String,
 			default: 'Information principale',
@@ -217,28 +222,35 @@
 					:aria-labelledby="generatedId"
 					:aria-activedescendant="getSelectedValue() ? `item-${slugify(getSelectedValue()!)}` : undefined"
 				>
-					<li
+					<VListItem
 						v-for="(item, index) in formattedItems"
 						:id="`item-${slugify(item[props.textKey] as string)}`"
 						:key="index"
+						tag="li"
+						:class="`text-${props?.options['list']?.textColor}`"
+						v-bind="props.options['list']"
+						:href="item.link"
+						:to="item.to"
+						:tabindex="0"
+						role="menuitem"
+						:aria-current="selectedItem === item ? 'page' : undefined"
+						@click="selectItem(item)"
 					>
-						<VListItem
-							:class="`text-${props?.options['list']?.textColor}`"
-							v-bind="props.options['list']"
-							:href="item.link"
-							:to="item.to"
-							:tabindex="0"
-							role="menuitem"
-							:aria-current="selectedItem === item ? 'page' : undefined"
-							@click="selectItem(item)"
+						<template
+							v-if="item[props.iconKey]"
+							#prepend
 						>
-							<VListItemTitle
-								class="item-title"
-							>
-								{{ item[props.textKey] }}
-							</VListItemTitle>
-						</VListItem>
-					</li>
+							<SyIcon
+								:icon="item[props.iconKey] as string"
+								decorative
+							/>
+						</template>
+						<VListItemTitle
+							class="item-title"
+						>
+							{{ item[props.textKey] }}
+						</VListItemTitle>
+					</VListItem>
 					<slot />
 					<slot name="footer-list-item" />
 				</VList>
@@ -312,4 +324,8 @@
 .item-title {
 	white-space: wrap;
 }
+
+:deep(.v-list-item__prepend) {
+	display: unset !important;
+}
 </style>

package/src/components/SyBtnMenu/tests/SyBtnMenu.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 SyBtnMenu from '../SyBtnMenu.vue'
+
+// Scénario d’accessibilité : menu utilisateur desktop avec une option et déploiement du menu.
+
+describe('SyBtnMenu – accessibility (axe)', () => {
+	it('has no obvious axe violations with menu open', async () => {
+		const wrapper = mount(SyBtnMenu, {
+			props: {
+				primaryInfo: 'John Doe',
+				secondaryInfo: 'Additional Info',
+				menuItems: [
+					{ text: 'Profil', value: 'profile' },
+				],
+				isMobileView: false,
+			},
+			attachTo: document.body,
+		})
+
+		// Ouvrir le menu pour inclure la liste dans l’analyse axe
+		const activator = wrapper.find('.sy-user-menu-btn')
+		if (activator.exists()) {
+			await activator.trigger('click')
+		}
+
+		const results = await axe(document.body)
+		assertNoA11yViolations(results, 'SyBtnMenu – menu open', {
+			ignoreRules: ['region'],
+		})
+
+		wrapper.unmount()
+	})
+})