@cnamts/synapse 1.0.21 → 1.0.22

package/src/components/CookiesSelection/CookiesSelection.vue

@@ -5,9 +5,13 @@
 	import { locales } from './locales'
 	import type { CookieTypes, CookiesItems, Preferences } from './types'
 
-	const props = defineProps<{
+	const props = withDefaults(defineProps<{
 		items: CookiesItems
-	}>()
+		headingLevel?: 1 | 2 | 3 | 4 | 5 | 6
+
+	}>(), {
+		headingLevel: 2,
+	})
 
 	const emits = defineEmits<{
 		submit: [preferences: Partial<Preferences>]
@@ -109,6 +113,7 @@
 					:type="cookieType"
 					:table-items="cookies"
 					class="mb-6"
+					:heading-level="headingLevel"
 				>
 					<template
 						v-for="(_, slotName) in $slots"

package/src/components/CookiesSelection/tests/CookiesSelection.a11y.spec.ts

@@ -42,6 +42,7 @@ describe('CookiesSelection – accessibility (axe)', () => {
 	it('has no obvious axe violations for full cookie preferences form', async () => {
 		const wrapper = mount(CookiesSelection, {
 			props: {
+				headingLevel: 2,
 				items: cookiesList,
 			},
 		})

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

@@ -35,6 +35,7 @@ describe('CookiesSelection', () => {
 	it('renders correctly', () => {
 		const wrapper = mount(CookiesSelection, {
 			propsData: {
+				headingLevel: 2,
 				items: cookiesList,
 			},
 		})
@@ -49,6 +50,7 @@ describe('CookiesSelection', () => {
 	it('sets global preferences', async () => {
 		const wrapper = mount(CookiesSelection, {
 			props: {
+				headingLevel: 2,
 				items: cookiesList,
 			},
 		})
@@ -78,6 +80,7 @@ describe('CookiesSelection', () => {
 	it('sets preferences for each category', async () => {
 		const wrapper = mount(CookiesSelection, {
 			props: {
+				headingLevel: 2,
 				items: cookiesList,
 			},
 		})
@@ -118,6 +121,7 @@ describe('CookiesSelection', () => {
 	it('requires all categories to be set', async () => {
 		const wrapper = mount(CookiesSelection, {
 			props: {
+				headingLevel: 2,
 				items: cookiesList,
 				modelValue: undefined,
 			},
@@ -151,6 +155,7 @@ describe('CookiesSelection', () => {
 	it('displays the cookie description as a scoped slot', () => {
 		const wrapper = mount(CookiesSelection, {
 			props: {
+				headingLevel: 2,
 				items: cookiesList,
 			},
 			slots: {

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

@@ -136,6 +136,7 @@ exports[`CookiesSelection > renders correctly 1`] = `
       <h2 class="
         font-weight-bold
         mb-2
+        sy-heading
         text-subtitle-1
       ">
         Cookies requis
@@ -224,14 +225,15 @@ exports[`CookiesSelection > renders correctly 1`] = `
           <!---->
         </div>
       </details>
-      <div
-        aria-level="3"
-        class="vd-cookies-information__heading"
+      <h3
+        class="
+          sy-heading
+          vd-cookies-information__heading
+        "
         id="radio-group-essentials"
-        role="heading"
       >
         Accepter les cookies de type Cookies requis, ce champ est requis.
-      </div>
+      </h3>
       <!-- v-if -->
     </div>
     <div class="
@@ -241,6 +243,7 @@ exports[`CookiesSelection > renders correctly 1`] = `
       <h2 class="
         font-weight-bold
         mb-2
+        sy-heading
         text-subtitle-1
       ">
         Cookies fonctionnels
@@ -318,14 +321,15 @@ exports[`CookiesSelection > renders correctly 1`] = `
           <!---->
         </div>
       </details>
-      <div
-        aria-level="3"
-        class="vd-cookies-information__heading"
+      <h3
+        class="
+          sy-heading
+          vd-cookies-information__heading
+        "
         id="radio-group-functional"
-        role="heading"
       >
         Accepter les cookies de type Cookies fonctionnels, ce champ est requis.
-      </div>
+      </h3>
       <div class="
         v-input
         v-input--center-affix
@@ -444,6 +448,7 @@ exports[`CookiesSelection > renders correctly 1`] = `
       <h2 class="
         font-weight-bold
         mb-2
+        sy-heading
         text-subtitle-1
       ">
         Cookies d’analyse
@@ -521,14 +526,15 @@ exports[`CookiesSelection > renders correctly 1`] = `
           <!---->
         </div>
       </details>
-      <div
-        aria-level="3"
-        class="vd-cookies-information__heading"
+      <h3
+        class="
+          sy-heading
+          vd-cookies-information__heading
+        "
         id="radio-group-analytics"
-        role="heading"
       >
         Accepter les cookies de type Cookies d’analyse, ce champ est requis.
-      </div>
+      </h3>
       <div class="
         v-input
         v-input--center-affix

package/src/components/CopyBtn/CopyBtn.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-	import { ref, onUnmounted } from 'vue'
+	import { ref, onUnmounted, useId } from 'vue'
 	import { mdiContentCopy } from '@mdi/js'
 
 	import useCustomizableOptions, { type CustomizableOptions } from '@/composables/useCustomizableOptions'
@@ -27,6 +27,7 @@
 
 	const options = useCustomizableOptions(config, props)
 
+	const id = useId()
 	const tooltip = ref(false)
 	const copyIcon = mdiContentCopy
 	let tooltipTimeoutId: ReturnType<typeof setTimeout> | undefined
@@ -87,7 +88,7 @@
 
 <template>
 	<div
-		:id="props.ariaOwns"
+		:id="`${props.ariaOwns}-${id}`"
 		class="sy-copy-btn"
 	>
 		<VTooltip
@@ -96,14 +97,15 @@
 			:open-on-click="true"
 			:open-on-hover="false"
 			:disabled="hideTooltip"
+			content-class="tooltip"
 		>
 			<template #activator="{ props: tooltipProps }">
 				<VBtn
 					v-bind="{...tooltipProps,...options.btn}"
 					:aria-label="props.ariaLabel"
-					:aria-owns="props.ariaOwns"
+					:aria-owns="`${props.ariaOwns}-${id}`"
 					:data-test-id="props.ariaOwns"
-					aria-controls="copy-btn"
+					:aria-controls="`copy-btn-${id}`"
 					@click="copy"
 				>
 					<slot name="icon">

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/SyCheckbox/SyCheckbox.vue

@@ -206,7 +206,7 @@
 
 	const ariaChecked = computed(() => {
 		if (internalIndeterminate.value) return 'mixed'
-		return model.value ? 'true' : 'false'
+		return model.value ? 'true' : undefined
 	})
 
 	const labelColor = computed(() => {

package/src/components/Customs/SyIcon/SyIcon.a11y.spec.ts

@@ -1,6 +1,6 @@
 // @vitest-environment jsdom
 
-import { describe, it } from 'vitest'
+import { describe, it, expect } from 'vitest'
 import { mount } from '@vue/test-utils'
 import { axe } from 'vitest-axe'
 import { assertNoA11yViolations } from '@tests/unit/accessibility/axeUtils'
@@ -19,7 +19,7 @@ describe('SyIcon – accessibility (axe)', () => {
 			global: {
 				stubs: {
 					'v-icon': {
-						template: '<span class="v-icon" role="img" :aria-label="ariaLabel"><slot></slot></span>',
+						template: '<span class="v-icon" :role="role" :aria-label="ariaLabel" :aria-hidden="ariaHidden"><svg><slot></slot></svg></span>',
 						props: ['color', 'size', 'role', 'aria-hidden', 'aria-label'],
 					},
 				},
@@ -34,4 +34,33 @@ describe('SyIcon – accessibility (axe)', () => {
 			ignoreRules: ['region'],
 		})
 	})
+
+	it('hides decorative icons from assistive tech (aria-hidden)', async () => {
+		const wrapper = mount(SyIcon, {
+			props: {
+				icon: 'mdi-star',
+				decorative: true,
+			},
+			global: {
+				stubs: {
+					'v-icon': {
+						template: '<span class="v-icon" :role="role" :aria-label="ariaLabel" :aria-hidden="ariaHidden"><svg><slot></slot></svg></span>',
+						props: ['color', 'size', 'role', 'aria-hidden', 'aria-label'],
+					},
+				},
+				directives: {
+					'rgaa-svg-fix': () => {},
+				},
+			},
+		})
+
+		const iconEl = wrapper.find('.v-icon')
+		expect(iconEl.attributes('aria-hidden')).toBe('true')
+
+		// Axe should not report a visible control with missing label since it is hidden
+		const results = await axe(wrapper.element as HTMLElement)
+		assertNoA11yViolations(results, 'SyIcon – decorative icon hidden from AT', {
+			ignoreRules: ['region'],
+		})
+	})
 })