@cnamts/synapse 1.0.21 → 1.0.23

package/src/components/Amelipro/AmeliproPagination/AmeliproPagination.stories.ts

@@ -1,5 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
 import AmeliproPagination from './AmeliproPagination.vue'
+import { createDeprecationNotice } from '@/stories/DeprecationNotice/DeprecationNotice'
 
 const meta = {
 	argTypes: {
@@ -174,3 +175,10 @@ function onPageClick(page: number) {
         `,
 	}),
 }
+
+export const DeprecationNotice = {
+	...createDeprecationNotice([
+		{ label: 'SyPagination', url: '/?path=/docs/composants-navigation-sypagination--docs&globals=theme:ap' },
+	]),
+	tags: ['!dev'],
+}

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

@@ -937,14 +937,21 @@ exports[`AmeliproPatientLogged > render correctly 1`] = `
                       class="v-field__input"
                       data-no-activator=""
                     >
+                      <select hidden="">
+                        <option value="1"></option>
+                        <option value="2"></option>
+                        <option value="3"></option>
+                      </select>
                       <!---->
                       <!---->
                       <input
-                        aria-label="Open"
+                        aria-controls="menu-v-14"
+                        aria-expanded="false"
+                        aria-labelledby="test-id-select-label"
                         id="test-id-select"
                         inputmode="none"
+                        role="combobox"
                         size="1"
-                        title="Open"
                         type="text"
                         value=""
                       />

package/src/components/Amelipro/AmeliproPostalAddressField/AmeliproPostalAddressCityRow/__tests__/__snapshots__/AmeliproPostalAddressCityRow.spec.ts.snap

@@ -105,11 +105,17 @@ exports[`AmeliproPostalAddressCityRow > render correctly 1`] = `
                 >
                   <!---->
                   <div
-                    class="v-progress-linear__background"
+                    class="
+                      bg-ap-blue-darken-1
+                      v-progress-linear__background
+                    "
                     style="opacity: NaN;"
                   ></div>
                   <div
-                    class="v-progress-linear__buffer"
+                    class="
+                      bg-ap-blue-darken-1
+                      v-progress-linear__buffer
+                    "
                     style="
                       opacity: NaN;
                       width: 0%;
@@ -123,10 +129,12 @@ exports[`AmeliproPostalAddressCityRow > render correctly 1`] = `
                   >
                     <div class="v-progress-linear__indeterminate">
                       <div class="
+                        bg-ap-blue-darken-1
                         long
                         v-progress-linear__indeterminate
                       "></div>
                       <div class="
+                        bg-ap-blue-darken-1
                         short
                         v-progress-linear__indeterminate
                       "></div>
@@ -151,13 +159,16 @@ exports[`AmeliproPostalAddressCityRow > render correctly 1`] = `
                   <!-- teleport start -->
                   <!-- teleport end -->
                   <input
+                    aria-controls="menu-v-0"
                     aria-expanded="false"
+                    aria-labelledby="the-groupId-postal-code-label"
                     aria-required="true"
                     autocomplete="address-level2"
                     disabled=""
                     id="the-groupId-postal-code"
                     readonly=""
                     required=""
+                    role="combobox"
                     size="1"
                     type="text"
                     value=""
@@ -246,8 +257,7 @@ exports[`AmeliproPostalAddressCityRow > render correctly 1`] = `
                   <!---->
                 </button>
                 <i
-                  aria-hidden="false"
-                  aria-label="Open"
+                  aria-hidden="true"
                   class="
                     mdi
                     mdi-menu-down
@@ -260,7 +270,6 @@ exports[`AmeliproPostalAddressCityRow > render correctly 1`] = `
                   "
                   role="button"
                   tabindex="-1"
-                  title="Open"
                 ></i>
                 <!---->
               </div>
@@ -365,11 +374,17 @@ exports[`AmeliproPostalAddressCityRow > render correctly 1`] = `
                 >
                   <!---->
                   <div
-                    class="v-progress-linear__background"
+                    class="
+                      bg-ap-blue-darken-1
+                      v-progress-linear__background
+                    "
                     style="opacity: NaN;"
                   ></div>
                   <div
-                    class="v-progress-linear__buffer"
+                    class="
+                      bg-ap-blue-darken-1
+                      v-progress-linear__buffer
+                    "
                     style="
                       opacity: NaN;
                       width: 0%;
@@ -383,10 +398,12 @@ exports[`AmeliproPostalAddressCityRow > render correctly 1`] = `
                   >
                     <div class="v-progress-linear__indeterminate">
                       <div class="
+                        bg-ap-blue-darken-1
                         long
                         v-progress-linear__indeterminate
                       "></div>
                       <div class="
+                        bg-ap-blue-darken-1
                         short
                         v-progress-linear__indeterminate
                       "></div>
@@ -411,13 +428,16 @@ exports[`AmeliproPostalAddressCityRow > render correctly 1`] = `
                   <!-- teleport start -->
                   <!-- teleport end -->
                   <input
+                    aria-controls="menu-v-7"
                     aria-expanded="false"
+                    aria-labelledby="the-groupId-city-label"
                     aria-required="true"
                     autocomplete="address-level2"
                     disabled=""
                     id="the-groupId-city"
                     readonly=""
                     required=""
+                    role="combobox"
                     size="1"
                     type="text"
                     value=""
@@ -506,8 +526,7 @@ exports[`AmeliproPostalAddressCityRow > render correctly 1`] = `
                   <!---->
                 </button>
                 <i
-                  aria-hidden="false"
-                  aria-label="Open"
+                  aria-hidden="true"
                   class="
                     mdi
                     mdi-menu-down
@@ -520,7 +539,6 @@ exports[`AmeliproPostalAddressCityRow > render correctly 1`] = `
                   "
                   role="button"
                   tabindex="-1"
-                  title="Open"
                 ></i>
                 <!---->
               </div>

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

@@ -90,11 +90,17 @@ exports[`AmeliproPostalAddressField > render correctly 1`] = `
             >
               <!---->
               <div
-                class="v-progress-linear__background"
+                class="
+                  bg-ap-blue-darken-1
+                  v-progress-linear__background
+                "
                 style="opacity: NaN;"
               ></div>
               <div
-                class="v-progress-linear__buffer"
+                class="
+                  bg-ap-blue-darken-1
+                  v-progress-linear__buffer
+                "
                 style="
                   opacity: NaN;
                   width: 0%;
@@ -108,10 +114,12 @@ exports[`AmeliproPostalAddressField > render correctly 1`] = `
               >
                 <div class="v-progress-linear__indeterminate">
                   <div class="
+                    bg-ap-blue-darken-1
                     long
                     v-progress-linear__indeterminate
                   "></div>
                   <div class="
+                    bg-ap-blue-darken-1
                     short
                     v-progress-linear__indeterminate
                   "></div>
@@ -129,6 +137,7 @@ exports[`AmeliproPostalAddressField > render correctly 1`] = `
             <!---->
             <!---->
             <input
+              aria-labelledby="the-groupId-address-label"
               autocomplete="address-line1"
               class="v-field__input"
               id="the-groupId-address"
@@ -229,11 +238,17 @@ exports[`AmeliproPostalAddressField > render correctly 1`] = `
                 >
                   <!---->
                   <div
-                    class="v-progress-linear__background"
+                    class="
+                      bg-ap-blue-darken-1
+                      v-progress-linear__background
+                    "
                     style="opacity: NaN;"
                   ></div>
                   <div
-                    class="v-progress-linear__buffer"
+                    class="
+                      bg-ap-blue-darken-1
+                      v-progress-linear__buffer
+                    "
                     style="
                       opacity: NaN;
                       width: 0%;
@@ -247,10 +262,12 @@ exports[`AmeliproPostalAddressField > render correctly 1`] = `
                   >
                     <div class="v-progress-linear__indeterminate">
                       <div class="
+                        bg-ap-blue-darken-1
                         long
                         v-progress-linear__indeterminate
                       "></div>
                       <div class="
+                        bg-ap-blue-darken-1
                         short
                         v-progress-linear__indeterminate
                       "></div>
@@ -268,6 +285,7 @@ exports[`AmeliproPostalAddressField > render correctly 1`] = `
                 <!---->
                 <!---->
                 <input
+                  aria-labelledby="the-groupId-postal-code-label"
                   autocomplete="postal-code"
                   class="v-field__input"
                   id="the-groupId-postal-code"
@@ -350,11 +368,17 @@ exports[`AmeliproPostalAddressField > render correctly 1`] = `
                 >
                   <!---->
                   <div
-                    class="v-progress-linear__background"
+                    class="
+                      bg-ap-blue-darken-1
+                      v-progress-linear__background
+                    "
                     style="opacity: NaN;"
                   ></div>
                   <div
-                    class="v-progress-linear__buffer"
+                    class="
+                      bg-ap-blue-darken-1
+                      v-progress-linear__buffer
+                    "
                     style="
                       opacity: NaN;
                       width: 0%;
@@ -368,10 +392,12 @@ exports[`AmeliproPostalAddressField > render correctly 1`] = `
                   >
                     <div class="v-progress-linear__indeterminate">
                       <div class="
+                        bg-ap-blue-darken-1
                         long
                         v-progress-linear__indeterminate
                       "></div>
                       <div class="
+                        bg-ap-blue-darken-1
                         short
                         v-progress-linear__indeterminate
                       "></div>
@@ -389,6 +415,7 @@ exports[`AmeliproPostalAddressField > render correctly 1`] = `
                 <!---->
                 <!---->
                 <input
+                  aria-labelledby="the-groupId-city-label"
                   autocomplete="address-level2"
                   class="v-field__input"
                   id="the-groupId-city"
@@ -473,11 +500,17 @@ exports[`AmeliproPostalAddressField > render correctly 1`] = `
             >
               <!---->
               <div
-                class="v-progress-linear__background"
+                class="
+                  bg-ap-blue-darken-1
+                  v-progress-linear__background
+                "
                 style="opacity: NaN;"
               ></div>
               <div
-                class="v-progress-linear__buffer"
+                class="
+                  bg-ap-blue-darken-1
+                  v-progress-linear__buffer
+                "
                 style="
                   opacity: NaN;
                   width: 0%;
@@ -491,10 +524,12 @@ exports[`AmeliproPostalAddressField > render correctly 1`] = `
               >
                 <div class="v-progress-linear__indeterminate">
                   <div class="
+                    bg-ap-blue-darken-1
                     long
                     v-progress-linear__indeterminate
                   "></div>
                   <div class="
+                    bg-ap-blue-darken-1
                     short
                     v-progress-linear__indeterminate
                   "></div>
@@ -512,6 +547,7 @@ exports[`AmeliproPostalAddressField > render correctly 1`] = `
             <!---->
             <!---->
             <input
+              aria-labelledby="the-groupId-additional-info-label"
               autocomplete="address-line2"
               class="v-field__input"
               id="the-groupId-additional-info"

package/src/components/Amelipro/AmeliproResultList/AmeliproResultList.vue

@@ -155,7 +155,7 @@
 		>
 			<p
 				:id="`${uniqueId}-result-counter`"
-				class="d-inline-block align-center mb-0 total-counter font-weight-semibold"
+				class="d-inline-block align-center mb-0 total-counter"
 			>
 				<span class="d-sr-only">Nombre de lignes dans la liste ci-après :</span>
 				{{ items.length }} {{ counterLabel }}

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

@@ -19,7 +19,6 @@ exports[`AmeliproResultList > render correctly 1`] = `
       class="
         align-center
         d-inline-block
-        font-weight-semibold
         mb-0
         total-counter
       "
@@ -167,6 +166,17 @@ exports[`AmeliproResultList > render correctly 1`] = `
                     class="v-field__input"
                     data-no-activator=""
                   >
+                    <select hidden="">
+                      <option value="5"></option>
+                      <option
+                        selected=""
+                        value="10"
+                      ></option>
+                      <option value="20"></option>
+                      <option value="30"></option>
+                      <option value="50"></option>
+                      <option value="100"></option>
+                    </select>
                     <!---->
                     <!---->
                     <div class="v-select__selection">
@@ -176,11 +186,13 @@ exports[`AmeliproResultList > render correctly 1`] = `
                       </span>
                     </div>
                     <input
-                      aria-label="Open"
+                      aria-controls="menu-v-1"
+                      aria-expanded="false"
+                      aria-labelledby="amelipro-result-unique-id-pagination-select-label"
                       id="amelipro-result-unique-id-pagination-select"
                       inputmode="none"
+                      role="combobox"
                       size="1"
-                      title="Open"
                       type="text"
                       value="10"
                     />

package/src/components/Amelipro/AmeliproTable/AmeliproTable.vue

@@ -206,7 +206,7 @@
 		>
 			<p
 				:id="`${uniqueId}-total-counter`"
-				class="d-inline-block mb-0 total-counter font-weight-semibold"
+				class="d-inline-block mb-0 total-counter"
 			>
 				<span class="d-sr-only">Nombre de lignes dans le tableau ci-après :</span>
 				{{ dataList.length }} {{ counterLabel }}

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

@@ -220,7 +220,6 @@ exports[`AmeliproTable > Snapshots > renders the component with only required pr
     <p
       class="
         d-inline-block
-        font-weight-semibold
         mb-0
         total-counter
       "

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

@@ -26,9 +26,12 @@ exports[`AmeliproTooltips > Snapshots > renders the component with all propertie
     openonclick="false"
     openonhover="true"
     origin="auto"
+    persistent="false"
     right=""
     scrim="false"
     scrollstrategy="reposition"
+    sticktotarget="false"
+    viewportmargin="12"
     zindex="2000"
   ></v-tooltip-stub>
 </div>
@@ -60,9 +63,12 @@ exports[`AmeliproTooltips > Snapshots > renders the component with only required
     openonclick="false"
     openonhover="true"
     origin="auto"
+    persistent="false"
     right=""
     scrim="false"
     scrollstrategy="reposition"
+    sticktotarget="false"
+    viewportmargin="12"
     zindex="2000"
   ></v-tooltip-stub>
 </div>

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

@@ -29,8 +29,6 @@ exports[`AmeliproUpload > Snapshots > renders the component with all properties
       countersizestring="$vuetify.fileInput.counterSize"
       counterstring="$vuetify.fileInput.counter"
       density="compact"
-      details="false"
-      direction="horizontal"
       dirty="false"
       disabled="true"
       error="true"
@@ -57,6 +55,7 @@ exports[`AmeliproUpload > Snapshots > renders the component with all properties
       showsize="false"
       singleline="false"
       tile="false"
+      truncatelength="22"
       variant="filled"
     ></v-file-input-stub>
   </div>
@@ -128,8 +127,6 @@ exports[`AmeliproUpload > Snapshots > renders the component with only required p
       countersizestring="$vuetify.fileInput.counterSize"
       counterstring="$vuetify.fileInput.counter"
       density="compact"
-      details="false"
-      direction="horizontal"
       dirty="false"
       disabled="false"
       error="false"
@@ -156,6 +153,7 @@ exports[`AmeliproUpload > Snapshots > renders the component with only required p
       showsize="false"
       singleline="false"
       tile="false"
+      truncatelength="22"
       variant="filled"
     ></v-file-input-stub>
   </div>

package/src/components/Amelipro/StructureMenu/StructureList/__tests__/__snapshots__/StructureList.spec.ts.snap

@@ -10,7 +10,6 @@ exports[`StructureList > Snapshots > renders the component with all properties f
     class="w-100"
     column=""
     density="default"
-    direction="horizontal"
     error="false"
     errormessages=""
     falseicon="$radioOff"
@@ -75,7 +74,6 @@ exports[`StructureList > Snapshots > renders the component with only required pr
     class="w-100"
     column=""
     density="default"
-    direction="horizontal"
     error="false"
     errormessages=""
     falseicon="$radioOff"

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

@@ -25,6 +25,7 @@ exports[`UserMenu > Snapshots > renders the component with all properties filled
     activator="modified-unique-id-open-btn"
     activatorprops="[object Object]"
     attach="#modified-unique-id"
+    capturefocus="true"
     closedelay="250"
     closeonback="true"
     closeoncontentclick="false"
@@ -41,10 +42,13 @@ exports[`UserMenu > Snapshots > renders the component with all properties filled
     openonhover="false"
     origin="auto"
     persistent="false"
+    retainfocus="false"
     scrim="false"
     scrollstrategy="reposition"
+    sticktotarget="false"
     submenu="false"
     transition="slide-y-transition"
+    viewportmargin="12"
     width="366px"
     zindex="2000"
   ></v-menu-stub>
@@ -76,6 +80,7 @@ exports[`UserMenu > Snapshots > renders the component with only required propert
     activator="required-unique-id-open-btn"
     activatorprops="[object Object]"
     attach="#required-unique-id"
+    capturefocus="true"
     closedelay="250"
     closeonback="true"
     closeoncontentclick="false"
@@ -92,10 +97,13 @@ exports[`UserMenu > Snapshots > renders the component with only required propert
     openonhover="false"
     origin="auto"
     persistent="false"
+    retainfocus="false"
     scrim="false"
     scrollstrategy="reposition"
+    sticktotarget="false"
     submenu="false"
     transition="slide-y-transition"
+    viewportmargin="12"
     width="366px"
     zindex="2000"
   ></v-menu-stub>

package/src/components/BackBtn/BackBtn.vue

@@ -15,7 +15,7 @@
 	const isDark = computed(() => props.dark ?? false)
 	const iconColor = computed(() => isDark.value ? 'white' : 'primary')
 	const buttonVariant = computed(() => isDark.value ? 'outlined' : 'text')
-	const buttonTheme = computed(() => isDark.value ? 'dark' : 'light')
+	const buttonTheme = computed(() => isDark.value ? 'dark' : undefined)
 	const buttonColor = computed(() => isDark.value ? 'white' : 'primary')
 	const buttonBgColor = computed(() => isDark.value ? 'transparent' : props.backgroundColor)
 

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

@@ -1,15 +1,67 @@
-import { Meta, Story } from '@storybook/addon-docs';
+import { Meta, Primary } from '@storybook/blocks';
 import * as Stories from '../BackBtn.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} />
+<Meta of={Stories}/>
 
-<div className="header">
-  <h1>Accessibilité</h1>
-</div>
+<AccessibilityGuideLayout
+	componentName="BackBtn"
+	iconSrc={AccessibilityIcon}
+	apgHref="https://www.w3.org/WAI/ARIA/apg/patterns/button/"
+>
+	<div class="mt-8">
+		<p>Rapport d’audit manuel : <a href="/audits/BackBtn.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/4006" target="_blank" style={{color:'#0C41BD'}}>issue #4006</a>)</p>
+	</div>
 
+	<CriteriaSection>
+		<CriteriaCard icon="🔍" title="Structure sémantique et attributs">
+			<ul>
+				<li><strong>Rôle natif</strong> : Utilisation de l'élément <code>&lt;button&gt;</code> natif (via <code>VBtn</code>) pour un comportement sémantique correct par défaut.</li>
+				<li><strong>Icône décorative</strong> : L'icône de retour (si présente) est masquée aux lecteurs d'écran (<code>decorative=true</code>) pour éviter la redondance d'information avec le texte du bouton.</li>
+			</ul>
+		</CriteriaCard>
 
-<div class="mt-2">
-<p>Rapport d’audit manuel : <a href="/audits/BackBtn.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/4006" target="_blank" style={{color:'#0C41BD'}}>issue #4006</a>)</p>
-</div>
+		<CriteriaCard icon="⌨️" title="Navigation et interaction clavier">
+			<ul>
+				<li><strong>Focus natif</strong> : Le bouton est focusable via la touche <kbd>Tab</kbd> de manière naturelle.</li>
+				<li><strong>Activation</strong> : Le bouton peut être activé avec les touches <kbd>Entrée</kbd> ou <kbd>Espace</kbd>.</li>
+				<li><strong>Indicateur de focus</strong> : Un style de focus clair et visible (<code>:focus-visible</code>) est implémenté pour garantir que les utilisateurs naviguant au clavier savent quel élément est actif.</li>
+			</ul>
+		</CriteriaCard>
+
+		<CriteriaCard icon="🎨" title="Styles et contrastes">
+			<ul>
+				<li><strong>Contrastes garantis</strong> : Couleurs de texte adaptées ("primary" ou "white") selon le thème clair ou sombre (<code>dark</code>) pour répondre aux critères WCAG de contraste.</li>
+				<li><strong>États distincts</strong> : Apparence distincte entre le mode clair (bouton texte) et sombre (bouton contour) tout en maintenant l'accessibilité visuelle.</li>
+			</ul>
+		</CriteriaCard>
+	</CriteriaSection>
+
+	<DemoSection componentName="BackBtn">
+		<Primary />
+	</DemoSection>
+
+	<BestPracticesSection>
+		<ul>
+			<li><strong>Texte descriptif</strong> : Assurez-vous que le texte du bouton explique clairement l'action (par ex. "Retour à la page précédente" plutôt que juste "Retour") si le contexte n'est pas explicite.</li>
+			<li><strong>Cohérence de placement</strong> : Placez le bouton de retour à un endroit prévisible et constant sur vos différentes pages (généralement en haut à gauche).</li>
+			<li>Ne surchargez pas le bouton avec des attributs <code>aria-label</code> si le texte affiché à l'écran est déjà suffisamment clair.</li>
+		</ul>
+	</BestPracticesSection>
+
+	<ResourcesSection>
+		<ul>
+			<li><a href="https://www.w3.org/WAI/ARIA/apg/patterns/button/" target="_blank" rel="noopener noreferrer">Guide des pratiques WAI-ARIA : Boutons</a></li>
+			<li><a href="https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#11.1" target="_blank" rel="noopener noreferrer">RGAA : Formulaires et boutons</a></li>
+		</ul>
+	</ResourcesSection>
+</AccessibilityGuideLayout>