@cnamts/synapse 1.0.23 → 1.0.24

package/src/components/Tables/common/filters/AutocompleteFilter.vue

@@ -0,0 +1,160 @@
+<script setup lang="ts">
+	import { computed } from 'vue'
+	import type { FilterOption, TableColumnHeader } from '../types'
+	import SyAutocomplete from '@/components/Customs/Selects/SyAutocomplete/SyAutocomplete.vue'
+
+	const props = defineProps({
+		header: {
+			type: Object as () => TableColumnHeader,
+			required: true,
+		},
+		filters: {
+			type: Array as () => FilterOption[],
+			default: () => [],
+		},
+		filterValue: {
+			type: [String, Number, Object, Array, undefined, null] as unknown as () => string | number | Record<string, unknown> | Array<string | number | Record<string, unknown>> | undefined | null,
+			default: null,
+		},
+		inputConfig: {
+			type: Object as () => {
+				disableErrorHandling?: boolean
+				variant?: string
+				hideDetails?: boolean
+				density?: 'default' | 'comfortable' | 'compact'
+				backgroundColor?: string
+				clearable?: boolean
+			},
+			default: () => ({}),
+		},
+		disableErrorHandling: {
+			type: Boolean,
+			default: false,
+		},
+		variant: {
+			type: String,
+			default: 'outlined',
+		},
+		hideDetails: {
+			type: Boolean,
+			default: true,
+		},
+		density: {
+			type: String as () => 'default' | 'comfortable' | 'compact',
+			default: 'compact',
+		},
+		backgroundColor: {
+			type: String,
+			default: 'white',
+		},
+		clearable: {
+			type: Boolean,
+			default: true,
+		},
+	})
+
+	const emit = defineEmits(['update:filters'])
+
+	function generateUniqueKey() {
+		return String(props.header.key || props.header.value || (props.header.title ? `filter_${props.header.title}` : `filter_${Date.now()}`))
+	}
+
+	const filterItems = computed(() => {
+		if (!props.header.filterOptions || !Array.isArray(props.header.filterOptions)) {
+			return []
+		}
+		return props.header.filterOptions
+	})
+
+	const modelValue = computed({
+		get: () => {
+			if (props.filterValue === null || props.filterValue === undefined) {
+				return props.header.multiple ? [] : null
+			}
+			return props.filterValue
+		},
+		set: (newValue) => {
+			const key = generateUniqueKey()
+			if (!key) return
+
+			if (props.header.multiple) {
+				if (!newValue || (Array.isArray(newValue) && newValue.length === 0)) {
+					const newFilters = props.filters.filter(f => f.key !== key)
+					emit('update:filters', newFilters)
+					return
+				}
+
+				const existingFilterIndex = props.filters.findIndex(f => f.key === key)
+				const newFilters = [...props.filters]
+
+				if (existingFilterIndex >= 0) {
+					newFilters[existingFilterIndex]!.value = newValue as string | number | Date | Array<string | number | Date> | Record<string, unknown> | null | undefined
+				}
+				else {
+					newFilters.push({
+						key,
+						value: newValue as string | number | Date | Array<string | number | Date> | Record<string, unknown> | null | undefined,
+						type: 'autocomplete',
+					})
+				}
+
+				emit('update:filters', newFilters)
+				return
+			}
+
+			if (newValue === undefined || newValue === null) {
+				const newFilters = props.filters.filter(f => f.key !== key)
+				emit('update:filters', newFilters)
+				return
+			}
+
+			const existingFilterIndex = props.filters.findIndex(f => f.key === key)
+			const newFilters = [...props.filters]
+
+			if (existingFilterIndex >= 0) {
+				newFilters[existingFilterIndex]!.value = newValue as string | number | Date | Array<string | number | Date> | Record<string, unknown> | null | undefined
+			}
+			else {
+				newFilters.push({
+					key,
+					value: newValue as string | number | Date | Array<string | number | Date> | Record<string, unknown> | null | undefined,
+					type: 'autocomplete',
+				})
+			}
+
+			emit('update:filters', newFilters)
+		},
+	})
+
+	function handleClear() {
+		const key = generateUniqueKey()
+		const newFilters = props.filters.filter(f => f.key !== key)
+		emit('update:filters', newFilters)
+	}
+</script>
+
+<template>
+	<SyAutocomplete
+		v-model="modelValue"
+		:label="props.header.title || ''"
+		:items="filterItems"
+		:clearable="clearable"
+		:density="inputConfig?.density ?? density"
+		:hide-details="inputConfig?.hideDetails ?? hideDetails"
+		:variant-style="inputConfig?.variant ?? variant"
+		:bg-color="inputConfig?.backgroundColor ?? backgroundColor"
+		:disable-error-handling="inputConfig?.disableErrorHandling ?? disableErrorHandling"
+		:multiple="props.header.multiple"
+		:chips="props.header.chips"
+		:filter="true"
+		class="filter-input"
+		:aria-label="props.header.title || 'Filtre'"
+		@click:clear="handleClear"
+	/>
+</template>
+
+<style lang="scss" scoped>
+.filter-input {
+	width: 100%;
+}
+</style>

package/src/components/Tables/common/filters/NumberFilter.vue

@@ -203,7 +203,7 @@
 	<div class="number-filter-container">
 		<SyTextField
 			v-model="modelValue"
-			:label="header.title"
+			:label="header.title || ''"
 			type="text"
 			:clearable="inputConfig?.clearable ?? clearable"
 			:density="inputConfig?.density ?? density"

package/src/components/Tables/common/filters/SelectFilter.vue

@@ -62,15 +62,15 @@
 		return String(props.header.key || props.header.value || (props.header.title ? `filter_${props.header.title}` : `filter_${Date.now()}`))
 	}
 
-	// Ajouter l'option "- choisir -" et gérer les valeurs vides
+	// Gérer les valeurs vides dans les options
 	const filterOptions = computed(() => {
 		if (!props.header.filterOptions || !Array.isArray(props.header.filterOptions)) {
-			return [{ text: locales.defaultOption, value: locales.defaultOption }]
+			return []
 		}
 
 		// Définir le type des options pour accepter null et unknown
 		type FilterOptionValue = { text: string, value: unknown | null }
-		const options: FilterOptionValue[] = [{ text: locales.defaultOption, value: locales.defaultOption }]
+		const options: FilterOptionValue[] = []
 
 		// Traiter les options existantes et remplacer les valeurs vides par "(vide)"
 		props.header.filterOptions.forEach((option) => {
@@ -87,8 +87,8 @@
 
 	const modelValue = computed({
 		get: () => {
-			if (props.filterValue === null) {
-				return props.header.multiple ? [] : locales.defaultOption
+			if (props.filterValue === null || props.filterValue === undefined) {
+				return props.header.multiple ? [] : null
 			}
 			return props.filterValue
 		},
@@ -125,9 +125,9 @@
 				return
 			}
 
-			// Pour la sélection simple (comportement existant)
-			if (newValue === undefined || newValue === null || newValue === locales.defaultOption) {
-				// Effacer le filtre si la valeur est vide ou "-choisir-"
+			// Pour la sélection simple
+			if (newValue === undefined || newValue === null) {
+				// Effacer le filtre si la valeur est vide
 				const newFilters = props.filters.filter(f => f.key !== key)
 				emit('update:filters', newFilters)
 				return
@@ -178,11 +178,10 @@
 		if (import.meta.env?.MODE === 'test' || import.meta.env?.NODE_ENV === 'test') {
 			return true
 		}
-		// En mode normal, cacher le bouton quand l'option par défaut est sélectionnée
 		if (props.header.multiple) {
 			return Array.isArray(modelValue.value) && modelValue.value.length > 0
 		}
-		return modelValue.value !== locales.defaultOption
+		return modelValue.value !== null
 	})
 </script>
 
@@ -200,7 +199,7 @@
 			:variant="inputConfig?.variant ?? variant"
 			:bg-color="inputConfig?.backgroundColor ?? backgroundColor"
 			:disable-error-handling="inputConfig?.disableErrorHandling ?? disableErrorHandling"
-			:multiple="props.header.multiple"
+			:multiple="props.header.multiple === true"
 			:chips="props.header.chips"
 			class="filter-input"
 			:aria-label="props.header.title || 'Filtre'"

package/src/components/Tables/common/filters/TextFilter.vue

@@ -161,7 +161,7 @@
 	<div class="text-filter-container">
 		<SyTextField
 			v-model="modelValue"
-			:label="header.title"
+			:label="header.title || ''"
 			:clearable="inputConfig?.clearable ?? clearable"
 			:density="inputConfig?.density ?? density"
 			:hide-details="inputConfig?.hideDetails ?? hideDetails"

package/src/components/Tables/common/filters/getFilterComponent.ts

@@ -6,7 +6,10 @@ export default function getFilterComponent(filterType?: string, filterOptions?:
 	// Déterminer le type de composant à charger
 	let componentType = 'text'
 
-	if (filterType === 'select' || filterOptions) {
+	if (filterType === 'autocomplete') {
+		componentType = 'autocomplete'
+	}
+	else if (filterType === 'select' || filterOptions) {
 		componentType = 'select'
 	}
 	else if (filterType === 'date') {
@@ -27,6 +30,10 @@ export default function getFilterComponent(filterType?: string, filterOptions?:
 	// Sinon, charger le composant de manière asynchrone
 	let asyncComponent
 	switch (componentType) {
+		case 'autocomplete':
+			asyncComponent = markRaw(defineAsyncComponent(() => import('./AutocompleteFilter.vue')))
+			Object.defineProperty(asyncComponent, 'name', { value: 'AutocompleteFilter' })
+			break
 		case 'select':
 			asyncComponent = markRaw(defineAsyncComponent(() => import('./SelectFilter.vue')))
 			Object.defineProperty(asyncComponent, 'name', { value: 'SelectFilter' })

package/src/components/Tables/common/filters/locales.ts

@@ -1,4 +1,3 @@
 export const locales = {
-	defaultOption: '- choisir -',
 	emptyValue: '(vide)',
 }

package/src/components/Tables/common/filters/tests/AutocompleteFilter.a11y.spec.ts

@@ -0,0 +1,110 @@
+// @vitest-environment jsdom
+
+import { describe, it, afterEach } from 'vitest'
+import { mount } from '@vue/test-utils'
+import { axe } from 'vitest-axe'
+import { assertNoA11yViolations } from '@tests/unit/accessibility/axeUtils'
+
+import AutocompleteFilter from '../AutocompleteFilter.vue'
+
+// Stub accessible : un <input> avec un <label> associé représente
+// le champ de saisie de l'autocomplete de façon évaluable par axe.
+const accessibleSyAutocompleteStub = {
+	template: `
+		<div>
+			<label :for="inputId">{{ label }}</label>
+			<input
+				:id="inputId"
+				type="text"
+				role="combobox"
+				:aria-label="label"
+				:aria-expanded="false"
+				aria-autocomplete="list"
+				v-bind="$attrs"
+			/>
+		</div>
+	`,
+	props: ['modelValue', 'label', 'items', 'clearable', 'density', 'hideDetails',
+		'disableErrorHandling', 'variantStyle', 'bgColor', 'multiple', 'chips', 'filter'],
+	emits: ['update:modelValue', 'click:clear'],
+	setup() {
+		const inputId = `autocomplete-stub-${Math.random().toString(36).slice(2)}`
+		return { inputId }
+	},
+}
+
+const baseHeader = {
+	title: 'Statut',
+	key: 'status',
+	filterOptions: [
+		{ text: 'Actif', value: 'Actif' },
+		{ text: 'En congé', value: 'En congé' },
+		{ text: 'Inactif', value: 'Inactif' },
+	],
+}
+
+afterEach(() => {
+	document.body.innerHTML = ''
+})
+
+describe('AutocompleteFilter – accessibilité (axe)', () => {
+	it('has no axe violations in default (single) state', async () => {
+		const wrapper = mount(AutocompleteFilter, {
+			attachTo: document.body,
+			global: { stubs: { SyAutocomplete: accessibleSyAutocompleteStub } },
+			props: {
+				header: baseHeader,
+				filters: [],
+				filterValue: undefined,
+			},
+		})
+
+		const results = await axe(wrapper.element as HTMLElement)
+		assertNoA11yViolations(results, 'AutocompleteFilter – single, empty', { ignoreRules: ['region'] })
+	})
+
+	it('has no axe violations when a value is selected', async () => {
+		const wrapper = mount(AutocompleteFilter, {
+			attachTo: document.body,
+			global: { stubs: { SyAutocomplete: accessibleSyAutocompleteStub } },
+			props: {
+				header: baseHeader,
+				filters: [{ key: 'status', value: 'Actif', type: 'autocomplete' }],
+				filterValue: 'Actif',
+			},
+		})
+
+		const results = await axe(wrapper.element as HTMLElement)
+		assertNoA11yViolations(results, 'AutocompleteFilter – single, with value', { ignoreRules: ['region'] })
+	})
+
+	it('has no axe violations in multiple selection state', async () => {
+		const wrapper = mount(AutocompleteFilter, {
+			attachTo: document.body,
+			global: { stubs: { SyAutocomplete: accessibleSyAutocompleteStub } },
+			props: {
+				header: { ...baseHeader, multiple: true, chips: true },
+				filters: [],
+				filterValue: [],
+			},
+		})
+
+		const results = await axe(wrapper.element as HTMLElement)
+		assertNoA11yViolations(results, 'AutocompleteFilter – multiple, empty', { ignoreRules: ['region'] })
+	})
+
+	it('has no axe violations when header has no title (falls back to aria-label "Filtre")', async () => {
+		const wrapper = mount(AutocompleteFilter, {
+			attachTo: document.body,
+			global: { stubs: { SyAutocomplete: accessibleSyAutocompleteStub } },
+			props: {
+				header: { key: 'status', filterOptions: baseHeader.filterOptions },
+				filters: [],
+				filterValue: undefined,
+			},
+		})
+
+		const results = await axe(wrapper.element as HTMLElement)
+		assertNoA11yViolations(results, 'AutocompleteFilter – no title', { ignoreRules: ['region'] })
+	})
+})

package/src/components/Tables/common/filters/tests/AutocompleteFilter.spec.ts

@@ -0,0 +1,203 @@
+import { describe, it, expect, beforeEach, vi, afterEach } from 'vitest'
+import { mount } from '@vue/test-utils'
+
+import AutocompleteFilter from '../AutocompleteFilter.vue'
+import SyAutocomplete from '@/components/Customs/Selects/SyAutocomplete/SyAutocomplete.vue'
+import type { FilterType } from '../../types'
+
+describe('AutocompleteFilter.vue', () => {
+	let wrapper: ReturnType<typeof mount<typeof AutocompleteFilter>>
+	const header = {
+		title: 'Test Autocomplete',
+		key: 'test',
+		filterOptions: [
+			{ text: 'Option 1', value: 'option1' },
+			{ text: 'Option 2', value: 'option2' },
+		],
+	}
+	const filters: { key: string, value: string | number, type: FilterType }[] = []
+
+	beforeEach(() => {
+		wrapper = mount(AutocompleteFilter, {
+			global: {
+				stubs: {
+					SyAutocomplete: {
+						template: '<div class="sy-autocomplete-stub" data-testid="sy-autocomplete" :label="label" :clearable="clearable" :density="density" :hideDetails="hideDetails"></div>',
+						props: ['modelValue', 'label', 'items', 'clearable', 'density', 'hideDetails', 'disableErrorHandling', 'variantStyle', 'multiple', 'chips', 'filter'],
+						emits: ['update:modelValue', 'click:clear'],
+					},
+				},
+			},
+			props: {
+				header,
+				filters,
+				filterValue: undefined,
+			},
+		})
+	})
+
+	afterEach(() => {
+		vi.clearAllMocks()
+		document.body.innerHTML = ''
+	})
+
+	it('renders correctly with default props', () => {
+		expect(wrapper.exists()).toBe(true)
+		expect(wrapper.findComponent(SyAutocomplete).exists()).toBe(true)
+	})
+
+	it('passes the correct props to SyAutocomplete', () => {
+		const syAutocomplete = wrapper.findComponent(SyAutocomplete)
+		expect(syAutocomplete.attributes('label')).toBe('Test Autocomplete')
+		expect(syAutocomplete.attributes('clearable')).toBe('true')
+		expect(syAutocomplete.attributes('density')).toBe('compact')
+		expect(syAutocomplete.attributes('hidedetails')).toBe('true')
+	})
+
+	it('emits update:filters event when value changes', async () => {
+		const syAutocomplete = wrapper.findComponent(SyAutocomplete)
+		syAutocomplete.vm.$emit('update:modelValue', 'option1')
+
+		expect(wrapper.emitted('update:filters')).toBeTruthy()
+		expect(wrapper.emitted('update:filters')![0]?.[0]).toEqual([
+			{ key: 'test', value: 'option1', type: 'autocomplete' as FilterType },
+		])
+	})
+
+	it('emits update:filters event to remove filter when value is null', async () => {
+		const syAutocomplete = wrapper.findComponent(SyAutocomplete)
+		syAutocomplete.vm.$emit('update:modelValue', 'option1')
+		syAutocomplete.vm.$emit('update:modelValue', null)
+
+		expect(wrapper.emitted('update:filters')![1]?.[0]).toEqual([])
+	})
+
+	it('emits update:filters event to remove filter when value is undefined', async () => {
+		const syAutocomplete = wrapper.findComponent(SyAutocomplete)
+		await syAutocomplete.vm.$emit('update:modelValue', 'option1')
+		syAutocomplete.vm.$emit('update:modelValue', undefined)
+
+		expect(wrapper.emitted('update:filters')![1]?.[0]).toEqual([])
+	})
+
+	it('handles clear button click', async () => {
+		const syAutocomplete = wrapper.findComponent(SyAutocomplete)
+		await syAutocomplete.vm.$emit('click:clear')
+
+		expect(wrapper.emitted('update:filters')).toBeTruthy()
+		expect(wrapper.emitted('update:filters')![0]?.[0]).toEqual([])
+	})
+
+	it('updates existing filter when one already exists', async () => {
+		const existingFilters = [{ key: 'test', value: 'option1', type: 'autocomplete' as FilterType }]
+		await wrapper.setProps({ filters: existingFilters })
+
+		const syAutocomplete = wrapper.findComponent(SyAutocomplete)
+		syAutocomplete.vm.$emit('update:modelValue', 'option2')
+
+		expect(wrapper.emitted('update:filters')![0]?.[0]).toEqual([
+			{ key: 'test', value: 'option2', type: 'autocomplete' as FilterType },
+		])
+	})
+
+	it('handles multiple selection - emits array value', async () => {
+		await wrapper.setProps({
+			header: { ...header, multiple: true },
+		})
+
+		const syAutocomplete = wrapper.findComponent(SyAutocomplete)
+		syAutocomplete.vm.$emit('update:modelValue', ['option1', 'option2'])
+
+		expect(wrapper.emitted('update:filters')).toBeTruthy()
+		expect(wrapper.emitted('update:filters')![0]?.[0]).toEqual([
+			{ key: 'test', value: ['option1', 'option2'], type: 'autocomplete' as FilterType },
+		])
+	})
+
+	it('removes filter when multiple selection is cleared to empty array', async () => {
+		await wrapper.setProps({
+			header: { ...header, multiple: true },
+			filters: [{ key: 'test', value: ['option1'], type: 'autocomplete' as FilterType }],
+		})
+
+		const syAutocomplete = wrapper.findComponent(SyAutocomplete)
+		syAutocomplete.vm.$emit('update:modelValue', [])
+
+		expect(wrapper.emitted('update:filters')![0]?.[0]).toEqual([])
+	})
+
+	it('generates unique key from title when header.key is absent', async () => {
+		const headerWithoutKey = {
+			title: 'Test Autocomplete',
+			filterOptions: [
+				{ text: 'Option 1', value: 'option1' },
+			],
+		}
+		const newWrapper = mount(AutocompleteFilter, {
+			global: {
+				stubs: {
+					SyAutocomplete: {
+						template: '<div class="sy-autocomplete-stub"></div>',
+						props: ['modelValue', 'label', 'items', 'clearable', 'density', 'hideDetails', 'disableErrorHandling', 'variantStyle', 'multiple', 'chips', 'filter'],
+						emits: ['update:modelValue', 'click:clear'],
+					},
+				},
+			},
+			props: {
+				header: headerWithoutKey,
+				filters: [],
+				filterValue: undefined,
+			},
+		})
+
+		const syAutocomplete = newWrapper.findComponent(SyAutocomplete)
+		await syAutocomplete.vm.$emit('update:modelValue', 'option1')
+
+		expect(newWrapper.emitted('update:filters')).toBeTruthy()
+		const emittedFilters = newWrapper.emitted('update:filters')![0]?.[0] as Array<{ key: string, value: string, type: string }>
+		expect(emittedFilters.length).toBe(1)
+		expect(emittedFilters[0]?.key).toBe('filter_Test Autocomplete')
+		expect(emittedFilters[0]?.value).toBe('option1')
+		expect(emittedFilters[0]?.type).toBe('autocomplete')
+	})
+
+	it('generates unique key with timestamp when all header properties are absent', async () => {
+		const originalDateNow = Date.now
+		const mockTimestamp = 1622548800000
+		global.Date.now = vi.fn(() => mockTimestamp)
+
+		const emptyHeader = {
+			filterOptions: [
+				{ text: 'Option 1', value: 'option1' },
+			],
+		}
+		const newWrapper = mount(AutocompleteFilter, {
+			global: {
+				stubs: {
+					SyAutocomplete: {
+						template: '<div class="sy-autocomplete-stub"></div>',
+						props: ['modelValue', 'label', 'items', 'clearable', 'density', 'hideDetails', 'disableErrorHandling', 'variantStyle', 'multiple', 'chips', 'filter'],
+						emits: ['update:modelValue', 'click:clear'],
+					},
+				},
+			},
+			props: {
+				header: emptyHeader,
+				filters: [],
+				filterValue: undefined,
+			},
+		})
+
+		const syAutocomplete = newWrapper.findComponent(SyAutocomplete)
+		await syAutocomplete.vm.$emit('update:modelValue', 'option1')
+
+		expect(newWrapper.emitted('update:filters')).toBeTruthy()
+		const emittedFilters = newWrapper.emitted('update:filters')![0]?.[0] as Array<{ key: string, value: string, type: string }>
+		expect(emittedFilters.length).toBe(1)
+		expect(emittedFilters[0]?.key).toBe(`filter_${mockTimestamp}`)
+		expect(emittedFilters[0]?.value).toBe('option1')
+		expect(emittedFilters[0]?.type).toBe('autocomplete')
+
+		global.Date.now = originalDateNow
+	})
+})

package/src/components/Tables/common/filters/tests/SelectFilter.a11y.spec.ts

@@ -0,0 +1,104 @@
+// @vitest-environment jsdom
+
+import { describe, it, afterEach } from 'vitest'
+import { mount } from '@vue/test-utils'
+import { axe } from 'vitest-axe'
+import { assertNoA11yViolations } from '@tests/unit/accessibility/axeUtils'
+
+import SelectFilter from '../SelectFilter.vue'
+
+// Stub accessible : un <select> avec un <label> associé permet à axe
+// de valider label / form-field sans dépendre de l'implémentation SySelect.
+const accessibleSySelectStub = {
+	template: `
+		<div>
+			<label :for="inputId">{{ label }}</label>
+			<select :id="inputId" :aria-label="label" v-bind="$attrs">
+				<option v-for="item in items" :key="item.value" :value="item.value">{{ item.text }}</option>
+			</select>
+		</div>
+	`,
+	props: ['modelValue', 'label', 'items', 'clearable', 'density', 'hideDetails', 'hideMessages',
+		'disableErrorHandling', 'variant', 'bgColor', 'multiple', 'chips'],
+	emits: ['update:modelValue', 'click:clear'],
+	setup() {
+		const inputId = `select-stub-${Math.random().toString(36).slice(2)}`
+		return { inputId }
+	},
+}
+
+const baseHeader = {
+	title: 'Département',
+	key: 'department',
+	filterOptions: [
+		{ text: 'RH', value: 'RH' },
+		{ text: 'IT', value: 'IT' },
+		{ text: 'Finance', value: 'Finance' },
+	],
+}
+
+afterEach(() => {
+	document.body.innerHTML = ''
+})
+
+describe('SelectFilter – accessibilité (axe)', () => {
+	it('has no axe violations in default (single) state', async () => {
+		const wrapper = mount(SelectFilter, {
+			attachTo: document.body,
+			global: { stubs: { SySelect: accessibleSySelectStub } },
+			props: {
+				header: baseHeader,
+				filters: [],
+				filterValue: undefined,
+			},
+		})
+
+		const results = await axe(wrapper.element as HTMLElement)
+		assertNoA11yViolations(results, 'SelectFilter – single, empty', { ignoreRules: ['region'] })
+	})
+
+	it('has no axe violations when a value is selected', async () => {
+		const wrapper = mount(SelectFilter, {
+			attachTo: document.body,
+			global: { stubs: { SySelect: accessibleSySelectStub } },
+			props: {
+				header: baseHeader,
+				filters: [{ key: 'department', value: 'RH', type: 'select' }],
+				filterValue: 'RH',
+			},
+		})
+
+		const results = await axe(wrapper.element as HTMLElement)
+		assertNoA11yViolations(results, 'SelectFilter – single, with value', { ignoreRules: ['region'] })
+	})
+
+	it('has no axe violations in multiple selection state', async () => {
+		const wrapper = mount(SelectFilter, {
+			attachTo: document.body,
+			global: { stubs: { SySelect: accessibleSySelectStub } },
+			props: {
+				header: { ...baseHeader, multiple: true, chips: true },
+				filters: [],
+				filterValue: [],
+			},
+		})
+
+		const results = await axe(wrapper.element as HTMLElement)
+		assertNoA11yViolations(results, 'SelectFilter – multiple, empty', { ignoreRules: ['region'] })
+	})
+
+	it('has no axe violations when header has no title (falls back to aria-label "Filtre")', async () => {
+		const wrapper = mount(SelectFilter, {
+			attachTo: document.body,
+			global: { stubs: { SySelect: accessibleSySelectStub } },
+			props: {
+				header: { key: 'status', filterOptions: baseHeader.filterOptions },
+				filters: [],
+				filterValue: undefined,
+			},
+		})
+
+		const results = await axe(wrapper.element as HTMLElement)
+		assertNoA11yViolations(results, 'SelectFilter – no title', { ignoreRules: ['region'] })
+	})
+})