@cnamts/synapse 1.0.23 → 1.0.24

package/src/components/Amelipro/AmeliproHeader/AmeliproHeaderBar/AmeliproHeaderBrandSection/__tests__/__snapshots__/AmeliproHeaderBrandSection.spec.ts.snap

@@ -93,7 +93,7 @@ exports[`AmeliproHeaderBrandSection > Snapshots > renders the component with onl
     <img
       alt="AmeliPro"
       class="logo-amelipro"
-      src="/src/assets/amelipro/img/amelipro.svg"
+      src="data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='99'%20height='64'%20viewBox='0%200%2099%2064'%20fill='none'%3e%3cpath%20fill='%2300a5df'%20d='M68.38%2038.78c.54.32%201.45.63%202.31.63%202.76%200%205.38-1.87%205.38-5.72v-2.86c0-3.59-2.62-5.7-5.7-5.7-3.09%200-5.71%202.11-5.71%205.7v13.73h3.72v-5.78Zm0-2.99v-4.83c0-1.8.85-2.68%202-2.68%201.12%200%201.97.88%201.97%202.68v2.6c0%201.97-.88%202.7-2%202.7-.67%200-1.32-.2-1.97-.47ZM77.97%2039.07h3.7v-8.68c0-1.23.67-2.11%201.84-2.11.63%200%201.28.13%201.85.29l.7-3.02a8.47%208.47%200%200%200-2.57-.42c-3.1%200-5.52%202.11-5.52%205.26v8.68ZM86.43%2033.45c0%203.72%202.44%205.96%205.8%205.96%203.35%200%205.8-2.24%205.8-5.96V31.1c0-3.72-2.45-5.96-5.8-5.96-3.36%200-5.8%202.24-5.8%205.96v2.36Zm3.69-.13v-2.1c0-1.8.52-2.94%202.1-2.94%201.56%200%202.11%201.14%202.11%202.94v2.1c0%201.8-.55%202.94-2.1%202.94-1.57%200-2.11-1.14-2.11-2.94Z'/%3e%3cpath%20fill='%230c419a'%20d='M.47%2035.64c0-2.82%202.38-4.42%207.64-4.97-.08-1.2-.82-1.9-2.27-1.9-1.12%200-2.24.48-3.5%201.23L.94%2027.36a10.75%2010.75%200%200%201%205.67-1.78c3.39%200%205.25%201.97%205.25%206.09v7.72H8.15v-1.3s-1.53%201.64-3.7%201.64C2%2039.69.48%2037.9.48%2035.64Zm7.64-.22v-2.34c-2.8.37-3.88%201.26-3.88%202.27%200%20.85.6%201.3%201.53%201.3.86-.04%201.64-.52%202.35-1.23ZM57.84%2021.75c0-1.22.97-2.08%202.28-2.08%201.3%200%202.27.86%202.27%202.08%200%201.23-.97%202.08-2.27%202.08-1.35%200-2.28-.89-2.28-2.08Zm.3%204.05h3.91v13.48h-3.9V25.8ZM36.24%2032.7c0-4.37%202.76-7.05%206.07-7.05%203.77%200%205.85%202.79%205.85%206.46%200%20.7-.07%201.45-.14%201.79h-7.94c.33%201.97%201.67%202.86%203.43%202.86%201%200%201.86-.41%202.83-.97l1.34%202.49a8.4%208.4%200%200%201-4.7%201.52c-3.87-.04-6.74-2.64-6.74-7.1Zm8.6-1.48c0-1.48-.85-2.56-2.41-2.56-1.23%200-2.1.85-2.35%202.56h4.77ZM18.18%2027.66c1.08-1.08%202.28-2%204.03-2%201.86%200%203.02.77%203.69%202.18%201.15-1.19%202.38-2.19%204.17-2.19%202.9%200%204.21%202.08%204.21%205.39v8.28h-4.14v-7.73c0-1.85-.52-2.41-1.56-2.41-.63%200-1.34.4-2.16%201.23v8.95h-4.18v-7.77c0-1.85-.48-2.41-1.56-2.41-.63%200-1.34.4-2.16%201.23v8.95h-4.14V26.02h3.8v1.64ZM50.52%2035.2V20.34h3.92v15c0%20.86.37%201.12.7%201.12.15%200%20.26%200%20.49-.04l.48%202.94c-.44.18-1.08.33-1.97.33-2.72.04-3.62-1.75-3.62-4.5Z'/%3e%3c/svg%3e"
     />
   </button>
 </div>

package/src/components/Amelipro/AmeliproTextArea/__tests__/__snapshots__/AmeliproTextArea.spec.ts.snap

@@ -67,8 +67,8 @@ exports[`AmeliproTextArea > Snapshots > renders the component with all propertie
       valid = value.trim() !== "";
     } else {
       valid = value !== null && value !== void 0;
-    }
-    return valid || __vite_ssr_import_0__.ruleMessage(errorMessages, "default");
+    };
+    return valid || (0,__vite_ssr_import_0__.ruleMessage)(errorMessages, "default");
   }"
     style="
       max-width: 150px;

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

@@ -117,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"
                 />
@@ -170,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"
@@ -459,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"
                 />
@@ -512,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: {

package/src/components/Customs/Selects/SelectBtnField/accessibilite/Accessibility.mdx

@@ -18,8 +18,6 @@ import {
 	apgHref="https://www.w3.org/WAI/ARIA/apg/patterns/listbox/"
 >
 
-## Critères d'accessibilité
-
 <CriteriaSection>
 
 <CriteriaCard title="Structure sémantique">
@@ -49,10 +47,6 @@ import {
 
 <DemoSection>
 
-## Démo
-
-Exemples d'utilisation du composant `SelectBtnField` :
-
 ```vue
 <template>
   <!-- Sélection simple avec label -->
@@ -92,7 +86,6 @@ Exemples d'utilisation du composant `SelectBtnField` :
 
 </DemoSection>
 
-## Bonnes pratiques
 
 <BestPracticesSection>
 
@@ -122,8 +115,6 @@ Exemples d'utilisation du composant `SelectBtnField` :
 
 </BestPracticesSection>
 
-## Ressources
-
 <ResourcesSection>
 
 - [WAI-ARIA Authoring Practices - Listbox](https://www.w3.org/WAI/ARIA/apg/patterns/listbox/)

package/src/components/Customs/Selects/SyAutocomplete/SyAutocomplete.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-	import { computed, onMounted, ref, watch, type PropType } from 'vue'
+	import { computed, nextTick, onMounted, ref, watch, type PropType } from 'vue'
 	import { VMenu, VList, VListItem, VListItemTitle, VChip } from 'vuetify/components'
 	import { mdiChevronDown, mdiCloseCircle } from '@mdi/js'
 	import SyTextField from '@/components/Customs/SyTextField/SyTextField.vue'
@@ -168,6 +168,7 @@
 	const selected = ref<SelectValue | SelectArray>(props.modelValue as SelectValue | SelectArray)
 	const hasInteracted = ref(false)
 	const suppressNextInput = ref(false)
+	const suppressMenuOpen = ref(false)
 	type SyTextFieldInstance = InstanceType<typeof SyTextField> & { $refs?: { input?: HTMLInputElement } }
 	const textFieldRef = ref<SyTextFieldInstance | null>(null)
 	const randomId = Math.random().toString(36).slice(2)
@@ -199,6 +200,7 @@
 
 	const syncSearchFromValue = () => {
 		if (props.multiple) return
+		suppressMenuOpen.value = true
 		if (!selected.value) {
 			search.value = ''
 			return
@@ -241,6 +243,11 @@
 	let debounceHandle: ReturnType<typeof setTimeout> | null = null
 
 	watch(search, () => {
+		if (suppressMenuOpen.value) {
+			suppressMenuOpen.value = false
+			return
+		}
+
 		if (!isOpen.value) {
 			isOpen.value = true
 		}
@@ -368,7 +375,15 @@
 		return errorHandling.validateOnSubmit()
 	}
 
-	const checkErrorOnBlur = () => {
+	const checkErrorOnBlur = (event?: FocusEvent) => {
+		const relatedTarget = event?.relatedTarget as HTMLElement | null | undefined
+		if (relatedTarget?.closest('.sy-autocomplete__chip') || relatedTarget?.closest('.sy-autocomplete__clear-button')) {
+			isOpen.value = true
+			nextTick(() => {
+				focusInput(textFieldRef)
+			})
+			return
+		}
 		markInteracted()
 		return errorHandling.checkErrorOnBlur()
 	}
@@ -522,7 +537,9 @@
 							class="sy-autocomplete__chip"
 							closable
 							:close-label="locales.removeChip(getChipLabel(item as ItemType))"
-							@click:close="() => selectItem(item as ItemType)"
+							@click:close.stop.prevent="() => selectItem(item as ItemType)"
+							@keydown.enter.capture.stop.prevent="(event) => (event.target as HTMLElement | null)?.closest('.v-chip__close') && selectItem(item as ItemType)"
+							@keydown.space.capture.stop.prevent="(event) => (event.target as HTMLElement | null)?.closest('.v-chip__close') && selectItem(item as ItemType)"
 						>
 							{{ getChipLabel(item as ItemType) }}
 						</VChip>
@@ -639,7 +656,7 @@
 }
 
 .sy-autocomplete__clear-icon {
-	color: rgb(0 0 0 / 54%);
+	color: rgb(var(--v-theme-iconBase));
 }
 
 .sy-autocomplete__chip {
@@ -707,7 +724,7 @@ li:hover {
 .v-list-item.keyboard-focused,
 li:focus-visible,
 li.keyboard-focused {
-	outline: 2px solid tokens.$primary-base;
+	outline: 2px solid rgb(var(--v-theme-accentPrimary));
 	outline-offset: -2px;
 	background-color: rgb(0 0 0 / 8%);
 }