@cnamts/synapse 1.0.22 → 1.0.24

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/Captcha.spec.ts

@@ -1,8 +1,6 @@
 import { describe, it, expect, vi, afterEach } from 'vitest'
 import { mount } from '@vue/test-utils'
-
 import Captcha from '../Captcha.vue'
-import { vuetify } from '@tests/unit/setup'
 
 describe('Captcha', () => {
 	afterEach(() => {
@@ -18,9 +16,6 @@ describe('Captcha', () => {
 		vi.stubGlobal('fetch', vi.fn().mockResolvedValue(response))
 
 		const wrapper = mount(Captcha, {
-			global: {
-				plugins: [vuetify],
-			},
 			props: {
 				urlCreate: '/captcha/captcha.json',
 				urlGetImage: '/captcha/captcha.png',
@@ -60,9 +55,6 @@ describe('Captcha', () => {
 		vi.stubGlobal('fetch', vi.fn().mockResolvedValue(response))
 
 		const wrapper = mount(Captcha, {
-			global: {
-				plugins: [vuetify],
-			},
 			props: {
 				urlCreate: '/captcha/captcha.json',
 				urlGetImage: '/captcha/captcha.png',
@@ -101,9 +93,6 @@ describe('Captcha', () => {
 		vi.stubGlobal('fetch', vi.fn().mockResolvedValue(response))
 
 		const wrapper = mount(Captcha, {
-			global: {
-				plugins: [vuetify],
-			},
 			props: {
 				urlCreate: '/captcha/captcha.json',
 				urlGetImage: '/captcha/captcha.png',
@@ -124,9 +113,6 @@ describe('Captcha', () => {
 		vi.stubGlobal('fetch', vi.fn().mockResolvedValue(response))
 
 		const wrapper = mount(Captcha, {
-			global: {
-				plugins: [vuetify],
-			},
 			props: {
 				urlCreate: '/captcha/captcha.json',
 				urlGetImage: '/captcha/captcha.png',
@@ -163,9 +149,6 @@ describe('Captcha', () => {
 		vi.stubGlobal('fetch', vi.fn().mockResolvedValue(response))
 
 		const wrapper = mount(Captcha, {
-			global: {
-				plugins: [vuetify],
-			},
 			props: {
 				urlCreate: '/captcha/captcha.json',
 				urlGetImage: '/captcha/captcha.png',
@@ -193,9 +176,6 @@ describe('Captcha', () => {
 		vi.stubGlobal('fetch', vi.fn().mockResolvedValue(response))
 
 		const wrapper = mount(Captcha, {
-			global: {
-				plugins: [vuetify],
-			},
 			props: {
 				urlCreate: '/captcha/captcha.json',
 				urlGetImage: '/captcha/captcha.png',
@@ -221,9 +201,6 @@ describe('Captcha', () => {
 		vi.stubGlobal('fetch', vi.fn().mockResolvedValue(response))
 
 		const wrapper = mount(Captcha, {
-			global: {
-				plugins: [vuetify],
-			},
 			props: {
 				urlCreate: '/captcha/captcha.json',
 				urlGetImage: '/captcha/captcha.png',
@@ -251,9 +228,6 @@ describe('Captcha', () => {
 		vi.stubGlobal('fetch', vi.fn().mockResolvedValue(response))
 
 		const wrapper = mount(Captcha, {
-			global: {
-				plugins: [vuetify],
-			},
 			props: {
 				urlCreate: '/captcha/captcha.json',
 				urlGetImage: '/captcha/captcha.png',
@@ -278,9 +252,6 @@ describe('Captcha', () => {
 		vi.stubGlobal('fetch', vi.fn().mockResolvedValue(response))
 
 		const wrapper = mount(Captcha, {
-			global: {
-				plugins: [vuetify],
-			},
 			props: {
 				urlCreate: '/captcha/captcha.json',
 				urlGetImage: '/captcha/captcha.png',

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

@@ -100,61 +100,7 @@ exports[`Captcha > renders correctly in audio mode 1`] = `
             ">
               <div class="v-field__overlay"></div>
               <div class="v-field__loader">
-                <div
-                  aria-hidden="true"
-                  aria-valuemax="100"
-                  aria-valuemin="0"
-                  class="
-                    v-locale--is-ltr
-                    v-progress-linear
-                    v-theme--light
-                  "
-                  role="progressbar"
-                  style="
-                    top: 0px;
-                    height: 0px;
-                    --v-progress-linear-height: 2px;
-                  "
-                >
-                  <!---->
-                  <div
-                    class="
-                      bg-primary
-                      v-progress-linear__background
-                    "
-                    style="opacity: NaN;"
-                  ></div>
-                  <div
-                    class="
-                      bg-primary
-                      v-progress-linear__buffer
-                    "
-                    style="
-                      opacity: NaN;
-                      width: 0%;
-                    "
-                  ></div>
-                  <transition-stub
-                    appear="false"
-                    css="true"
-                    name="fade-transition"
-                    persisted="false"
-                  >
-                    <div class="v-progress-linear__indeterminate">
-                      <div class="
-                        bg-primary
-                        long
-                        v-progress-linear__indeterminate
-                      "></div>
-                      <div class="
-                        bg-primary
-                        short
-                        v-progress-linear__indeterminate
-                      "></div>
-                    </div>
-                  </transition-stub>
-                  <!---->
-                </div>
+                <!-- v-if -->
               </div>
               <div class="v-field__prepend-inner">
                 <!-- v-if -->
@@ -171,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"
                 />
@@ -224,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"
@@ -496,61 +442,7 @@ exports[`Captcha > renders correctly in image mode 1`] = `
             ">
               <div class="v-field__overlay"></div>
               <div class="v-field__loader">
-                <div
-                  aria-hidden="true"
-                  aria-valuemax="100"
-                  aria-valuemin="0"
-                  class="
-                    v-locale--is-ltr
-                    v-progress-linear
-                    v-theme--light
-                  "
-                  role="progressbar"
-                  style="
-                    top: 0px;
-                    height: 0px;
-                    --v-progress-linear-height: 2px;
-                  "
-                >
-                  <!---->
-                  <div
-                    class="
-                      bg-primary
-                      v-progress-linear__background
-                    "
-                    style="opacity: NaN;"
-                  ></div>
-                  <div
-                    class="
-                      bg-primary
-                      v-progress-linear__buffer
-                    "
-                    style="
-                      opacity: NaN;
-                      width: 0%;
-                    "
-                  ></div>
-                  <transition-stub
-                    appear="false"
-                    css="true"
-                    name="fade-transition"
-                    persisted="false"
-                  >
-                    <div class="v-progress-linear__indeterminate">
-                      <div class="
-                        bg-primary
-                        long
-                        v-progress-linear__indeterminate
-                      "></div>
-                      <div class="
-                        bg-primary
-                        short
-                        v-progress-linear__indeterminate
-                      "></div>
-                    </div>
-                  </transition-stub>
-                  <!---->
-                </div>
+                <!-- v-if -->
               </div>
               <div class="v-field__prepend-inner">
                 <!-- v-if -->
@@ -567,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"
                 />
@@ -620,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>

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

@@ -1,15 +1,88 @@
 import { Meta, Story } from '@storybook/addon-docs';
-import * as Stories from '../ChipList.stories.ts';
-import '@/stories/styles/shared.css';
+import * as ChipListStories from '../ChipList.stories.ts';
+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={ChipListStories} />
 
-<div className="header">
-  <h1>Accessibilité</h1>
-</div>
+<AccessibilityGuideLayout
+  componentName="ChipList"
+  iconSrc={AccessibilityIcon}
+  apgHref="https://www.w3.org/WAI/ARIA/apg/patterns/listbox/"
+>
+  <AuditSection>
+    <div class="mt-2">
+      <p>Rapport d'audit manuel : <a href="/audits/ChipList.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/814" target="_blank" style={{color:'#0C41BD'}}>issue #814</a>)</p>
+    </div>
+  </AuditSection>
+  <CriteriaSection>
+    <CriteriaCard icon="🏷️" title="Structure sémantique de liste">
+      <ul>
+        <li><strong>Liste native</strong> : Utilisation de <code>&lt;ul&gt;</code> et <code>&lt;li&gt;</code> pour la structure principale</li>
+        <li><strong>Étiquetage</strong> : <code>aria-label</code> ou <code>aria-labelledby</code> pour la liste via les props <strong>listAriaLabel</strong> et <strong>listAriaLabelledby</strong></li>
+        <li><strong>Contenu des chips</strong> : <code>&lt;span&gt;</code> avec <code>role="status"</code> et <code>aria-live="polite"</code> pour le texte des chips</li>
+        <li><strong>Accessibilité</strong> : Permet une navigation sémantique correcte (critères 9.1.1, 9.2.1 RGAA)</li>
+      </ul>
+    </CriteriaCard>
 
+    <CriteriaCard icon="🎯" title="Chips interactifs et débordement">
+      <ul>
+        <li><strong>Chips supprimables</strong> : Boutons avec <code>aria-label</code> descriptif pour chaque action de suppression</li>
+        <li><strong>Chip de débordement</strong> : <code>role="button"</code>, <code>tabindex="0"</code>, et <code>aria-label</code> décrivant les éléments masqués</li>
+        <li><strong>Navigation clavier</strong> : Support des touches Entrée et Espace pour le chip de débordement</li>
+        <li><strong>Focus visible</strong> : Indicateurs de focus sur tous les éléments interactifs</li>
+      </ul>
+    </CriteriaCard>
 
-<div class="mt-2">
-<p>Rapport d’audit manuel : <a href="/audits/ChipList.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/814" target="_blank" style={{color:'#0C41BD'}}>issue #814</a>)</p>
-</div>
+    <CriteriaCard icon="⌨️" title="Navigation et interaction clavier">
+      <ul>
+        <li><strong>Navigation Tab</strong> : Parcours logique des éléments interactifs (chips → bouton débordement → boutons reset)</li>
+        <li><strong>Suppression de chips</strong> : Touches Entrée/Espace sur les boutons de suppression</li>
+        <li><strong>Débordement</strong> : Touches Entrée/Espace pour afficher/masquer les éléments supplémentaires</li>
+        <li><strong>Réinitialisation</strong> : Bouton reset accessible avec navigation standard</li>
+      </ul>
+    </CriteriaCard>
+
+    <CriteriaCard icon="🎨" title="États et feedback visuel">
+      <ul>
+        <li><strong>États des chips</strong> : Couleurs et icônes différentes pour success, info, warning, error</li>
+        <li><strong>Icônes d'état</strong> : Option <strong>displayPrependStateIcon</strong> et <strong>displayAppendStateIcon</strong> avec icônes décoratives</li>
+        <li><strong>Contraste</strong> : Styles CSS spécifiques pour garantir le contraste des bordures de focus selon l'état</li>
+        <li><strong>Feedback</strong> : <code>aria-live="polite"</code> pour les changements de contenu</li>
+      </ul>
+    </CriteriaCard>
+  </CriteriaSection>
+
+  <DemoSection componentName="ChipList">
+    <Story of={ChipListStories.WithOverflow} />
+  </DemoSection>
+
+  <BestPracticesSection>
+    <ul>
+      <li>Utilisez des libellés descriptifs pour la liste via <code>listAriaLabel</code></li>
+      <li>Limitez le nombre de chips visibles avec <code>overflowLimit</code> pour éviter la surcharge visuelle</li>
+      <li>Assurez-vous que les textes des chips sont concis mais explicites</li>
+      <li>Utilisez les états visuels (success, info, warning, error) de manière cohérente</li>
+      <li>Fournissez une alternative de réinitialisation lorsque les chips sont nombreux</li>
+      <li>Testez la navigation au clavier sans la souris</li>
+    </ul>
+  </BestPracticesSection>
+
+  <ResourcesSection>
+    <ul>
+      <li><a href="https://www.w3.org/WAI/ARIA/apg/patterns/listbox/" target="_blank" rel="noopener noreferrer">Guide des pratiques d'auteur WAI-ARIA pour les listes</a></li>
+      <li><a href="https://www.w3.org/WAI/WCAG21/quickref/" target="_blank" rel="noopener noreferrer">Référence rapide WCAG 2.1</a></li>
+      <li><a href="https://inclusive-components.design/tag-buttons/" target="_blank" rel="noopener noreferrer">Inclusive Components: Tag Buttons</a></li>
+      <li><a href="https://github.com/assurance-maladie-digital/design-system-v3/issues/814" target="_blank" rel="noopener noreferrer">Issue #814 - Corrections d'accessibilité ChipList</a></li>
+    </ul>
+  </ResourcesSection>
+</AccessibilityGuideLayout>

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

@@ -25,6 +25,47 @@ describe('ChipList – accessibility (axe)', () => {
 		},
 	]
 
+	it('has no obvious axe violations with overflow chip', async () => {
+		const overflowItems: ChipItem[] = [
+			{
+				text: 'Email',
+				value: 'email',
+				state: 'success' as ChipState,
+			},
+			{
+				text: 'SMS',
+				value: 'sms',
+				state: 'info' as ChipState,
+			},
+			{
+				text: 'Téléphone',
+				value: 'telephone',
+				state: 'warning' as ChipState,
+			},
+			{
+				text: 'Courrier',
+				value: 'courrier',
+				state: 'error' as ChipState,
+			},
+			{
+				text: 'Notification',
+				value: 'notification',
+			},
+		]
+
+		const wrapper = mount(ChipList, {
+			props: {
+				items: overflowItems,
+				overflowLimit: 3,
+			},
+		})
+
+		const results = await axe(wrapper.element as HTMLElement)
+		assertNoA11yViolations(results, 'ChipList – overflow chip', {
+			ignoreRules: ['region'],
+		})
+	})
+
 	it('has no obvious axe violations with default items', async () => {
 		const wrapper = mount(ChipList, {
 			props: {