@cnamts/synapse 1.0.20 → 1.0.22

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

@@ -1,15 +1,86 @@
-import { Meta, Story } from '@storybook/addon-docs';
-import * as Stories from '../CopyBtn.stories.ts';
-import '@/stories/styles/shared.css';
+import { Meta, Primary } from '@storybook/blocks';
+import * as CopyBtnStories from '../CopyBtn.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={Stories} />
+<Meta of={CopyBtnStories}/>
 
-<div className="header">
-  <h1>Accessibilité</h1>
-</div>
+<AccessibilityGuideLayout
+    componentName="CopyBtn"
+    iconSrc={AccessibilityIcon}
+>
+    <CriteriaSection>
+        <CriteriaCard icon="🔍" title="Structure sémantique">
+            <ul>
+                <li><strong>Bouton natif</strong> : utilisation du composant<code>VBtn</code> qui génère un élément <code>&lt;button&gt;</code>, garantissant un comportement accessible par défaut.</li>
+                <li><strong>Nom accessible</strong> : l’attribut <code>aria-label</code>permet de fournir une description explicite de l’action (ex. « Copier le numéro de compte »).</li>
+                <li><strong>Association ARIA</strong> : les attributs<code>aria-owns</code> et <code>aria-controls</code> peuvent être utilisés pour relier le bouton à un élément spécifique de l’interface.</li>
+                <li><strong>Identifiants uniques</strong> : l’utilisation de<code>useId()</code> garantit des identifiants uniques pour chaque instance du composant.</li>
+            </ul>
+        </CriteriaCard>
 
+        <CriteriaCard icon="⌨️" title="Navigation clavier">
+            <ul>
+                <li><strong>Tabulation</strong> : le bouton est accessible dans l’ordre de tabulation standard de la page.</li>
+                <li><strong>Activation</strong> : l’action de copie peut être déclenchée avec la touche <kbd>Entrée</kbd> ou <kbd>Espace</kbd>.</li>
+                <li><strong>Focus visible</strong> : un style de focus est appliqué via<code>:focus-visible</code> pour assurer un repère visuel lors de la navigation clavier.</li>
+            </ul>
+        </CriteriaCard>
 
-<div class="mt-2">
-<p>Rapport d’audit manuel : <a href="/audits/CopyBtn.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/4008" target="_blank" style={{color:'#0C41BD'}}>issue #4008</a>)</p>
-</div>
+        <CriteriaCard icon="📢" title="Retour d’information">
+            <ul>
+                <li><strong>Tooltip informatif</strong> : un message visuel indique que l’action de copie a été effectuée.</li>
+                <li><strong>Annonce aux technologies d’assistance</strong> : le message est contenu dans un élément avec <code>role="status"</code>, permettant aux lecteurs d’écran d’annoncer l’information.</li>
+                <li><strong>Durée configurable</strong> : l’affichage du tooltip peut être contrôlé via la prop <code>tooltipDuration</code>.</li>
+                <li><strong>Désactivation possible</strong> : la prop<code>hideTooltip</code> permet de désactiver l’affichage du retour visuel si nécessaire.</li>
+            </ul>
+        </CriteriaCard>
+
+        <CriteriaCard icon="🧩" title="Personnalisation accessible">
+            <ul>
+                <li><strong>Slots personnalisables</strong> : possibilité de remplacer l’icône ou le contenu du tooltip via les slots<code>icon</code> et <code>tooltip</code>.</li>
+                <li><strong>Libellés adaptables</strong> : les propriétés<code>ariaLabel</code> et <code>ariaOwns</code> permettent d’adapter les descriptions selon le contexte.</li>
+                <li><strong>Nettoyage du contenu copié</strong> : la prop<code>separatorsToRemove</code> permet de retirer des caractères visuels (ex. espaces ou tirets) avant la copie.</li>
+            </ul>
+        </CriteriaCard>
+    </CriteriaSection>
+
+    <DemoSection componentName="CopyBtn">
+        <Primary/>
+    </DemoSection>
+
+    <BestPracticesSection>
+        <ul>
+            <li>Fournir un <strong>aria-label explicite</strong> décrivant clairement l’action (ex. « Copier l’adresse email »).</li>
+            <li>Conserver un <strong>retour d’information visible ou vocal</strong>après l’action de copie pour informer l’utilisateur.</li>
+            <li>Si une icône seule est utilisée, toujours garantir la présence d’un<strong>nom accessible</strong>.</li>
+            <li>Veiller à une <strong>taille de cible suffisante</strong>(au moins 44px) pour les interactions tactiles.</li>
+            <li>S’assurer que le contenu copié correspond bien à ce que l’utilisateur attend (ex. numéro sans espaces).</li>
+        </ul>
+    </BestPracticesSection>
+
+    <ResourcesSection>
+        <ul>
+            <li><a href="https://www.w3.org/WAI/WCAG22/quickref/#name-role-value" target="_blank" rel="noopener noreferrer">Guide des pratiques d'auteur WAI-ARIA pour les Name, role, value</a></li>
+            <li><a href="https://www.w3.org/WAI/WCAG22/Techniques/aria/ARIA22" target="_blank" rel="noopener noreferrer">WAI-ARIA – rôle « status »</a></li>
+            <li><a href="https://www.w3.org/WAI/WCAG22/Understanding/focus-visible.html" target="_blank" rel="noopener noreferrer">WCAG 2.2 - Focus Visible</a></li>
+        </ul>
+    </ResourcesSection>
+
+    <AuditSection>
+
+        <div class="mt-2">
+            <p>Rapport d’audit manuel : <a href="/audits/CopyBtn.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/4008" target="_blank" style={{color: '#0C41BD'}}>issue #4008</a>)</p>
+        </div>
+
+    </AuditSection>
+</AccessibilityGuideLayout>

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

@@ -3,7 +3,7 @@
 exports[`CopyBtn > renders correctly 1`] = `
 <div
   class="sy-copy-btn"
-  id="copy-btn"
+  id="copy-btn-v-0"
   label="test"
 >
   <v-tooltip-stub
@@ -12,6 +12,7 @@ exports[`CopyBtn > renders correctly 1`] = `
     closeonback="false"
     closeoncontentclick="false"
     contained="false"
+    contentclass="tooltip"
     disabled="false"
     eager="true"
     interactive="false"
@@ -24,8 +25,11 @@ exports[`CopyBtn > renders correctly 1`] = `
     openonclick="true"
     openonhover="false"
     origin="auto"
+    persistent="false"
     scrim="false"
     scrollstrategy="reposition"
+    sticktotarget="false"
+    viewportmargin="12"
     zindex="2000"
   ></v-tooltip-stub>
 </div>

package/src/components/Customs/Selects/SyInputSelect/SyInputSelect.stories.ts

@@ -3,6 +3,7 @@ import SyInputSelect from './SyInputSelect.vue'
 import { VBtn, VMenu, VList, VListItem, VListItemTitle, VForm } from 'vuetify/components'
 import { ref } from 'vue'
 import SyAlert from '../../../SyAlert/SyAlert.vue'
+import { createDeprecationNotice } from '@/stories/DeprecationNotice/DeprecationNotice'
 
 const meta = {
 	title: 'Composants/Formulaires/Selects/SyInputSelect',
@@ -601,16 +602,9 @@ const validateForm = () => {
 	},
 }
 
-// depreciation notice
 export const DeprecationNotice = {
-	render: () => ({
-		components: { SyAlert },
-		template: `
-			<SyAlert type="warning" variant="tonal" :closable="false">
-				<b>Ce composant est déprécié</b>, il ne sera plus maintenu ou mis à jour.<br/>
-				Nous vous recommandons d'utiliser à la place le composant <a class="text-primary" href="/?path=/docs/composants-formulaires-selects-syselect--docs"><code>SySelect</code></a>.
-			</SyAlert>
-		`,
-	}),
+	...createDeprecationNotice([
+		{ label: 'SySelect', url: '/?path=/docs/composants-formulaires-selects-syselect--docs' },
+	]),
 	tags: ['!dev'],
 }

package/src/components/Customs/Selects/SySelect/SySelect.mdx

@@ -25,7 +25,6 @@ Il est basé sur un `v-textfield`.</p>
 	import { SySelect } from '@cnamts/synapse'
 
 	const selectedValue = ref(undefined)
-import '../../../../stories/styles/shared.css';
 
 	const items = [
 		{ text: 'Option 1', value: '1' },

package/src/components/Customs/Selects/SySelect/SySelect.stories.ts

@@ -116,7 +116,7 @@ type Story = StoryObj<typeof meta>
 export const Default: Story = {
 	parameters: {
 		a11y: {
-			disable: true,
+			disable: false,
 		},
 		sourceCode: [
 			{
@@ -189,7 +189,7 @@ export const Default: Story = {
 export const HelpText: Story = {
 	parameters: {
 		a11y: {
-			disable: true,
+			disable: false,
 		},
 		sourceCode: [
 			{
@@ -266,7 +266,7 @@ export const HelpText: Story = {
 export const Required: Story = {
 	parameters: {
 		a11y: {
-			disable: true,
+			disable: false,
 		},
 		sourceCode: [
 			{
@@ -327,7 +327,7 @@ export const Required: Story = {
 export const RequiredWithAsterisk: Story = {
 	parameters: {
 		a11y: {
-			disable: true,
+			disable: false,
 		},
 		docs: {
 			description: {
@@ -395,7 +395,7 @@ const items = [
 export const SlotPrepend: Story = {
 	parameters: {
 		a11y: {
-			disable: true,
+			disable: false,
 		},
 		sourceCode: [
 			{
@@ -462,7 +462,7 @@ export const SlotPrepend: Story = {
 export const SlotAppend: Story = {
 	parameters: {
 		a11y: {
-			disable: true,
+			disable: false,
 		},
 		sourceCode: [
 			{
@@ -562,7 +562,7 @@ export const WithTooltips: Story = {
 	},
 	parameters: {
 		a11y: {
-			disable: true,
+			disable: false,
 		},
 		docs: {
 			description: {
@@ -777,7 +777,7 @@ const options = [
 export const withCustomError: Story = {
 	parameters: {
 		a11y: {
-			disable: true,
+			disable: false,
 		},
 		sourceCode: [
 			{
@@ -855,7 +855,7 @@ export const withCustomError: Story = {
 export const withCustomKey: Story = {
 	parameters: {
 		a11y: {
-			disable: true,
+			disable: false,
 		},
 		sourceCode: [
 			{
@@ -936,7 +936,7 @@ export const Info: Story = {
 export const FormValidation: Story = {
 	parameters: {
 		a11y: {
-			disable: true,
+			disable: false,
 		},
 		docs: {
 			description: {

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

@@ -1048,8 +1048,21 @@
 			<VList
 				:id="uniqueMenuId"
 				ref="list"
+				class="v-list"
+				role="listbox"
 				:aria-label="$attrs['aria-label'] || labelWithAsterisk"
 				:title="$attrs['aria-label'] || labelWithAsterisk"
+				:style="{
+					minWidth: `${textInput?.$el.offsetWidth}px`
+				}"
+				bg-color="white"
+				tabindex="0"
+				@keydown.esc.prevent="closeList"
+				@keydown.tab="handleTabKey"
+				@keydown.enter.prevent="handleEnterKey"
+				@keydown.down.prevent="handleDownKey"
+				@keydown.up.prevent="handleUpKey"
+				@keydown.home.prevent="handleHomeKey"
 				@keydown.end.prevent="handleEndKey"
 				@keydown.page-up.prevent="handlePageUpKey"
 				@keydown.page-down.prevent="handlePageDownKey"
@@ -1184,6 +1197,10 @@
 	background-color: rgb(0 0 0 / 8%);
 }
 
+.v-list-item :deep(.v-list-item__overlay) {
+	background-color: transparent;
+}
+
 /* Permettre le passage à la ligne pour les textes longs dans la liste déroulante */
 .v-list-item-title {
 	white-space: normal;

package/src/components/Customs/Selects/SySelect/composables/useSySelectKeyboard.ts

@@ -61,10 +61,10 @@ export function useSySelectKeyboard(options: UseSySelectKeyboardOptions) {
 					allItems.forEach((item) => {
 						if (item !== element) {
 							item.classList.remove('keyboard-focused')
+							item.setAttribute('tabindex', '-1')
 						}
 					})
 
-					element.setAttribute('tabindex', '0')
 					element.setAttribute('tabindex', focusListItem ? '0' : '-1')
 					if (focusListItem) {
 						element.focus()

package/src/components/Customs/Selects/SySelect/tests/SySelect.a11y.spec.ts

@@ -26,9 +26,7 @@ describe('SySelect – accessibility (axe)', () => {
 
 		// Ouvrir le menu pour inclure la liste déroulante dans l’analyse axe
 		const activator = wrapper.find('.sy-select')
-		if (activator.exists()) {
-			await activator.trigger('click')
-		}
+		await activator.trigger('click')
 
 		const results = await axe(document.body)
 		assertNoA11yViolations(results, 'SySelect – required select with menu open', {

package/src/components/Customs/Selects/SySelect/tests/SySelect.spec.ts

@@ -965,4 +965,76 @@ describe('SySelect.vue', () => {
 			wrapper.unmount()
 		})
 	})
+
+	describe('keyboard navigation', () => {
+		it('navigates options with arrow keys', async () => {
+			const items = [
+				{ text: 'Option 1', value: '1' },
+				{ text: 'Option 2', value: '2' },
+				{ text: 'Option 3', value: '3' },
+			]
+			const wrapper = mount(SySelect, {
+				props: {
+					items,
+					modelValue: null,
+					textKey: 'text',
+					valueKey: 'value',
+				},
+				attachTo: document.body,
+			})
+
+			await wrapper.find('.v-field').trigger('click')
+			await wrapper.vm.$nextTick()
+
+			const list = wrapper.findComponent(VList).find('.v-list')!
+
+			// expect the first item to be highlighted
+			const firstItem = wrapper.findComponent(VList).findAll('.v-list-item').at(0)
+
+			await wrapper.vm.$nextTick()
+			expect(firstItem?.classes()).toContain('active')
+			expect(firstItem?.attributes('tabindex')).toBe('0')
+
+			await list.trigger('keydown.down')
+			await wrapper.vm.$nextTick()
+
+			const secondItem = wrapper.findComponent(VList).findAll('.v-list-item').at(1)
+			expect(firstItem?.classes()).not.toContain('keyboard-focused')
+			expect(firstItem?.attributes('tabindex')).toBe('-1')
+			expect(secondItem?.classes()).toContain('keyboard-focused')
+			expect(secondItem?.attributes('tabindex')).toBe('0')
+
+			wrapper.unmount()
+		})
+
+		it('selects an option with enter key', async () => {
+			const items = [
+				{ text: 'Option 1', value: '1' },
+				{ text: 'Option 2', value: '2' },
+				{ text: 'Option 3', value: '3' },
+			]
+			const wrapper = mount(SySelect, {
+				props: {
+					items,
+					modelValue: null,
+					textKey: 'text',
+					valueKey: 'value',
+				},
+				attachTo: document.body,
+			})
+
+			await wrapper.find('.v-field').trigger('click')
+			await wrapper.vm.$nextTick()
+
+			const list = wrapper.findComponent(VList).find('.v-list')!
+			await list.trigger('keydown.down')
+			await wrapper.vm.$nextTick()
+			await list.trigger('keydown.enter')
+			await wrapper.vm.$nextTick()
+
+			expect(wrapper.emitted()['update:modelValue']).toEqual([['2']])
+
+			wrapper.unmount()
+		})
+	})
 })

package/src/components/Customs/SyCheckBoxGroup/SyCheckBoxGroup.mdx

@@ -0,0 +1,32 @@
+import { Meta, Canvas, Controls } from '@storybook/blocks';
+import '../../../stories/styles/shared.css';
+import * as SyCheckBoxGroupStories from './SyCheckBoxGroup.stories';
+
+<Meta of={SyCheckBoxGroupStories} />
+
+<div className="header">
+  <h1>SyCheckBoxGroup</h1>
+  <p>Le composant `SyCheckBoxGroup` est un groupe de cases à cocher basé sur `SyCheckbox`, conforme au style du Design System et qui respecte les règles d'accessibilité <abbr title="Référentiel Général d'Amélioration de l'Accessibilité">RGAA</abbr>.</p>
+</div>
+
+Il étend les fonctionnalités de base avec :
+
+- La gestion d’un groupe d’options via la prop `options`
+- Un mode **sélection unique** (par défaut) ou **multiple** (`multiple`)
+- Un système de validation avancé (erreur, avertissement, succès)
+
+<Canvas of={SyCheckBoxGroupStories.Default} />
+
+# API
+
+<Controls of={SyCheckBoxGroupStories.Default} />
+
+## Validation
+
+Le composant supporte trois types de validation :
+
+- Règles d'erreur standard (`customRules`)
+- Règles d'avertissement (`customWarningRules`)
+- Règles de succès (`customSuccessRules`)
+
+<a href="/?path=/docs/guide-du-dev-guide-de-validation-des-formulaires--docs" className="action-link">Pour plus d'informations sur la validation, consultez le guide de validation des formulaires.</a>