@cnamts/synapse 1.0.2 → 1.0.4

package/src/components/CookieBanner/config.ts

@@ -1,3 +1,5 @@
+import { cnamColorsTokens } from '@/designTokens/tokens/cnam/cnamColors'
+
 const commonBtnConfig = {
 	color: 'primary',
 	height: 'auto',
@@ -10,6 +12,7 @@ export const config = {
 		rounded: true,
 		elevation: 2,
 		class: 'pa-8',
+		color: cnamColorsTokens.blue.lighten80,
 	},
 	closeBtn: {
 		icon: true,

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

@@ -22,7 +22,11 @@ exports[`CookieBanner > does not close the dialog when the customize button is c
         v-theme--light
       "
       role="progressbar"
-      style="top: 0px; height: 0px; --v-progress-linear-height: 2px;"
+      style="
+        top: 0px;
+        height: 0px;
+        --v-progress-linear-height: 2px;
+      "
     >
       <!---->
       <div
@@ -31,7 +35,10 @@ exports[`CookieBanner > does not close the dialog when the customize button is c
       ></div>
       <div
         class="v-progress-linear__buffer"
-        style="opacity: NaN; width: 0%;"
+        style="
+          opacity: NaN;
+          width: 0%;
+        "
       ></div>
       <transition-stub
         appear="false"
@@ -217,6 +224,14 @@ exports[`CookieBanner > does not close the dialog when the customize button is c
           <!---->
         </div>
       </details>
+      <div
+        aria-level="3"
+        class="vd-cookies-information__heading"
+        id="radio-group-essentials"
+        role="heading"
+      >
+        Accepter les cookies de type Cookies requis, ce champ est requis.
+      </div>
       <!-- v-if -->
     </div>
     <div class="
@@ -303,6 +318,14 @@ exports[`CookieBanner > does not close the dialog when the customize button is c
           <!---->
         </div>
       </details>
+      <div
+        aria-level="3"
+        class="vd-cookies-information__heading"
+        id="radio-group-functional"
+        role="heading"
+      >
+        Accepter les cookies de type Cookies fonctionnels, ce champ est requis.
+      </div>
       <div class="
         v-input
         v-input--center-affix
@@ -315,21 +338,13 @@ exports[`CookieBanner > does not close the dialog when the customize button is c
       ">
         <!---->
         <div class="v-input__control">
-          <label
-            class="v-label"
-            id="radio-group-7"
-          >
-            <!---->
-            Accepter les cookies de type Cookies fonctionnels, ce champ est requis.
-          </label>
+          <!---->
           <div
-            aria-describedby="radio-group-7-messages"
-            aria-labelledby="radio-group-7"
+            aria-required="true"
             class="
               v-selection-control-group
               v-selection-control-group--inline
             "
-            label="Accepter les cookies de type Cookies fonctionnels, ce champ est requis."
             role="radiogroup"
           >
             <div class="v-spacer"></div>
@@ -354,10 +369,9 @@ exports[`CookieBanner > does not close the dialog when the customize button is c
                     "
                   ></i>
                   <input
-                    aria-disabled="false"
                     aria-label="Refuser"
-                    id="input-10"
-                    name="radio-group-7"
+                    id="input-v-10"
+                    name="radio-group-v-7"
                     type="radio"
                     value="reject"
                   />
@@ -368,7 +382,7 @@ exports[`CookieBanner > does not close the dialog when the customize button is c
                   v-label
                   v-label--clickable
                 "
-                for="input-10"
+                for="input-v-10"
               >
                 <!---->
                 Refuser
@@ -396,10 +410,9 @@ exports[`CookieBanner > does not close the dialog when the customize button is c
                     "
                   ></i>
                   <input
-                    aria-disabled="false"
                     aria-label="Accepter"
-                    id="input-11"
-                    name="radio-group-7"
+                    id="input-v-11"
+                    name="radio-group-v-7"
                     type="radio"
                     value="accept"
                   />
@@ -410,7 +423,7 @@ exports[`CookieBanner > does not close the dialog when the customize button is c
                   v-label
                   v-label--clickable
                 "
-                for="input-11"
+                for="input-v-11"
               >
                 <!---->
                 Accepter
@@ -506,6 +519,14 @@ exports[`CookieBanner > does not close the dialog when the customize button is c
           <!---->
         </div>
       </details>
+      <div
+        aria-level="3"
+        class="vd-cookies-information__heading"
+        id="radio-group-analytics"
+        role="heading"
+      >
+        Accepter les cookies de type Cookies d’analyse, ce champ est requis.
+      </div>
       <div class="
         v-input
         v-input--center-affix
@@ -518,21 +539,13 @@ exports[`CookieBanner > does not close the dialog when the customize button is c
       ">
         <!---->
         <div class="v-input__control">
-          <label
-            class="v-label"
-            id="radio-group-12"
-          >
-            <!---->
-            Accepter les cookies de type Cookies d’analyse, ce champ est requis.
-          </label>
+          <!---->
           <div
-            aria-describedby="radio-group-12-messages"
-            aria-labelledby="radio-group-12"
+            aria-required="true"
             class="
               v-selection-control-group
               v-selection-control-group--inline
             "
-            label="Accepter les cookies de type Cookies d’analyse, ce champ est requis."
             role="radiogroup"
           >
             <div class="v-spacer"></div>
@@ -557,10 +570,9 @@ exports[`CookieBanner > does not close the dialog when the customize button is c
                     "
                   ></i>
                   <input
-                    aria-disabled="false"
                     aria-label="Refuser"
-                    id="input-15"
-                    name="radio-group-12"
+                    id="input-v-15"
+                    name="radio-group-v-12"
                     type="radio"
                     value="reject"
                   />
@@ -571,7 +583,7 @@ exports[`CookieBanner > does not close the dialog when the customize button is c
                   v-label
                   v-label--clickable
                 "
-                for="input-15"
+                for="input-v-15"
               >
                 <!---->
                 Refuser
@@ -599,10 +611,9 @@ exports[`CookieBanner > does not close the dialog when the customize button is c
                     "
                   ></i>
                   <input
-                    aria-disabled="false"
                     aria-label="Accepter"
-                    id="input-16"
-                    name="radio-group-12"
+                    id="input-v-16"
+                    name="radio-group-v-12"
                     type="radio"
                     value="accept"
                   />
@@ -613,7 +624,7 @@ exports[`CookieBanner > does not close the dialog when the customize button is c
                   v-label
                   v-label--clickable
                 "
-                for="input-16"
+                for="input-v-16"
               >
                 <!---->
                 Accepter

package/src/components/CookiesSelection/CookiesInformation/CookiesInformation.vue

@@ -1,7 +1,8 @@
 <script setup lang="ts">
 	import { isRequired } from '@/utils/rules/isRequired'
+	import type { VRadio, VRadioGroup } from 'vuetify/components'
 	import { mdiChevronDown, mdiChevronUp } from '@mdi/js'
-	import { computed, ref } from 'vue'
+	import { computed, ref, nextTick, onMounted } from 'vue'
 	import CookiesTable from '../CookiesTable/CookiesTable.vue'
 	import type { CookieTypes, Cookie } from '../types'
 	import { locales } from './locales'
@@ -27,6 +28,66 @@
 	function toggleDetails(event: ToggleEvent): void {
 		open.value = event.newState === 'open'
 	}
+
+	const rejectRadioRef = ref<VRadio | null>(null)
+	const acceptRadioRef = ref<VRadio | null>(null)
+	const radioGroupRef = ref<VRadioGroup | null>(null)
+
+	// Fonction pour supprimer les attributs aria-disabled des composants radio
+	const removeAriaDisabled = (radioRef: typeof rejectRadioRef) => {
+		if (!radioRef.value?.$el) return
+
+		// Chercher l'élément input dans le composant radio
+		const radioElement = radioRef.value.$el
+
+		// Supprimer l'attribut aria-disabled du composant lui-même
+		radioElement.removeAttribute('aria-disabled')
+
+		// Chercher et supprimer l'attribut aria-disabled des éléments enfants (input, label, etc.)
+		const elements = radioElement.querySelectorAll('[aria-disabled]')
+		elements.forEach(el => el.removeAttribute('aria-disabled'))
+	}
+
+	const removeAriaDescribedby = (radioGrpRef: typeof radioGroupRef) => {
+		if (!radioGrpRef.value?.$el) return
+
+		// Chercher l'élément input dans le composant radio
+		const radioElement = radioGrpRef.value.$el
+
+		// Supprimer l'attribut aria-disabled du composant lui-même
+		radioElement.removeAttribute('aria-describedby')
+
+		// Chercher et supprimer l'attribut aria-disabled des éléments enfants (input, label, etc.)
+		const elements = radioElement.querySelectorAll('[aria-describedby]')
+		elements.forEach(el => el.removeAttribute('aria-describedby'))
+	}
+
+	onMounted(() => {
+		nextTick(() => {
+			// Supprimer les attributs aria-disabled initiaux
+			removeAriaDisabled(rejectRadioRef)
+			removeAriaDisabled(acceptRadioRef)
+			removeAriaDescribedby(radioGroupRef)
+
+			// Observer les changements DOM pour supprimer aria-disabled s'il est ajouté dynamiquement
+			const observer = new MutationObserver(() => {
+				removeAriaDisabled(rejectRadioRef)
+				removeAriaDisabled(acceptRadioRef)
+				removeAriaDescribedby(radioGroupRef)
+			})
+
+			// Observer les deux boutons radio
+			if (rejectRadioRef.value?.$el) {
+				observer.observe(rejectRadioRef.value.$el, { attributes: true, subtree: true, childList: true })
+			}
+			if (acceptRadioRef.value?.$el) {
+				observer.observe(acceptRadioRef.value.$el, { attributes: true, subtree: true, childList: true })
+			}
+			if (radioGroupRef.value?.$el) {
+				observer.observe(radioGroupRef.value.$el, { attributes: true, subtree: true, childList: true })
+			}
+		})
+	})
 </script>
 
 <template>
@@ -67,13 +128,23 @@
 			</CookiesTable>
 		</details>
 
+		<div
+			:id="`radio-group-${type}`"
+			role="heading"
+			aria-level="3"
+			class="vd-cookies-information__heading"
+		>
+			{{ locales.fieldLabel(locales[type].title) }}
+		</div>
+
 		<VRadioGroup
 			v-if="type !== 'essentials'"
+			ref="radioGroupRef"
 			:model-value="parsedValue"
 			:rules="[isRequired]"
 			data-test-id="radio-group"
+			aria-required="true"
 			inline
-			:label="locales.fieldLabel(locales[type].title)"
 			hide-details="auto"
 			class="vd-cookies-information__radio-group"
 			@update:model-value="status = $event === 'accept'"
@@ -81,12 +152,14 @@
 			<VSpacer />
 
 			<VRadio
+				ref="rejectRadioRef"
 				:label="locales.reject"
 				:value="'reject'"
 				color="primary"
 			/>
 
 			<VRadio
+				ref="acceptRadioRef"
 				:label="locales.accept"
 				:value="'accept'"
 				class="mr-0"
@@ -110,6 +183,11 @@ details > summary {
 	}
 }
 
+.vd-cookies-information__heading {
+	text-align: end;
+	opacity: var(--v-medium-emphasis-opacity);
+}
+
 .vd-cookies-information__radio-group {
 	margin-top: 0;
 

package/src/components/CookiesSelection/CookiesSelection.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-	import { computed, ref } from 'vue'
-	import type { VForm } from 'vuetify/components'
+	import { computed, ref, onMounted, nextTick } from 'vue'
+	import type { VForm, VBtn } from 'vuetify/components'
 	import CookiesInformation from './CookiesInformation/CookiesInformation.vue'
 	import { locales } from './locales'
 	import type { CookieTypes, CookiesItems, Preferences } from './types'
@@ -21,6 +21,18 @@
 		analytics: undefined,
 	})
 
+	const submitBtnRef = ref<VBtn | null>(null)
+
+	// Mettre le focus sur le bouton de soumission lorsque le composant est monté
+	onMounted(() => {
+		nextTick(() => {
+			// Accéder à l'élément DOM réel via $el
+			if (submitBtnRef.value?.$el instanceof HTMLElement) {
+				submitBtnRef.value.$el.focus()
+			}
+		})
+	})
+
 	const filteredPreferences = computed(() => {
 		const filtered: Partial<Preferences> = {}
 
@@ -115,6 +127,7 @@
 				<VSpacer />
 
 				<VBtn
+					ref="submitBtnRef"
 					data-test-id="submit"
 					color="primary"
 					@click="submitForm"

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

@@ -22,7 +22,11 @@ exports[`CookiesSelection > renders correctly 1`] = `
         v-theme--light
       "
       role="progressbar"
-      style="top: 0px; height: 0px; --v-progress-linear-height: 2px;"
+      style="
+        top: 0px;
+        height: 0px;
+        --v-progress-linear-height: 2px;
+      "
     >
       <!---->
       <div
@@ -31,7 +35,10 @@ exports[`CookiesSelection > renders correctly 1`] = `
       ></div>
       <div
         class="v-progress-linear__buffer"
-        style="opacity: NaN; width: 0%;"
+        style="
+          opacity: NaN;
+          width: 0%;
+        "
       ></div>
       <transition-stub
         appear="false"
@@ -217,6 +224,14 @@ exports[`CookiesSelection > renders correctly 1`] = `
           <!---->
         </div>
       </details>
+      <div
+        aria-level="3"
+        class="vd-cookies-information__heading"
+        id="radio-group-essentials"
+        role="heading"
+      >
+        Accepter les cookies de type Cookies requis, ce champ est requis.
+      </div>
       <!-- v-if -->
     </div>
     <div class="
@@ -303,6 +318,14 @@ exports[`CookiesSelection > renders correctly 1`] = `
           <!---->
         </div>
       </details>
+      <div
+        aria-level="3"
+        class="vd-cookies-information__heading"
+        id="radio-group-functional"
+        role="heading"
+      >
+        Accepter les cookies de type Cookies fonctionnels, ce champ est requis.
+      </div>
       <div class="
         v-input
         v-input--center-affix
@@ -315,21 +338,13 @@ exports[`CookiesSelection > renders correctly 1`] = `
       ">
         <!---->
         <div class="v-input__control">
-          <label
-            class="v-label"
-            id="radio-group-2"
-          >
-            <!---->
-            Accepter les cookies de type Cookies fonctionnels, ce champ est requis.
-          </label>
+          <!---->
           <div
-            aria-describedby="radio-group-2-messages"
-            aria-labelledby="radio-group-2"
+            aria-required="true"
             class="
               v-selection-control-group
               v-selection-control-group--inline
             "
-            label="Accepter les cookies de type Cookies fonctionnels, ce champ est requis."
             role="radiogroup"
           >
             <div class="v-spacer"></div>
@@ -356,8 +371,8 @@ exports[`CookiesSelection > renders correctly 1`] = `
                   <input
                     aria-disabled="false"
                     aria-label="Refuser"
-                    id="input-5"
-                    name="radio-group-2"
+                    id="input-v-5"
+                    name="radio-group-v-2"
                     type="radio"
                     value="reject"
                   />
@@ -368,7 +383,7 @@ exports[`CookiesSelection > renders correctly 1`] = `
                   v-label
                   v-label--clickable
                 "
-                for="input-5"
+                for="input-v-5"
               >
                 <!---->
                 Refuser
@@ -398,8 +413,8 @@ exports[`CookiesSelection > renders correctly 1`] = `
                   <input
                     aria-disabled="false"
                     aria-label="Accepter"
-                    id="input-6"
-                    name="radio-group-2"
+                    id="input-v-6"
+                    name="radio-group-v-2"
                     type="radio"
                     value="accept"
                   />
@@ -410,7 +425,7 @@ exports[`CookiesSelection > renders correctly 1`] = `
                   v-label
                   v-label--clickable
                 "
-                for="input-6"
+                for="input-v-6"
               >
                 <!---->
                 Accepter
@@ -506,6 +521,14 @@ exports[`CookiesSelection > renders correctly 1`] = `
           <!---->
         </div>
       </details>
+      <div
+        aria-level="3"
+        class="vd-cookies-information__heading"
+        id="radio-group-analytics"
+        role="heading"
+      >
+        Accepter les cookies de type Cookies d’analyse, ce champ est requis.
+      </div>
       <div class="
         v-input
         v-input--center-affix
@@ -518,21 +541,13 @@ exports[`CookiesSelection > renders correctly 1`] = `
       ">
         <!---->
         <div class="v-input__control">
-          <label
-            class="v-label"
-            id="radio-group-7"
-          >
-            <!---->
-            Accepter les cookies de type Cookies d’analyse, ce champ est requis.
-          </label>
+          <!---->
           <div
-            aria-describedby="radio-group-7-messages"
-            aria-labelledby="radio-group-7"
+            aria-required="true"
             class="
               v-selection-control-group
               v-selection-control-group--inline
             "
-            label="Accepter les cookies de type Cookies d’analyse, ce champ est requis."
             role="radiogroup"
           >
             <div class="v-spacer"></div>
@@ -559,8 +574,8 @@ exports[`CookiesSelection > renders correctly 1`] = `
                   <input
                     aria-disabled="false"
                     aria-label="Refuser"
-                    id="input-10"
-                    name="radio-group-7"
+                    id="input-v-10"
+                    name="radio-group-v-7"
                     type="radio"
                     value="reject"
                   />
@@ -571,7 +586,7 @@ exports[`CookiesSelection > renders correctly 1`] = `
                   v-label
                   v-label--clickable
                 "
-                for="input-10"
+                for="input-v-10"
               >
                 <!---->
                 Refuser
@@ -601,8 +616,8 @@ exports[`CookiesSelection > renders correctly 1`] = `
                   <input
                     aria-disabled="false"
                     aria-label="Accepter"
-                    id="input-11"
-                    name="radio-group-7"
+                    id="input-v-11"
+                    name="radio-group-v-7"
                     type="radio"
                     value="accept"
                   />
@@ -613,7 +628,7 @@ exports[`CookiesSelection > renders correctly 1`] = `
                   v-label
                   v-label--clickable
                 "
-                for="input-11"
+                for="input-v-11"
               >
                 <!---->
                 Accepter

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

@@ -14,6 +14,7 @@ exports[`CopyBtn > renders correctly 1`] = `
     contained="false"
     disabled="false"
     eager="true"
+    interactive="false"
     location="right"
     locationstrategy="connected"
     minwidth="0"
@@ -25,7 +26,6 @@ exports[`CopyBtn > renders correctly 1`] = `
     origin="auto"
     scrim="false"
     scrollstrategy="reposition"
-    transition="false"
     zindex="2000"
   ></v-tooltip-stub>
 </div>

package/src/components/{SelectBtnField → Customs/Selects/SelectBtnField}/Accessibilite.stories.ts

@@ -8,7 +8,7 @@ const iconEye = mdiEye
 const linkICon = mdiLink
 
 export default {
-	title: 'Composants/Formulaires/SelectBtnField/Accessibilité',
+	title: 'Composants/Formulaires/Selects/SelectBtnField/Accessibilité',
 }
 
 export const AccessibilitePanel: StoryObj = {

package/src/components/{SelectBtnField → Customs/Selects/SelectBtnField}/SelectBtnField.mdx

@@ -3,7 +3,7 @@ import {Controls, Canvas, Meta, Source, Story} from '@storybook/blocks';
 import SelectBtnField from './SelectBtnField.vue';
 import * as SelectBtnFieldStories from './SelectBtnField.stories';
 
-<Meta title="Composants/Formulaires/SelectBtnField" component={SelectBtnField}/>
+<Meta title="Composants/Formulaires/Selects/SelectBtnField" component={SelectBtnField}/>
 
 # SelectBtnField
 

package/src/components/{SelectBtnField → Customs/Selects/SelectBtnField}/SelectBtnField.stories.ts

@@ -1,11 +1,11 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
 import SelectBtnField from './SelectBtnField.vue'
-import SyAlert from '../SyAlert/SyAlert.vue'
+import SyAlert from '@/components/SyAlert/SyAlert.vue'
 import { VBtn } from 'vuetify/components'
 import { ref } from 'vue'
 
 const meta = {
-	title: 'Composants/Formulaires/SelectBtnField',
+	title: 'Composants/Formulaires/Selects/SelectBtnField',
 	component: SelectBtnField,
 	decorators: [
 		() => ({

package/src/components/{SelectBtnField → Customs/Selects/SelectBtnField}/Usages.stories.ts

@@ -4,7 +4,7 @@ import { checkIcon, linkICon, croixIcon } from '@/constants/icons'
 import Usages from '@/components/Usages/Usages.vue'
 
 export default {
-	title: 'Composants/Formulaires/SelectBtnField/Usages',
+	title: 'Composants/Formulaires/Selects/SelectBtnField/Usages',
 }
 const itemsToDo = [
 	'Utiliser des libellés clairs et compréhensibles.',