@cnamts/synapse 1.0.3 → 1.0.4

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

@@ -32,7 +32,11 @@ exports[`DialogBox > rendering and props > renders correctly with props 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
@@ -41,7 +45,10 @@ exports[`DialogBox > rendering and props > renders correctly with props 1`] = `
         ></div>
         <div
           class="v-progress-linear__buffer"
-          style="opacity: NaN; width: 0%;"
+          style="
+            opacity: NaN;
+            width: 0%;
+          "
         ></div>
         <transition-stub
           appear="false"
@@ -96,7 +103,10 @@ exports[`DialogBox > rendering and props > renders correctly with props 1`] = `
           v-btn--variant-elevated
           v-theme--light
         "
-        style="height: 32px; width: 32px;"
+        style="
+          height: 32px;
+          width: 32px;
+        "
         type="button"
       >
         <span class="v-btn__overlay"></span>

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

@@ -13,7 +13,10 @@ exports[`DownloadBtn > renders correctly 1`] = `
     v-btn--variant-outlined
     v-theme--light
   "
-  style="height: auto; min-height: 36px;"
+  style="
+    height: auto;
+    min-height: 36px;
+  "
   type="button"
 >
   <span class="v-btn__overlay"></span>
@@ -55,7 +58,10 @@ exports[`DownloadBtn > with slots 1`] = `
     v-btn--variant-outlined
     v-theme--light
   "
-  style="height: auto; min-height: 36px;"
+  style="
+    height: auto;
+    min-height: 36px;
+  "
   type="button"
 >
   <span class="v-btn__overlay"></span>

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

@@ -37,7 +37,11 @@ exports[`ErrorPage > 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
@@ -46,7 +50,10 @@ exports[`ErrorPage > 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"
@@ -147,7 +154,11 @@ exports[`ErrorPage > renders correctly with undefined route 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
@@ -156,7 +167,10 @@ exports[`ErrorPage > renders correctly with undefined route 1`] = `
           ></div>
           <div
             class="v-progress-linear__buffer"
-            style="opacity: NaN; width: 0%;"
+            style="
+              opacity: NaN;
+              width: 0%;
+            "
           ></div>
           <transition-stub
             appear="false"

package/src/components/ExternalLinks/Accessibilite.mdx

@@ -8,7 +8,10 @@ Accessibilité
 <Story of={AccessStories.Legende} />
 <br />
 
+
 --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
 
 <Story of={AccessStories.AccessibilitePanel} />
-<br />
+<br />
+
+<Story of={AccessStories.TanaguruFalsePositives} />

package/src/components/ExternalLinks/Accessibilite.stories.ts

@@ -2,6 +2,7 @@ import { VExpansionPanels, VExpansionPanel, VExpansionPanelTitle, VExpansionPane
 import type { StoryObj } from '@storybook/vue3'
 import { AccessibiliteItemsIndeterminate, AccessibiliteItemsValidated } from './AccessibiliteItems'
 import { mdiCheckboxMarkedCircle, mdiLink, mdiEye } from '@mdi/js'
+import SyAlert from '../SyAlert/SyAlert.vue'
 
 const checkIcon = mdiCheckboxMarkedCircle
 const iconEye = mdiEye
@@ -183,9 +184,42 @@ export const Legende: StoryObj = {
 					Problèmes relevés par Tanaguru
 				  </div>
 				</div>
+				<div class="mt-4">
+					<p>Rapport d’audit manuel : <a href="/audits/ExternalLinks.xlsx" style="color:#0C41BD;">Voir le
+						rapport</a></p>
+					<p style="color: grey; font-size: 14px">Correctifs associés (<a
+						href="https://github.com/assurance-maladie-digital/design-system-v3/issues/808" target="_blank"
+						style="color:#0C41BD;"
+					>issue #652</a>)</p>
+				</div>
 			  </div>
             `,
 		}
 	},
 	tags: ['!dev'],
 }
+
+export const TanaguruFalsePositives: StoryObj = {
+	render: (args) => {
+		return {
+			components: { SyAlert },
+			setup() {
+				return { args }
+			},
+			template: `
+			<SyAlert
+				type="warning"
+			>
+				L'outil Tanaguru remonte l'erreur suivante sur ce composant : <br />
+				<cite>
+				Interactive elements non reachable with keyboard navigation
+				</cite>
+				<br />
+				Tanaguru se basant sur le markup HTML, il n'est pas en mesure de détecter les éléments rendus interactifs par l'usage de JavaScript.<br>
+				Les éléments de ce composant sont bien accessibles au clavier, l'erreur est donc considérée comme un faux positif et peut être ignorée sans impact sur l'audit d'accessibilité.
+			</SyAlert>
+			`,
+		}
+	},
+	tags: ['!dev'],
+}

package/src/components/ExternalLinks/ExternalLinks.stories.ts

@@ -125,7 +125,7 @@ const meta = {
 		tile: true,
 		minHeight: '48px',
 		minWidth: '328px',
-		color: cnamColorsTokens.blue.lighten20,
+		color: cnamColorsTokens.blue.base,
 		class: 'd-flex px-3',
 	},
 	btnIcon: {
@@ -135,8 +135,6 @@ const meta = {
 		color: 'rgba(0, 0, 0, .54)',
 	},
 	list: {
-		border: false,
-		elevation: 0,
 		class: 'py-0',
 	},
 	listItem: {

package/src/components/ExternalLinks/ExternalLinks.vue

@@ -6,10 +6,12 @@
 	} from '@mdi/js'
 
 	import { locales } from './locales'
-	import { computed, ref, type CSSProperties } from 'vue'
+	import { computed, ref, watch, nextTick, type CSSProperties, useId } from 'vue'
 	import { convertToUnit } from '@/utils/convertToUnit'
 	import useCustomizableOptions, { type CustomizableOptions } from '@/composables/useCustomizableOptions'
 	import { config } from './config'
+	import { vToolbar } from '@/directives/Toolbar'
+	import SyIcon from '../Customs/SyIcon/SyIcon.vue'
 
 	const props = withDefaults(defineProps<CustomizableOptions & {
 		items: Array<{
@@ -22,15 +24,13 @@
 		nudgeBottom?: number | string
 		fixed?: boolean
 		ariaLabel?: string
-		ariaOwns?: string
 	}>(), {
 		position: 'top left',
 		btnText: locales.btnText,
 		nudgeTop: 0,
 		nudgeBottom: 0,
 		fixed: false,
-		ariaLabel: 'external-link-btn',
-		ariaOwns: 'external-link-btn',
+		ariaLabel: locales.ariaLabel,
 	})
 
 	const options = useCustomizableOptions(config, props)
@@ -38,6 +38,7 @@
 	const menu = ref(false)
 	const hover = ref(false)
 	const open = computed(() => menu.value || hover.value)
+	const menuId = `sy-external-links-menu-${useId()}`
 
 	const left = computed(() => props.position.includes('left'))
 	const top = computed(() => props.position.includes('top'))
@@ -67,23 +68,31 @@
 		}
 		return left.value ? rightArrowIcon : leftArrowIcon
 	})
+
+	const list = ref<HTMLElement | null>(null)
+
+	watch(menu, async (newValue) => {
+		if (newValue) {
+			await nextTick()
+			const firstItem = list.value?.querySelector<HTMLElement>('li a')
+			firstItem?.focus()
+		}
+	})
 </script>
 
 <template>
-	<div
-		:id="props.ariaOwns"
-	>
+	<div>
 		<VMenu
+			:id="menuId"
 			v-bind="options.menu"
-			:id="props.ariaOwns"
 			v-model="menu"
 			:location="top ? 'bottom' : 'top'"
 			attach
 			transition="fade-transition"
-			class="vd-external-links"
+			class="sy-external-links"
 			:class="{
-				'vd-external-links--left': left,
-				'vd-external-links--right': !left,
+				'sy-external-links--left': left,
+				'sy-external-links--right': !left,
 			}"
 		>
 			<template #activator="{ props: vMenuProps }">
@@ -93,9 +102,9 @@
 						...options.btn,
 					}"
 					:aria-label="props.ariaLabel"
-					:aria-owns="props.ariaOwns"
+					:aria-controls="menu ? menuId : undefined"
 					:style="btnStyle"
-					class="vd-external-links-btn"
+					class="sy-external-links-btn"
 					@mouseenter="hover = true"
 					@mouseleave="hover = false"
 					@focusin="hover = true"
@@ -106,41 +115,54 @@
 							'ml-3': !left,
 							'mr-3': left,
 						}"
-						class="vd-external-links-btn-text white--text"
+						class="sy-external-links-btn-text white--text"
 					>
 						{{ btnText }}
 					</span>
 
-					<VIcon v-bind="options.btnIcon">
-						{{ arrowIcon }}
-					</VIcon>
+					<SyIcon
+						v-bind="options.btnIcon"
+						:icon="arrowIcon"
+						decorative
+					/>
 				</VBtn>
 			</template>
 
-			<VList
+			<ul
 				v-if="items.length"
 				v-bind="options.list"
-				class="vd-external-links-list"
+				ref="list"
+				v-toolbar
+				class="sy-external-links-list elevation-3"
 			>
-				<VListItem
+				<li
 					v-for="(item, index) in items"
 					:key="index"
-					:href="item.href"
-					v-bind="options.listItem"
 				>
-					<div class="d-flex flex-row justify-space-between">
-						<VListItemTitle v-bind="options.listItemTitle">
-							{{ item.text }}
-						</VListItemTitle>
-
-						<slot name="link-icon">
-							<VIcon v-bind="options.linkIcon">
-								{{ linkIcon }}
-							</VIcon>
-						</slot>
-					</div>
-				</VListItem>
-			</VList>
+					<VBtn
+						:href="item.href"
+						block
+						class="sy-external-links-list-item py-2"
+						v-bind="options.listItem"
+					>
+						<div
+							class="w-100 h-100 d-flex justify-space-between align-center"
+						>
+							<div v-bind="options.listItemTitle">
+								{{ item.text }}
+							</div>
+
+							<slot name="link-icon">
+								<SyIcon
+									v-bind="options.linkIcon"
+									:icon="linkIcon"
+									decorative
+								/>
+							</slot>
+						</div>
+					</VBtn>
+				</li>
+			</ul>
 
 			<VSheet
 				v-else
@@ -157,9 +179,10 @@
 <style lang="scss" scoped>
 $list-max-height: 248px;
 
-.vd-external-links-btn {
+.sy-external-links-btn {
 	// Allow overgrow on mobile
 	max-width: none;
+	border-radius: 0 !important;
 
 	:deep(.v-btn__content) {
 		flex-direction: inherit;
@@ -172,28 +195,60 @@ $list-max-height: 248px;
 	}
 }
 
-.vd-external-links--left :deep(.v-overlay__content) {
+.sy-external-links--left :deep(.v-overlay__content) {
 	left: 0 !important;
 	right: auto !important;
 }
 
-.vd-external-links--right :deep(.v-overlay__content) {
+.sy-external-links--right :deep(.v-overlay__content) {
 	right: 0 !important;
 	left: auto !important;
 }
 
-.vd-external-links > :deep(.v-overlay__content) {
+.sy-external-links > :deep(.v-overlay__content) {
 	border-radius: 0;
 }
 
-.vd-external-links-list {
+.sy-external-links-list {
 	max-height: $list-max-height;
 	overflow-y: auto;
 	border-radius: 0;
+	background-color: white;
+	box-shadow:
+		0 5px 5px -3px var(--v-shadow-key-umbra-opacity, rgb(0 0 0 / 20%)),
+		0 8px 10px 1px var(--v-shadow-key-penumbra-opacity, rgb(0 0 0 / 14%)),
+		0 3px 14px 2px var(--v-shadow-key-ambient-opacity, rgb(0 0 0 / 12%));
+}
+
+.sy-external-links-list-item {
+	padding-block: 4px !important;
+	height: 48px !important;
+	border-radius: 0 !important;
+
+	&:focus-visible {
+		outline: 0;
+
+		:deep(.v-btn__overlay) {
+			background-color: transparent !important;
+			display: none !important;
+		}
+
+		&::after {
+			opacity: 1;
+			border: 2px solid rgb(var(--v-theme-primary));
+		}
+	}
+}
+
+.sy-external-links-list-item :deep(.v-btn__content) {
+	width: 100%;
+	font-size: 1rem;
+	font-weight: 400;
+	letter-spacing: 0.0094em;
 }
 
 @media only screen and (height <= 340px) {
-	.vd-external-links-btn {
+	.sy-external-links-btn {
 		z-index: 4 !important;
 	}
 }

package/src/components/ExternalLinks/config.ts

@@ -2,7 +2,6 @@ import { cnamColorsTokens } from '@/designTokens/tokens/cnam/cnamColors'
 
 export const config = {
 	menu: {
-		tile: true,
 		zIndex: 4,
 		offset: 0,
 	},
@@ -10,23 +9,25 @@ export const config = {
 		tile: true,
 		minHeight: '48px',
 		minWidth: '328px',
-		color: cnamColorsTokens.blue.lighten20,
+		color: cnamColorsTokens.blue.base,
 		class: 'd-flex px-3',
 	},
 	btnIcon: {
 		color: 'white',
 	},
 	linkIcon: {
+		size: 'large',
 		color: 'rgba(0, 0, 0, .54)',
 	},
 	list: {
-		border: false,
-		elevation: 3,
 		class: 'py-0',
 	},
 	listItem: {
 		target: '_blank',
 		rel: 'noopener noreferrer',
+		flat: true,
+		rounded: 0,
+		size: 'large',
 	},
 	sheet: {
 		class: 'px-4 py-3',

package/src/components/ExternalLinks/locales.ts

@@ -1,4 +1,5 @@
 export const locales = {
+	ariaLabel: 'Menu : Consulter les données externes',
 	noData: 'Pas de données.',
 	btnText: 'Consulter les données externes',
 }

package/src/components/ExternalLinks/tests/ExternalLinks.spec.ts

@@ -62,9 +62,9 @@ describe('ExternalLinks', () => {
 		})
 
 		const button = wrapper.find('button')
-		expect(wrapper.find('.vd-external-links-list').exists()).toBe(false)
+		expect(wrapper.find('.sy-external-links-list').exists()).toBe(false)
 		await button.trigger('click')
-		expect(wrapper.find('.vd-external-links-list').exists()).toBe(true)
+		expect(wrapper.find('.sy-external-links-list').exists()).toBe(true)
 		expect(wrapper.html()).toMatchSnapshot()
 	})
 
@@ -114,7 +114,7 @@ describe('ExternalLinks', () => {
 		await button.trigger('click')
 
 		expect(wrapper.html()).toMatchSnapshot()
-		expect(wrapper.find('.vd-external-links-btn').attributes('style')).toContain('position: fixed;')
+		expect(wrapper.find('.sy-external-links-btn').attributes('style')).toContain('position: fixed;')
 	})
 
 	it('slides on hover or focus', async () => {