@cnamts/synapse 1.0.16 → 1.0.18

package/src/components/FilterSideBar/FilterSideBar.stories.ts

@@ -1,12 +1,13 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
 import FilterSideBar from './FilterSideBar.vue'
 import { fn } from '@storybook/test'
-import { VDivider, VSelect, VTextField } from 'vuetify/components'
+import { VDivider, VSelect } from 'vuetify/components'
 import PeriodField from '../PeriodField/PeriodField.vue'
 import SearchListField from '../SearchListField/SearchListField.vue'
 import { ref } from 'vue'
 import FilterInline from '../FilterInline/FilterInline.vue'
 import RangeField from '../RangeField/RangeField.vue'
+import SyTextField from '../Customs/SyTextField/SyTextField.vue'
 
 const meta = {
 	title: 'Composants/Filtres/FiltersSideBar',
@@ -35,6 +36,21 @@ const meta = {
 				},
 			},
 		},
+		'modale': {
+			description: 'Definit la dialogue en mode modale et bloque le focus dans la dialogue.',
+			control: {
+				type: 'boolean',
+			},
+			table: {
+				category: 'props',
+				type: {
+					summary: 'boolean',
+				},
+				defaultValue: {
+					summary: 'false',
+				},
+			},
+		},
 		'locales': {
 			description: 'Traductions',
 			control: {
@@ -117,7 +133,7 @@ export const Default: Story = {
 		}),
 	],
 	render: args => ({
-		components: { FilterSideBar, VTextField, VSelect, PeriodField, SearchListField },
+		components: { FilterSideBar, SyTextField, VSelect, PeriodField, SearchListField },
 		setup() {
 			const filters = ref([
 				{
@@ -188,7 +204,7 @@ export const Default: Story = {
 				v-model="filters"
 			>
 				<template #name="{ props }">
-					<VTextField
+					<SyTextField
 						v-bind="props"
 						label="Nom"
 						variant="outlined"
@@ -224,8 +240,8 @@ export const Default: Story = {
 				<template #profession="{ props }">
 					<SearchListField
 						v-bind="props"
+						label="Profession"
 						:items="professionList"
-						return-object
 					/>
 				</template>
 			</FilterSideBar>
@@ -240,7 +256,7 @@ export const Default: Story = {
 	v-model="filters"
 >
 	<template #name="{ props }">
-		<VTextField
+		<SyTextField
 			v-bind="props"
 			label="Nom"
 			variant="outlined"
@@ -276,6 +292,7 @@ export const Default: Story = {
 	<template #profession="{ props }">
 		<SearchListField
 			v-bind="props"
+			label="Profession"
 			:items="professionList"
 			return-object
 		/>
@@ -463,7 +480,7 @@ export const FilterCombination: Story = {
 		}),
 	],
 	render: args => ({
-		components: { FilterSideBar, FilterInline, VTextField, VSelect, PeriodField, SearchListField, VDivider },
+		components: { FilterSideBar, FilterInline, SyTextField, VSelect, PeriodField, SearchListField, VDivider },
 		setup() {
 			const filters = ref([
 				{
@@ -535,7 +552,7 @@ export const FilterCombination: Story = {
 				v-bind="args"
 			>
 				<template #name="{ props }">
-					<VTextField
+					<SyTextField
 						v-bind="props"
 						label="Nom"
 						variant="outlined"
@@ -581,7 +598,7 @@ export const FilterCombination: Story = {
 				v-bind="args"
 			>
 				<template #name="{ props }">
-					<VTextField
+					<SyTextField
 						v-bind="props"
 						label="Nom"
 						variant="outlined"
@@ -617,6 +634,7 @@ export const FilterCombination: Story = {
 				<template #profession="{ props }">
 					<SearchListField
 						v-bind="props"
+						label="Profession"
 						:items="professionList"
 						color="primary"
 					/>
@@ -626,6 +644,9 @@ export const FilterCombination: Story = {
 		`,
 	}),
 	parameters: {
+		a11y: {
+			disable: true,
+		},
 		sourceCode: [
 			{
 				name: 'Template',
@@ -635,7 +656,7 @@ export const FilterCombination: Story = {
 				v-model="filters"
 			>
 				<template #name="{ props }">
-					<VTextField
+					<SyTextField
 						v-bind="props"
 						label="Nom"
 						variant="outlined"
@@ -680,7 +701,7 @@ export const FilterCombination: Story = {
 				v-model="filters"
 			>
 				<template #name="{ props }">
-					<VTextField
+					<SyTextField
 						v-bind="props"
 						label="Nom"
 						variant="outlined"
@@ -717,6 +738,7 @@ export const FilterCombination: Story = {
 					<SearchListField
 						v-bind="props"
 						:items="professionList"
+						label="Profession"
 						color="primary"
 					/>
 				</template>
@@ -730,7 +752,7 @@ export const FilterCombination: Story = {
 <script setup lang="ts">
 import { ref } from 'vue'
 import { FilterSideBar, filterInline, SearchListField, PeriodField } from '@cnamts/synapse'
-import { VDivider, VSelect, VTextField } from 'vuetify/components'
+import { VDivider, VSelect, SyTextField } from 'vuetify/components'
 
 const filters = ref([
 	{

package/src/components/FilterSideBar/FilterSideBar.vue

@@ -1,17 +1,21 @@
 <script lang="ts" setup>
-	import { computed, ref, toRef, watch } from 'vue'
-	import { locales as defaultLocales } from './locales'
-	import { mdiFilterVariant } from '@mdi/js'
-	import ChipList from '../ChipList/ChipList.vue'
 	import type { FilterProp } from '@/composables/useFilterable/useFilterable'
 	import useFilterable from '@/composables/useFilterable/useFilterable'
+	import { mdiFilterVariant } from '@mdi/js'
+	import { computed, onMounted, ref, toRef, watch } from 'vue'
 	import { type VBtn, type VNavigationDrawer } from 'vuetify/components'
+	import ChipList from '../ChipList/ChipList.vue'
+	import SyIcon from '../Customs/SyIcon/SyIcon.vue'
+	import { locales as defaultLocales } from './locales'
+	import vLockFocus from '@/directives/lockFocus'
 
 	const props = withDefaults(defineProps<{
 		modelValue?: FilterProp
+		modale?: boolean
 		locales?: typeof defaultLocales
 	}>(), {
 		modelValue: () => [],
+		modale: false,
 		locales: () => defaultLocales,
 	})
 
@@ -58,13 +62,20 @@
 			drawerBtnRef.value!.$el.focus()
 		}
 	})
+
+	onMounted(() => {
+		const filterIconSVG = drawerRef!.value!.$el.nextElementSibling.querySelectorAll('svg[role="img"]')
+		filterIconSVG.forEach((svg) => {
+			svg.removeAttribute('role')
+		})
+	})
 </script>
 
 <template>
 	<div class="sy-filters-side-bar">
 		<VBtn
 			ref="drawerBtnRef"
-			class="px-4 py-3"
+			class="sy-filters-side-bar__open-btn px-4 py-3"
 			:class="{ 'v-btn--active': drawer }"
 			color="primary"
 			variant="text"
@@ -82,18 +93,19 @@
 
 			{{ locales.filterBtnLabel }}
 
-			<VIcon
+			<SyIcon
 				class="ml-2"
+				:icon="mdiFilterVariant"
 				size="small"
-			>
-				{{ mdiFilterVariant }}
-			</VIcon>
+				decorative
+			/>
 		</VBtn>
 		<Teleport
 			to="body"
 		>
 			<VNavigationDrawer
 				ref="drawerRef"
+				tag="div"
 				:model-value="drawer"
 				sticky
 				temporary
@@ -105,83 +117,106 @@
 				disable-resize-watcher
 				tabindex="0"
 				class="sy-filters-side-bar__content elevation-6 bg-white"
+				role="dialog"
+				:aria-hidden="drawer ? undefined : 'true'"
+				:aria-modal="props.modale"
+				:aria-label="locales.modaleLabel"
+				@keydown.escape.prevent="drawer = false"
 			>
-				<VExpansionPanels variant="accordion">
-					<VExpansionPanel
-						v-for="filter in filters"
-						:key="filter.name"
-						:class="`vd-filter-${filter.name}`"
-						tile
-						elevation="0"
+				<form
+					v-lock-focus="$props.modale"
+					@submit.prevent="applyFilters"
+				>
+					<VExpansionPanels
+						variant="accordion"
+						tag="ul"
 					>
-						<VExpansionPanelTitle class="text-subtitle-2">
-							{{ filter.title }}
-
-							<span
-								v-if="getFilterCount(filter)"
-								class="ml-1"
+						<VExpansionPanel
+							v-for="filter in filters"
+							:key="filter.name"
+							:class="`vd-filter-${filter.name}`"
+							tile
+							elevation="0"
+							tag="li"
+						>
+							<VExpansionPanelTitle
+								class="text-subtitle-2"
 							>
-								({{ getFilterCount(filter) }})
-							</span>
-						</VExpansionPanelTitle>
-
-						<VExpansionPanelText>
-							<ChipList
-								:items="getChips(filter)"
-								:overflow-limit="filter.chipOverflowLimit"
-								class="mb-5"
-								:vuetify-options="{ chip: { color: 'secondary' }, icon: { color: 'white'} }"
-								@remove="removeChip(filter, $event)"
-								@reset="resetFilter(filter)"
-							/>
-
-							<slot
-								:name="`${formatFilterName(filter.name)}`"
-								:props="{
-									modelValue: filter.value as any,
-									'onUpdate:modelValue': (value: unknown) =>
-										(filter.value = value),
-								}"
-							/>
-						</VExpansionPanelText>
-					</VExpansionPanel>
-				</VExpansionPanels>
-
-				<VSpacer />
-
-				<div class="px-4 pb-4 pt-10">
-					<VBtn
-						color="primary"
-						block
-						size="large"
-						variant="outlined"
-						class="mb-4"
-						@click="drawer = false"
-					>
-						{{ locales.close }}
-					</VBtn>
-
-					<VBtn
-						color="primary"
-						block
-						size="large"
-						variant="outlined"
-						class="mb-4"
-						@click.stop="resetAllFilters"
-					>
-						{{ locales.reset }}
-					</VBtn>
-
-					<VBtn
-						color="primary"
-						block
-						size="large"
-						variant="elevated"
-						@click.stop="applyFilters"
-					>
-						{{ locales.apply }}
-					</VBtn>
-				</div>
+								{{ filter.title }}
+
+								<span
+									v-if="getFilterCount(filter)"
+									class="ml-1"
+								>
+									({{ getFilterCount(filter) }})
+								</span>
+							</VExpansionPanelTitle>
+
+							<VExpansionPanelText>
+								<ChipList
+									:aria-label="locales.badgeListLabel(filter.name)"
+									:items="getChips(filter)"
+									:overflow-limit="filter.chipOverflowLimit"
+									class="mb-5"
+									:vuetify-options="{ chip: { color: 'secondary' }, icon: { color: 'white'} }"
+									@remove="removeChip(filter, $event)"
+									@reset="resetFilter(filter)"
+								/>
+
+								<slot
+									:name="`${formatFilterName(filter.name)}`"
+									:props="{
+										modelValue: filter.value as any,
+										'onUpdate:modelValue': (value: unknown) =>{
+											(filter.value = value)},
+									}"
+								/>
+							</VExpansionPanelText>
+						</VExpansionPanel>
+					</VExpansionPanels>
+
+					<VSpacer />
+
+					<div class="px-4 pb-4 pt-10">
+						<VBtn
+							color="primary"
+							block
+							size="large"
+							variant="outlined"
+							class="sy-filters-side-bar__close-btn mb-4"
+							:aria-label="locales.closeAriaLabel"
+							@click="drawer = false"
+						>
+							{{ locales.close }}
+						</VBtn>
+
+						<VBtn
+							color="primary"
+							block
+							size="large"
+							variant="outlined"
+							class="sy-filters-side-bar__reset-btn mb-4"
+							type="reset"
+							:aria-label="locales.resetAriaLabel"
+							@click.stop="resetAllFilters"
+						>
+							{{ locales.reset }}
+						</VBtn>
+
+						<VBtn
+							color="primary"
+							block
+							size="large"
+							class="sy-filters-side-bar__apply-btn"
+							variant="elevated"
+							type="submit"
+							:aria-label="locales.applyAriaLabel"
+							@click.stop="applyFilters"
+						>
+							{{ locales.apply }}
+						</VBtn>
+					</div>
+				</form>
 			</VNavigationDrawer>
 		</Teleport>
 	</div>
@@ -209,4 +244,32 @@
 	}
 }
 
+.sy-filters-side-bar__close-btn,
+.sy-filters-side-bar__reset-btn,
+.sy-filters-side-bar__apply-btn,
+.sy-filters-side-bar__open-btn {
+	&:focus-visible {
+		outline: 2px solid rgb(var(--v-theme-primary));
+		outline-offset: 2px;
+
+		:deep(.v-btn__overlay) {
+			display: none;
+		}
+
+		&::after {
+			display: none;
+		}
+	}
+}
+
+.v-expansion-panel-title {
+	&:focus-visible {
+		outline: 2px solid rgb(var(--v-theme-primary));
+		outline-offset: -2px;
+
+		:deep(.v-expansion-panel-title__overlay) {
+			display: none;
+		}
+	}
+}
 </style>

package/src/components/FilterSideBar/locales.ts

@@ -1,8 +1,14 @@
 export const locales = {
 	filterBtnLabel: 'Filtres',
+	modaleLabel: 'Filtres',
+	badgeListLabel: (filterName: string): string =>
+		'Filtres pour la catégorie ' + filterName,
 	badgeLabel: (count: number): string =>
 		`${count} filtre${count > 1 ? 's' : ''}`,
 	reset: 'Réinitialiser',
 	close: 'Fermer',
 	apply: 'Appliquer',
+	closeAriaLabel: 'Fermer les filtres',
+	resetAriaLabel: 'Réinitialiser les filtres',
+	applyAriaLabel: 'Appliquer les filtres',
 } as const

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

@@ -0,0 +1,59 @@
+// @vitest-environment jsdom
+
+import { describe, it } from 'vitest'
+import { mount } from '@vue/test-utils'
+import { axe } from 'vitest-axe'
+import { defineComponent } from 'vue'
+import { VApp } from 'vuetify/components'
+import { assertNoA11yViolations } from '@tests/unit/accessibility/axeUtils'
+import FilterSideBar from '../FilterSideBar.vue'
+
+// Scénario d’accessibilité : barre latérale de filtres avec un filtre actif,
+// tiroir ouvert et boutons d’action visibles.
+
+const TestA11yComponent = defineComponent({
+	components: { VApp, FiltersSideBar: FilterSideBar },
+	data() {
+		return {
+			localModelValue: [
+				{
+					name: 'name',
+					title: 'Nom',
+					value: 'John Doe',
+				},
+			],
+		}
+	},
+	template: `
+    <VApp>
+      <FiltersSideBar v-model="localModelValue" />
+    </VApp>
+  `,
+})
+
+describe('FilterSideBar – accessibility (axe)', () => {
+	it('has no obvious axe violations with drawer open and one active filter', async () => {
+		const wrapper = mount(TestA11yComponent, {
+			global: {
+				stubs: {
+					Teleport: true,
+				},
+			},
+			attachTo: document.body,
+		})
+
+		// Ouvrir le tiroir de filtres
+		const toggleButton = wrapper.find('.sy-filters-side-bar .v-btn__content')
+		if (toggleButton.exists()) {
+			await toggleButton.trigger('click')
+			await wrapper.vm.$nextTick()
+		}
+
+		const results = await axe(wrapper.element as HTMLElement)
+		assertNoA11yViolations(results, 'FilterSideBar – drawer open', {
+			ignoreRules: ['region'],
+		})
+
+		wrapper.unmount()
+	})
+})

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

@@ -140,7 +140,7 @@ describe('FilterSideBar', () => {
 
 		await wrapper.find('button:nth-child(3)').trigger('click')
 
-		const emittedValue = wrapper.emitted('update:modelValue')?.[0][0]
+		const emittedValue = wrapper.emitted('update:modelValue')?.[0]?.[0]
 		const expectedValue = [
 			{
 				name: 'name',
@@ -231,7 +231,7 @@ describe('FilterSideBar', () => {
 
 		await wrapper.find('button:nth-child(3)').trigger('click')
 
-		const emittedValue = wrapper.emitted('update:modelValue')?.[0][0]
+		const emittedValue = wrapper.emitted('update:modelValue')?.[0]?.[0]
 		const expectedValue = [
 			{
 				name: 'name',
@@ -275,11 +275,11 @@ describe('FilterSideBar', () => {
 
 		await wrapper
 			.find(
-				'.v-navigation-drawer__content>div:last-child button:nth-child(2)',
+				'.v-navigation-drawer__content button[type="reset"]',
 			)
 			.trigger('click')
 
-		const emittedValue = wrapper.emitted('update:modelValue')?.[0][0]
+		const emittedValue = wrapper.emitted('update:modelValue')?.[0]?.[0]
 		const expectedValue = [
 			{
 				name: 'name',
@@ -322,7 +322,7 @@ describe('FilterSideBar', () => {
 		await wrapper.find('.v-btn__content').trigger('click')
 		await wrapper
 			.find(
-				'.v-navigation-drawer__content>div:last-child button:nth-child(1)',
+				'.v-navigation-drawer__content button[aria-label="Fermer les filtres"]',
 			)
 			.trigger('click')
 

package/src/components/FooterBar/Accessibilite.mdx

@@ -1,18 +1,74 @@
-import { Meta, Story } from '@storybook/addon-docs';
+import { Meta, Story } from '@storybook/blocks';
 import * as AccessStories from './Accessibilite.stories.ts';
-import '../../stories/styles/shared.css';
+import * as FooterBarStories from './FooterBar.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={AccessStories} />
 
-<div className="header">
-  <h1>Accessibilité</h1>
-  <p>Informations sur l'accessibilité du composant</p>
-</div>
+<AccessibilityGuideLayout
+	componentName="FooterBar"
+	iconSrc={AccessibilityIcon}
+	apgHref="https://www.w3.org/WAI/ARIA/apg/patterns/landmarks/"
+	apgLabel="Landmarks Guide"
+>
+	<CriteriaSection>
+		<CriteriaCard icon="🏷️" title="Rôles et landmarks">
+			<ul>
+				<li><strong>Landmark footer</strong> : <code>role="contentinfo"</code> pour identifier le pied de page</li>
+				<li><strong>Navigation sémantique</strong> : Liens structurés avec <code>&lt;a&gt;</code> et <code>aria-label</code> descriptifs</li>
+				<li><strong>Logo accessible</strong> : Image avec <code>alt</code> approprié ou texte alternatif</li>
+			</ul>
+		</CriteriaCard>
 
-<Story of={AccessStories.Legende} />
-<br />
+		<CriteriaCard icon="⌨️" title="Navigation clavier">
+			<ul>
+				<li><strong>Focus visible</strong> : Indicateurs de focus sur tous les éléments interactifs</li>
+				<li><strong>Ordre logique</strong> : Tabulation dans un ordre cohérent</li>
+				<li><strong>Liens accessibles</strong> : <code>aria-label</code> pour les icônes de réseaux sociaux</li>
+			</ul>
+		</CriteriaCard>
 
---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
+		<CriteriaCard icon="🎨" title="Contraste et lisibilité">
+			<ul>
+				<li><strong>Contraste suffisant</strong> : Respect des ratios WCAG pour le texte et les icônes</li>
+				<li><strong>Taille de texte</strong> : Texte lisible et redimensionnable</li>
+				<li><strong>Couleurs adaptatives</strong> : Support des thèmes clair et sombre</li>
+			</ul>
+		</CriteriaCard>
+	</CriteriaSection>
 
-<Story of={AccessStories.AccessibilitePanel} />
-<br />
+	<DemoSection componentName="FooterBar">
+		<Story of={FooterBarStories.Default} />
+	</DemoSection>
+
+	<BestPracticesSection>
+		<ul>
+			<li>Utilisez des <code>aria-label</code> descriptifs pour les liens d'icônes</li>
+			<li>Assurez-vous que le logo a un texte alternatif approprié</li>
+			<li>Vérifiez le contraste des couleurs dans les thèmes clair et sombre</li>
+			<li>Évitez de surcharger le footer avec trop d'informations</li>
+			<li>Fournissez des liens vers les pages légales et de contact</li>
+		</ul>
+	</BestPracticesSection>
+
+	<ResourcesSection>
+		<ul>
+			<li><a href="https://www.w3.org/WAI/ARIA/apg/patterns/landmarks/" target="_blank" rel="noopener noreferrer">Guide des landmarks ARIA</a></li>
+			<li><a href="https://www.w3.org/WAI/WCAG21/quickref/" target="_blank" rel="noopener noreferrer">Référence rapide WCAG 2.1</a></li>
+			<li><a href="https://inclusive-components.design/content-sections/" target="_blank" rel="noopener noreferrer">Inclusive Components: Content Sections</a></li>
+		</ul>
+	</ResourcesSection>
+
+	<AuditSection>
+		<p>Aucun rapport d'audit disponible pour le moment.</p>
+	</AuditSection>
+</AccessibilityGuideLayout>