@cnamts/synapse 0.0.5-alpha → 0.0.6-alpha

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

@@ -0,0 +1,192 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`CookiesSelection > renders correctly 1`] = `
+"<div class="v-card v-theme--light bg-transparent v-card--density-default elevation-0 v-card--variant-elevated vd-cookies-card">
+  <!---->
+  <div class="v-card__loader">
+    <div class="v-progress-linear v-theme--light v-locale--is-ltr" style="top: 0px; height: 0px; --v-progress-linear-height: 2px;" role="progressbar" aria-hidden="true" aria-valuemin="0" aria-valuemax="100">
+      <!---->
+      <div class="v-progress-linear__background" style="opacity: NaN;"></div>
+      <div class="v-progress-linear__buffer" style="opacity: NaN; width: 0%;"></div>
+      <transition-stub name="fade-transition" appear="false" persisted="false" css="true">
+        <div class="v-progress-linear__indeterminate">
+          <div class="v-progress-linear__indeterminate long"></div>
+          <div class="v-progress-linear__indeterminate short"></div>
+        </div>
+      </transition-stub>
+      <!---->
+    </div>
+  </div>
+  <!---->
+  <!---->
+  <form class="v-form" novalidate="">
+    <p class="mb-4">Définissez vos préférences de collecte et de traitement de vos données sur ce site.</p>
+    <p class="mb-4">Un cookie est un petit fichier texte déposé sur votre terminal (ordinateur, tablette ou mobile) lors de la visite d’un site ou lors de la consultation d’une publicité. Il contient plusieurs données&nbsp;: le nom du service qui l’a déposé, un identifiant sous forme de numéro unique, une valeur et éventuellement une date d’expiration.</p>
+    <div class="d-flex flex-wrap justify-end mx-n2 mt-n2 mb-6"><button type="button" class="v-btn v-theme--light text-primary v-btn--density-default v-btn--size-default v-btn--variant-outlined ma-2" data-test-id="reject-all"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
+        <!----><span class="v-btn__content" data-no-activator="">Tout refuser</span>
+        <!---->
+        <!---->
+      </button><button type="button" class="v-btn v-theme--light text-primary v-btn--density-default v-btn--size-default v-btn--variant-outlined ma-2" data-test-id="accept-all"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
+        <!----><span class="v-btn__content" data-no-activator="">Tout accepter</span>
+        <!---->
+        <!---->
+      </button></div>
+    <div data-v-2ca04413="" class="vd-cookies-information mb-6">
+      <h2 data-v-2ca04413="" class="text-subtitle-1 font-weight-bold mb-2">Cookies requis</h2>
+      <p data-v-2ca04413="" class="mb-4">Ces cookies sont indispensables au fonctionnement du site et ne peuvent être désactivés.</p>
+      <details data-v-2ca04413="">
+        <summary data-v-2ca04413="" class="mb-1">Afficher les cookies <i data-v-2ca04413="" class="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z mdi v-icon notranslate v-theme--light v-icon--size-default mr-2" aria-hidden="true" data-test="chevron"></i></summary>
+        <div data-v-d0e8c396="" data-v-2ca04413="" class="v-table v-theme--light v-table--density-default vd-cookie-table bg-transparent mb-2">
+          <!---->
+          <div class="v-table__wrapper">
+            <table>
+              <thead data-v-d0e8c396="">
+                <tr data-v-d0e8c396="">
+                  <th data-v-d0e8c396="" style="width: 180px;" class="text-left">Dénomination du cookie</th>
+                  <th data-v-d0e8c396="" style="width: 328px;" class="text-left">Finalité</th>
+                  <th data-v-d0e8c396="" style="width: 180px;" class="text-left">Durée de conservation</th>
+                </tr>
+              </thead>
+              <tbody data-v-d0e8c396="">
+                <tr data-v-d0e8c396="">
+                  <td data-v-d0e8c396="">session</td>
+                  <td data-v-d0e8c396="">Sauvegarde la session pour rester connecté.</td>
+                  <td data-v-d0e8c396="">20 heures</td>
+                </tr>
+                <tr data-v-d0e8c396="">
+                  <td data-v-d0e8c396="">cookie_policy</td>
+                  <td data-v-d0e8c396="">Sauvegarde les préférences de cookies.</td>
+                  <td data-v-d0e8c396="">1 an</td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+          <!---->
+        </div>
+      </details>
+      <!--v-if-->
+    </div>
+    <div data-v-2ca04413="" class="vd-cookies-information mb-6">
+      <h2 data-v-2ca04413="" class="text-subtitle-1 font-weight-bold mb-2">Cookies fonctionnels</h2>
+      <p data-v-2ca04413="" class="mb-4">Ces cookies sont utilisés pour capturer vos préférences sur notre site. Ils permettent de vous assurer un confort dans votre navigation.</p>
+      <details data-v-2ca04413="">
+        <summary data-v-2ca04413="" class="mb-1">Afficher les cookies <i data-v-2ca04413="" class="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z mdi v-icon notranslate v-theme--light v-icon--size-default mr-2" aria-hidden="true" data-test="chevron"></i></summary>
+        <div data-v-d0e8c396="" data-v-2ca04413="" class="v-table v-theme--light v-table--density-default vd-cookie-table bg-transparent mb-2">
+          <!---->
+          <div class="v-table__wrapper">
+            <table>
+              <thead data-v-d0e8c396="">
+                <tr data-v-d0e8c396="">
+                  <th data-v-d0e8c396="" style="width: 180px;" class="text-left">Dénomination du cookie</th>
+                  <th data-v-d0e8c396="" style="width: 328px;" class="text-left">Finalité</th>
+                  <th data-v-d0e8c396="" style="width: 180px;" class="text-left">Durée de conservation</th>
+                </tr>
+              </thead>
+              <tbody data-v-d0e8c396="">
+                <tr data-v-d0e8c396="">
+                  <td data-v-d0e8c396="">contrast</td>
+                  <td data-v-d0e8c396="">Sauvegarde la personnalisation de l’affichage.</td>
+                  <td data-v-d0e8c396="">1 an</td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+          <!---->
+        </div>
+      </details>
+      <div data-v-2ca04413="" class="v-input v-input--horizontal v-input--center-affix v-input--density-default v-theme--light v-locale--is-ltr v-radio-group vd-cookies-information__radio-group" data-test-id="radio-group">
+        <!---->
+        <div class="v-input__control">
+          <!---->
+          <div class="v-selection-control-group v-selection-control-group--inline" role="radiogroup" aria-describedby="radio-group-2-messages">
+            <div data-v-2ca04413="" class="v-spacer"></div>
+            <div data-v-2ca04413="" class="v-selection-control v-selection-control--inline v-selection-control--density-default v-radio">
+              <div class="v-selection-control__wrapper">
+                <!---->
+                <div class="v-selection-control__input"><i class="mdi-radiobox-blank mdi v-icon notranslate v-theme--light v-icon--size-default" aria-hidden="true"></i><input id="input-5" aria-disabled="false" aria-label="Refuser" type="radio" name="radio-group-2" value="reject"></div>
+              </div><label class="v-label v-label--clickable" for="input-5">
+                <!---->Refuser
+              </label>
+            </div>
+            <div data-v-2ca04413="" class="v-selection-control v-selection-control--inline v-selection-control--density-default v-radio mr-0">
+              <div class="v-selection-control__wrapper">
+                <!---->
+                <div class="v-selection-control__input"><i class="mdi-radiobox-blank mdi v-icon notranslate v-theme--light v-icon--size-default" aria-hidden="true"></i><input id="input-6" aria-disabled="false" aria-label="Accepter" type="radio" name="radio-group-2" value="accept"></div>
+              </div><label class="v-label v-label--clickable" for="input-6">
+                <!---->Accepter
+              </label>
+            </div>
+          </div>
+        </div>
+        <!---->
+        <!---->
+      </div>
+    </div>
+    <div data-v-2ca04413="" class="vd-cookies-information mb-6">
+      <h2 data-v-2ca04413="" class="text-subtitle-1 font-weight-bold mb-2">Cookies d’analyse</h2>
+      <p data-v-2ca04413="" class="mb-4">Ces cookies sont dédiés à l’amélioration de notre site en analysant votre expérience d’utilisation. Ils nous sont très utiles pour vous proposer un site de bonne qualité.</p>
+      <details data-v-2ca04413="">
+        <summary data-v-2ca04413="" class="mb-1">Afficher les cookies <i data-v-2ca04413="" class="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z mdi v-icon notranslate v-theme--light v-icon--size-default mr-2" aria-hidden="true" data-test="chevron"></i></summary>
+        <div data-v-d0e8c396="" data-v-2ca04413="" class="v-table v-theme--light v-table--density-default vd-cookie-table bg-transparent mb-2">
+          <!---->
+          <div class="v-table__wrapper">
+            <table>
+              <thead data-v-d0e8c396="">
+                <tr data-v-d0e8c396="">
+                  <th data-v-d0e8c396="" style="width: 180px;" class="text-left">Dénomination du cookie</th>
+                  <th data-v-d0e8c396="" style="width: 328px;" class="text-left">Finalité</th>
+                  <th data-v-d0e8c396="" style="width: 180px;" class="text-left">Durée de conservation</th>
+                </tr>
+              </thead>
+              <tbody data-v-d0e8c396="">
+                <tr data-v-d0e8c396="">
+                  <td data-v-d0e8c396="">user_id</td>
+                  <td data-v-d0e8c396="">Sauvegarde l’identifiant unique de visiteur.</td>
+                  <td data-v-d0e8c396="">6 mois</td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+          <!---->
+        </div>
+      </details>
+      <div data-v-2ca04413="" class="v-input v-input--horizontal v-input--center-affix v-input--density-default v-theme--light v-locale--is-ltr v-radio-group vd-cookies-information__radio-group" data-test-id="radio-group">
+        <!---->
+        <div class="v-input__control">
+          <!---->
+          <div class="v-selection-control-group v-selection-control-group--inline" role="radiogroup" aria-describedby="radio-group-7-messages">
+            <div data-v-2ca04413="" class="v-spacer"></div>
+            <div data-v-2ca04413="" class="v-selection-control v-selection-control--inline v-selection-control--density-default v-radio">
+              <div class="v-selection-control__wrapper">
+                <!---->
+                <div class="v-selection-control__input"><i class="mdi-radiobox-blank mdi v-icon notranslate v-theme--light v-icon--size-default" aria-hidden="true"></i><input id="input-10" aria-disabled="false" aria-label="Refuser" type="radio" name="radio-group-7" value="reject"></div>
+              </div><label class="v-label v-label--clickable" for="input-10">
+                <!---->Refuser
+              </label>
+            </div>
+            <div data-v-2ca04413="" class="v-selection-control v-selection-control--inline v-selection-control--density-default v-radio mr-0">
+              <div class="v-selection-control__wrapper">
+                <!---->
+                <div class="v-selection-control__input"><i class="mdi-radiobox-blank mdi v-icon notranslate v-theme--light v-icon--size-default" aria-hidden="true"></i><input id="input-11" aria-disabled="false" aria-label="Accepter" type="radio" name="radio-group-7" value="accept"></div>
+              </div><label class="v-label v-label--clickable" for="input-11">
+                <!---->Accepter
+              </label>
+            </div>
+          </div>
+        </div>
+        <!---->
+        <!---->
+      </div>
+    </div>
+    <div class="d-flex mt-16">
+      <div class="v-spacer"></div><button type="button" class="v-btn v-btn--elevated v-theme--light bg-primary v-btn--density-default v-btn--size-default v-btn--variant-elevated" data-test-id="submit"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
+        <!----><span class="v-btn__content" data-no-activator="">Enregistrer mes choix</span>
+        <!---->
+        <!---->
+      </button>
+    </div>
+  </form>
+  <!---->
+  <!----><span class="v-card__underlay"></span>
+</div>"
+`;

package/src/components/CookiesSelection/types.ts

@@ -0,0 +1,15 @@
+export type CookieTypes = 'essentials' | 'functional' | 'analytics'
+
+export type CookiesItems = {
+	[key in CookieTypes]?: Cookie[]
+}
+
+export type Preferences = {
+	[key in CookieTypes]: boolean | undefined
+}
+
+export interface Cookie {
+	name: string
+	description?: string
+	conservation: string
+}

package/src/components/CopyBtn/AccessibiliteItems.ts

@@ -1,37 +1,7 @@
 import { ExpertiseLevelEnum } from './constants/ExpertiseLevelEnum'
 
 export const AccessibiliteItemsIndeterminate = [
-	{
-		title: 'Catégorie 1 : Images',
-		subtitle: '1.4 Pour chaque image utilisée comme CAPTCHA ou comme image-test, ayant une alternative textuelle, cette alternative permet-elle d’identifier la nature et la fonction de l’image ?',
-		items: [
-			{
-
-				precision: '1.4.1 Pour chaque image (balise <img>) utilisée comme CAPTCHA ou comme image-test, ayant une alternative textuelle, cette alternative est-elle pertinente ?',
-				link: 'https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#1.4.1',
-				solution: [{
-					info1: '1. Retrouver dans le document les images structurées au moyen d’un élément <img> pourvues d’une alternative textuelle et utilisées comme CAPTCHA ou comme image-test',
-					info2: '2. Pour chaque image, vérifier que l’alternative textuelle est pertinente',
-					info3: '3. Si c’est le cas pour chaque image, le test est validé',
-				}],
-				expertise: ExpertiseLevelEnum.DEV,
 
-			},
-			{
-
-				precision: ' 1.4.6 Pour chaque image vectorielle (balise <svg>) utilisée comme CAPTCHA ou comme image-test, ayant une alternative textuelle, cette alternative est-elle pertinente ?',
-				link: 'https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#1.4.6',
-				solution: [{
-					info1: '1. Retrouver dans le document les éléments <svg> pourvus d’une alternative textuelle et utilisés comme CAPTCHA ou comme image-test;',
-					info2: '2. Pour chaque élément <svg>, vérifier que l’alternative textuelle est pertinente',
-					info3: '3. Si c’est le cas pour chaque image, le test est validé',
-				}],
-				expertise: ExpertiseLevelEnum.DEV,
-
-			},
-
-		],
-	},
 	{
 		title: 'Catégorie 10 : Présentation de l\'information',
 		subtitle: '10.8 Pour chaque page web, les contenus cachés ont-ils vocation à être ignorés par les technologies d’assistance',

package/src/components/CopyBtn/CopyBtn.mdx

@@ -18,7 +18,7 @@ Le composant `CopyBtn` est utilisé pour afficher un bouton permettant à l’ut
 
 <Source dark code={`
 <script setup lang="ts">
-import CopyBtn from '@cnamts/synapse'
+import { CopyBtn } from '@cnamts/synapse'
 </script>
 
 <template>

package/src/components/CopyBtn/CopyBtn.stories.ts

@@ -81,7 +81,7 @@ export const Default: Story = {
 			{
 				name: 'Script',
 				code: `<script setup lang="ts">
-	import CopyBtn from '@cnamts/synapse'
+	import { CopyBtn } from '@cnamts/synapse'
 </script>
 				`,
 			},
@@ -157,7 +157,7 @@ export const NoTooltip: Story = {
 			{
 				name: 'Script',
 				code: `<script setup lang="ts">
-	import CopyBtn from '@cnamts/synapse'
+	import { CopyBtn } from '@cnamts/synapse'
 </script>
 				`,
 			},
@@ -216,7 +216,7 @@ export const SlotIcon: Story = {
 			{
 				name: 'Script',
 				code: `<script setup lang="ts">
-	import CopyBtn from '@cnamts/synapse'
+	import { CopyBtn } from '@cnamts/synapse'
 	import { mdiContentDuplicate } from '@mdi/js'
 	
 	const duplicateIcon = mdiContentDuplicate
@@ -285,7 +285,7 @@ export const SlotTooltip: Story = {
 			{
 				name: 'Script',
 				code: `<script setup lang="ts">
-	import CopyBtn from '@cnamts/synapse'
+	import { CopyBtn } from '@cnamts/synapse'
 	
 	const tooltip = 'Texte personalisé'
 </script>

package/src/components/CopyBtn/CopyBtn.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
 	import { ref } from 'vue'
-	import { VMenu, VIcon, VBtn } from 'vuetify/components'
 	import { mdiContentCopy } from '@mdi/js'
 
 	import useCustomizableOptions, { type CustomizableOptions } from '@/composables/useCustomizableOptions'

package/src/components/Customs/SyBtnSelect/Accessibilite.mdx

@@ -0,0 +1,14 @@
+import { Meta, Story } from '@storybook/addon-docs';
+import * as AccessStories from './Accessibilite.stories.ts';
+
+<Meta of={AccessStories} />
+
+Accessibilité
+=============
+<Story of={AccessStories.Legende} />
+<br />
+
+--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
+
+<Story of={AccessStories.AccessibilitePanel} />
+<br />

package/src/components/Customs/SyBtnSelect/Accessibilite.stories.ts

@@ -0,0 +1,193 @@
+import { VExpansionPanels, VExpansionPanel, VExpansionPanelTitle, VExpansionPanelText, VDataTable, VIcon } from 'vuetify/components'
+import type { StoryObj } from '@storybook/vue3'
+import { AccessibiliteItemsIndeterminate, AccessibiliteItemsValidated } from './AccessibiliteItems'
+import { mdiCheckboxMarkedCircle, mdiLink, mdiEye } from '@mdi/js'
+
+const checkIcon = mdiCheckboxMarkedCircle
+const iconEye = mdiEye
+const linkICon = mdiLink
+
+export default {
+	title: 'Composants/Formulaires/SyBtnSelect/Accessibilité',
+}
+
+export const AccessibilitePanel: StoryObj = {
+
+	render: () => {
+		return {
+			components: { VExpansionPanels, VExpansionPanel, VExpansionPanelTitle, VExpansionPanelText, VDataTable, VIcon },
+
+			setup() {
+				const icon = checkIcon
+
+				return { AccessibiliteItemsIndeterminate, AccessibiliteItemsValidated, icon, linkICon, iconEye }
+			},
+			template: `
+				<div class="accessibiliteItems" style="display:flex; max-width: none !important;">
+					<v-col cols="6">
+						<div style="display:flex; margin-bottom: 10px; justify-content: space-between; align-items: center;">
+							<h5>{{ AccessibiliteItemsIndeterminate.length }} critères à prendre en charge par le projet</h5>
+							<div style="display: flex; align-items: center;">
+								<v-btn variant="tonal" color="red" size="x-small" style="margin: 4px;font-size: 8px;"
+									   rounded>Tanaguru
+								</v-btn>
+							</div>
+						</div>
+
+						<v-expansion-panels value="opened" multiple>
+							<v-expansion-panel v-for="(item, index) in AccessibiliteItemsIndeterminate" :key="index" style="background-color: rgba(42, 96, 158, 0.1); margin-bottom: 10px;">
+								<v-expansion-panel-title>
+									<VIcon :icon="iconEye" style="margin-right: 5px; color:#5778b7;"/>
+									{{ item.title }}
+								</v-expansion-panel-title>
+								<v-expansion-panel-text>
+									<v-expansion-panels>
+									<v-expansion-panel v-for="(i, index) in item.items2" :key="i"  style="margin-bottom: 10px;">
+											<v-expansion-panel-title
+												style="font-weight: bold; font-size: 13px; line-height: 16px;">
+												{{ i.subtitle}}
+											</v-expansion-panel-title>
+											<v-expansion-panel-text>
+												<div>
+													<p style="font-size: 13px;line-height: 16px;">
+														{{ i.precision }}
+													</p>
+													<div v-for="(value, index) in i.solution"
+														 style="margin-top:15px; font-size: 13px;line-height: 16px;">
+														<p style="font-weight: bold;">Méthodologie du test : <a
+															href="{{i.link}}" target="blank">
+															<VIcon :icon="linkICon"/>
+														</a></p>
+
+														<p>{{ value.info1 }}</p>
+														<p>{{ value.info2 }}</p>
+														<p>{{ value.info3 }}</p>
+
+													</div>
+													<span style="display:flex; justify-content:center; margin-bottom:5px;">______</span>
+												</div>
+											</v-expansion-panel-text>
+										</v-expansion-panel>
+										<v-expansion-panel >
+											<v-expansion-panel-title
+												style="font-weight: bold; font-size: 13px; line-height: 16px;">
+												{{ item.subtitle }}
+											</v-expansion-panel-title>
+											<v-expansion-panel-text>
+												<div v-for="(value, i) in item.items" :key="i">
+													<p style="font-size: 13px;line-height: 16px;">
+														{{ value.precision }}
+													</p>
+													<div v-for="element in value.solution"
+														 style="margin-top:15px; font-size: 13px;line-height: 16px;">
+														<p style="font-weight: bold;">Méthodologie du test : <a
+															href="value.link" target="blank">
+															<VIcon :icon="linkICon"/>
+														</a></p>
+
+														<p>{{ element.info1 }}</p>
+														<p>{{ element.info2 }}</p>
+														<p>{{ element.info3 }}</p>
+
+													</div>
+													<span style="display:flex; justify-content:center; margin-bottom:5px;">______</span>
+												</div>
+											</v-expansion-panel-text>
+										</v-expansion-panel>
+									</v-expansion-panels>
+								</v-expansion-panel-text>
+							</v-expansion-panel>
+						</v-expansion-panels>
+					</v-col>
+					<v-col cols="6">
+						<div style="display:flex; margin-bottom: 10px; justify-content: space-between; align-items: center;">
+							<h5>{{ AccessibiliteItemsValidated.length }} critères pris en charge par l'équipe Design System</h5>
+							<div style="display: flex; align-items: center;">
+								<v-btn variant="tonal" color="red" size="x-small" style="margin: 4px;font-size: 8px;"
+									   rounded>Tanaguru
+								</v-btn>
+							</div>
+						</div>
+						<v-expansion-panels v-if="AccessibiliteItemsValidated.length > 0" value="opened" multiple>
+							<v-expansion-panel 
+								v-for="(item, index) in AccessibiliteItemsValidated"
+								:key="index" style="background-color: rgba(53,135,0,0.1); margin-bottom: 10px;">
+								<v-expansion-panel-title>
+									<VIcon color="green" :icon="icon" style="margin-right: 5px;"/>
+									{{ item.title }}
+								</v-expansion-panel-title>
+								<v-expansion-panel-text>
+									<v-expansion-panels>
+										<v-expansion-panel>
+											<v-expansion-panel-title style="font-weight: bold;font-size: 13px; line-height: 16px;">
+												{{ item.subtitle }}
+											</v-expansion-panel-title>
+											<v-expansion-panel-text>
+												<div v-for="(value, i) in item.items" :key="i">
+													<p style="font-size: 13px;line-height: 16px;">
+														{{ value.precision }}
+													</p>
+													<div v-for="element in value.solution"
+														 style="margin-top:15px; font-size: 13px;line-height: 16px;">
+														<p style="font-weight: bold;">Méthodologie du test : <a
+															href="value.link" target="blank">
+															<VIcon :icon="linkICon"/>
+														</a></p>
+														<p>{{ element.info1 }}</p>
+														<p>{{ element.info2 }}</p>
+														<p>{{ element.info3 }}</p>
+													</div>
+													<span style="display:flex; justify-content:center; margin-bottom:5px;">______</span>
+												</div>
+											</v-expansion-panel-text>
+										</v-expansion-panel>
+									</v-expansion-panels>
+								</v-expansion-panel-text>
+							</v-expansion-panel>
+						</v-expansion-panels>
+						<div v-else style="display: flex;justify-content: center;"><span style="text-align:center;"  >Pas de critère d'accessibilité bloquant</span></div>
+					</v-col>
+				</div>
+			`,
+		}
+	},
+	tags: ['!dev'],
+}
+
+export const Legende: StoryObj = {
+	args: {
+		icon: checkIcon,
+	},
+	render: (args) => {
+		return {
+			components: { VIcon },
+			setup() {
+				return { args }
+			},
+			template: `
+			  <p style="color: grey;font-size: 11px; margin-bottom: 12px;">Date de conception: 20/11/2024</p>
+			  <div>
+				<p>Le tableau ci-dessous liste nos recommandations suivant les <a target="blank" style="color:#0C41BD;" href="https://www.numerique.gouv.fr/publications/rgaa-accessibilite/#contenu">catégories du RGAA</a>.</p>
+				<p style="margin-bottom: 12px;font-weight:bold;">Pour rappel le composant seul ne garantie pas
+				  l'accessibilité du site.</p>
+				<div style="font-size: 14px">
+				  <p>Nous avons deux façons de relever les problèmes d'accessibilité des composants :</p>
+				  <div>
+					<v-btn variant="tonal" color="grey" size="x-small" style="margin: 2px;font-size: 8px;" rounded>
+					  Audit
+					</v-btn>
+					Problèmes relevés par le projet
+				  </div>
+				  <div>
+					<v-btn variant="tonal" color="red" size="x-small" style="margin: 2px;font-size: 8px;" rounded>
+					  Tanaguru
+					</v-btn>
+					Problèmes relevés par Tanaguru
+				  </div>
+				</div>
+			  </div>
+            `,
+		}
+	},
+	tags: ['!dev'],
+}

package/src/components/Customs/SyBtnSelect/AccessibiliteItems.ts

@@ -0,0 +1,139 @@
+import { ExpertiseLevelEnum } from './constants/ExpertiseLevelEnum'
+
+export const AccessibiliteItemsIndeterminate = [
+
+	{
+		title: 'Catégorie 3 : Couleurs',
+		subtitle: '3.2 Dans chaque page web, le contraste entre la couleur du texte et la couleur de son arrière-plan est-il suffisamment élevé?',
+		items: [
+			{
+				precision: '3.2.1 Dans chaque page web, le texte et le texte en image sans effet de graisse d’une taille restituée inférieure à 24px vérifient-ils une de ces conditions? Le rapport de contraste entre le texte et son arrière-plan est de 4.5:1, au moins; Un mécanisme permet à l’utilisateur d’afficher le texte avec un rapport de contraste de 4.5:1, au moins.',
+				link: 'https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#3.2.1',
+				solution: [{
+					info1: '1. Retrouver dans le document les textes et les textes en image sans effet de graisse d’une taille restituée inférieure à 24px qui pourraient poser des problèmes de contraste ;',
+					info2: '2. Pour chacun de ces textes, vérifier que : Soit le rapport de contraste entre le texte et son arrière-plan est de 4.5:1, au moins; Soit un mécanisme permet à l’utilisateur d’afficher le texte avec un rapport de contraste de 4.5:1, au moins.',
+					info3: '3. Si c’est le cas pour chaque texte, le test est validé',
+				}],
+				expertise: ExpertiseLevelEnum.DEV,
+
+			},
+
+		],
+	},
+
+	{
+		title: 'Catégorie 10 : Présentation de l’information',
+		subtitle: '10.1 Dans le site web, des feuilles de styles sont-elles utilisées pour contrôler la présentation de l’information ? ?',
+		items: [
+
+			{
+				precision: '10.1.1 Dans chaque page web, les balises servant à la présentation de l’information ne doivent pas être présentes dans le code source généré des pages. Cette règle est-elle respectée ? ',
+				link: 'https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#10.1.1',
+				solution: [{
+					info1: '1. Vérifier l’absence des éléments de présentation <basefont>, <big>, <blink>, <center>, <font>, <marquee>, <s>, <strike>, <tt> ; ',
+					info2: '2. Vérifier l’absence de l’élément <u> uniquement si le DOCTYPE du document ne correspond pas à HTML 5 ; ',
+					info3: '3. Si c’est le cas, le test est validé',
+				}],
+				expertise: ExpertiseLevelEnum.DEV,
+
+			},
+
+		],
+	},
+
+]
+
+export const AccessibiliteItemsValidated = [
+	{
+		title: 'Catégorie 1 : Images',
+		subtitle: '1.2 Chaque image de décoration est-elle correctement ignorée par les technologies d’assistance ?',
+		items: [
+
+			{
+				precision: '1.2.4 Chaque image vectorielle (balise <svg>) de décoration, sans légende, vérifie-t-elle ces conditions ?'
+					+ ' La balise <svg> possède un attribut WAI-ARIA aria-hidden="true" ;'
+					+ ' La balise <svg> et ses enfants sont dépourvus d’alternative textuelle ;'
+					+ ' Les balises <title> et <desc> sont absentes ou vides ;'
+					+ ' La balise <svg> et ses enfants sont dépourvus d’attribut title.',
+				link: 'https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#1.2.4',
+				solution: [{
+					info1: '1. Retrouver dans le document les images décoratives dépourvues de légende structurées au moyen d’un élément <svg> ;',
+					info2: '2. Pour chaque image, vérifier que l’élément <svg> ne possède pas d’attributs aria-labelledby ou aria-label et qu’il :'
+						+ ' Possède un attribut WAI-ARIA aria-hidden="true" ;'
+						+ ' Et est dépourvu d’alternative textuelle (ainsi que ses éléments enfants) ;'
+						+ ' Et ne contient pas d’éléments <title> et <desc> à moins que vides de contenu ;'
+						+ ' Et est dépourvu d’attribut title (ainsi que ses éléments enfants).',
+					info3: '3. Si c’est le cas pour chaque image, le test est validé',
+				}],
+				expertise: ExpertiseLevelEnum.DESIGN,
+
+			},
+
+		],
+
+	},
+	{
+		title: 'Catégorie 3 : Couleurs',
+		subtitle: '3.2 Dans chaque page web, le contraste entre la couleur du texte et la couleur de son arrière-plan est-il suffisamment élevé?',
+
+		items: [
+			{
+				precision: '3.2.2 Dans chaque page web, le texte et le texte en image en gras d’une taille restituée inférieure à 18,5px vérifient-ils une de ces conditions (hors cas particuliers) ?  Le rapport de contraste entre le texte et son arrière-plan est de 4.5:1, au moins ;  Un mécanisme permet à l’utilisateur d’afficher le texte avec un rapport de contraste de 4.5:1, au moins.',
+				link: 'https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#3.2.2',
+				solution: [{
+					info1: '1. Retrouver dans le document les textes et les textes en image en gras d’une taille restituée inférieure à 18,5px qui pourraient poser des problèmes de contraste ; ',
+					info2: '2. Pour chacun de ces textes, vérifier que : Soit le rapport de contraste entre le texte et son arrière-plan est de 4.5:1, au moins ; Soit un mécanisme permet à l’utilisateur d’afficher le texte avec un rapport de contraste de 4.5:1, au moins.',
+					info3: '3. Si c’est le cas pour chaque texte, le test est validé',
+				}],
+				expertise: ExpertiseLevelEnum.DESIGN,
+
+			},
+
+		],
+	},
+	{
+		title: 'Catégorie 7 : Scripts',
+		subtitle: '7.1 Chaque script est-il, si nécessaire, compatible avec les technologies d’assistance ?',
+		items: [
+
+			{
+				precision: ' 7.1.3 Chaque script qui génère ou contrôle un composant d’interface vérifie-t-il ces conditions : '
+					+ 'Le composant possède un nom pertinent ;'
+					+ 'Le nom accessible du composant contient au moins l’intitulé visible ;'
+					+ 'Le composant possède un rôle pertinent.',
+
+				link: 'https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#7.1.3',
+				solution: [{
+					info1: '1. Pour chacun des composants d’interface ayant validé le test 7.1.1, vérifier que le composant d’interface possède : ',
+					info2: '2. Un nom pertinent (intitulé visible) et un rôle pertinent',
+					info3: '3. Si le composant d’interface possède un nom accessible, vérifier que ce nom est pertinent et contient au moins l’intitulé visible.',
+				}],
+				expertise: ExpertiseLevelEnum.DESIGN,
+
+			},
+
+		],
+	},
+	{
+		title: 'Catégorie 8 : Eléments Obligatoires',
+		subtitle: '8.9 Dans chaque page web, les balises ne doivent pas être utilisées uniquement à des fins de présentation',
+		items: [
+
+			{
+				precision: ' 8.9.1 Dans chaque page web les balises (à l’exception de <div>, <span> et <table>) ne doivent pas être utilisées uniquement à des fins de présentation. Cette règle est-elle respectée',
+				link: 'https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#8.9.1',
+				solution: [{
+					info1: '1. Retrouver dans le document l’ensemble des éléments sémantiques utilisés à des fins de présentation ;',
+					info2: '2. Pour chacun de ces éléments, vérifier que :'
+						+ 'L’élément est pourvu d’un attribut role=“presentation” ;'
+						+ 'L’utilisation de cet élément à des fins de présentation reste justifée',
+					info3: '3. Si c’est le cas, le test est validé',
+				}],
+				expertise: ExpertiseLevelEnum.DESIGN,
+
+			},
+
+		],
+	},
+
+]