@cnamts/synapse 1.0.26 → 1.1.0

package/src/components/TableToolbar/TableToolbar.vue

@@ -61,7 +61,7 @@
 <template>
 	<VToolbar
 		v-bind="options.toolbar"
-		:class="{ 'v-theme-dark': theme.current.value.dark}"
+		:class="{ 'v-theme-grey-darken80': theme.current.value.dark}"
 		class="sy-table-toolbar px-4 py-2 d-flex flex-wrap align-center justify-space-between"
 	>
 		<p
@@ -164,23 +164,23 @@
 
 	p,
 	.text-primary {
-		color: rgba(var(--v-theme-textOnDark), 0.6) !important;
+		color: rgba(var(--v-theme-onPrimary), 0.6) !important;
 	}
 
 	svg {
-		fill: rgb(var(--v-theme-textOnDark)) !important;
+		fill: rgb(var(--v-theme-onPrimary)) !important;
 	}
 
 	.v-label {
-		color: rgba(var(--v-theme-textOnDark), 0.6) !important;
+		color: rgba(var(--v-theme-onPrimary), 0.6) !important;
 	}
 
 	.v-field__input {
-		color: rgb(var(--v-theme-textOnDark)) !important;
+		color: rgb(var(--v-theme-onPrimary)) !important;
 	}
 }
 
 .v-theme--dark button.v-btn:hover :deep() {
-	background: rgba(var(--v-theme-textOnDark), 0.1);
+	background: rgba(var(--v-theme-onPrimary), 0.1);
 }
 </style>

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

@@ -1,12 +1,86 @@
-import { Meta, Story } from '@storybook/addon-docs';
-import * as Stories from '../TableToolbar.stories.ts';
+import { Meta, Story } from '@storybook/blocks';
+import * as Stories from '../TableToolbar.stories';
+import AccessibilityIcon from '@/common/imgs/accessibility-svgrepo-com.svg';
 import '@/stories/styles/shared.css';
+import {
+    AccessibilityGuideLayout,
+    CriteriaSection,
+    CriteriaCard,
+    DemoSection,
+    BestPracticesSection,
+    ResourcesSection,
+    AuditSection,
+} from '@/stories/accessibility/AccessibilityGuideLayout.mdx';
 
 <Meta of={Stories} />
 
-<div className="header">
-  <h1>Accessibilité</h1>
-  <p>Cette page sera bientôt disponible</p>
-</div>
+<AccessibilityGuideLayout
+    componentName="TableToolbar"
+    iconSrc={AccessibilityIcon}
+>
+    <AuditSection>
+        <div>Rapport d’audit manuel :{' '}<a href="/audits/TableToolbar.xlsx" style={{color: '#0C41BD'}}>Voir le rapport</a></div>
+        <div style={{color: 'grey', fontSize: '14px', marginTop: '0px'}}>Correctifs associés (<a href="https://github.com/assurance-maladie-digital/design-system-v3/issues/925" target="_blank" style={{color: '#0C41BD'}}>issue #925</a>)</div>
+    </AuditSection>
 
-<br />
+    <CriteriaSection>
+        <CriteriaCard icon="🏷️" title="Structure et rôles">
+            <ul>
+                <li>Le conteneur est un <code>VToolbar</code> servant de barre d’outils et non de navigation principale.</li>
+                <li>Le champ de recherche est un <code>VTextField</code> avec label explicite via <code>searchLabel</code>.</li>
+                <li>Le bouton d’ajout est un <code>VBtn</code> avec icône <code>mdiPlus</code> et texte visible selon le breakpoint.</li>
+                <li>Le compteur (<code>nbTotal / nbFiltered</code>) est rendu sous forme de texte informatif, sans rôle interactif.</li>
+                <li>Les slots <code>filters</code>, <code>search-left</code> et <code>search-right</code> permettent d’injecter des contrôles additionnels sans casser la sémantique.</li>
+            </ul>
+        </CriteriaCard>
+
+        <CriteriaCard icon="⌨️" title="Navigation clavier">
+            <ul>
+                <li>Le champ de recherche est entièrement accessible au clavier (Tab / Shift+Tab).</li>
+                <li>Le bouton d’ajout est activable via Entrée / Espace.</li>
+                <li>Les éléments injectés via slots doivent respecter l’ordre de tabulation naturel du DOM.</li>
+                <li>Le focus reste logique lors du redimensionnement (mobile / desktop).</li>
+                <li>Les éléments désactivés via <code>loading</code> sont correctement inaccessibles au clavier.</li>
+            </ul>
+        </CriteriaCard>
+
+        <CriteriaCard icon="🎨" title="Contraste et lisibilité">
+            <ul>
+                <li>Le toolbar adapte son thème (clair/sombre) via <code>v-theme--dark</code>.</li>
+                <li>Le texte du compteur reste lisible avec contraste réduit en mode sombre.</li>
+                <li>Les icônes (loupe, plus) sont décoratives et ne portent pas de sens sans label associé.</li>
+                <li>Le champ de recherche conserve un focus visible cohérent avec le design system.</li>
+            </ul>
+        </CriteriaCard>
+
+        <CriteriaCard icon="📱" title="Responsive et lisibilité mobile">
+            <ul>
+                <li>Sur mobile, le champ de recherche passe en largeur complète (<code>flex-grow</code> ajusté).</li>
+                <li>Le texte du bouton “Ajouter” est masqué sur petit écran pour privilégier l’icône.</li>
+                <li>L’ordre des éléments est conservé pour éviter toute confusion de navigation.</li>
+            </ul>
+        </CriteriaCard>
+    </CriteriaSection>
+
+    <DemoSection componentName="TableToolbar">
+        <Story of={Stories.Default}/>
+    </DemoSection>
+
+    <BestPracticesSection>
+        <ul>
+            <li>Fournissez un <code>searchLabel</code> explicite pour éviter une recherche non contextualisée.</li>
+            <li>Évitez d’injecter trop d’actions dans le slot <code>search-right</code> pour ne pas surcharger la barre.</li>
+            <li>Activez <code>loading</code> pour bloquer les interactions pendant les requêtes.</li>
+            <li>Gardez le bouton “Ajouter” avec un libellé court et actionnable.</li>
+            <li>Utilisez le slot <code>filters</code> uniquement pour des contrôles secondaires liés au tableau.</li>
+        </ul>
+    </BestPracticesSection>
+
+    <ResourcesSection>
+        <ul>
+            <li><a href="https://www.w3.org/WAI/ARIA/apg/patterns/toolbar/" target="_blank" rel="noopener noreferrer">WAI-ARIA Authoring Practices – Toolbar Pattern</a></li>
+            <li><a href="https://www.w3.org/WAI/WCAG21/Understanding/focus-visible.html" target="_blank" rel="noopener noreferrer">WCAG – Focus Visible (2.4.7)</a></li>
+            <li><a href="https://www.numerique.gouv.fr/publications/rgaa-accessibilite/" target="_blank" rel="noopener noreferrer">RGAA – critères 10.7 (focus), 10.8 (contenus cachés)</a></li>
+        </ul>
+    </ResourcesSection>
+</AccessibilityGuideLayout>

package/src/components/TableToolbar/tests/TableToolbar.visual.cy.ts

@@ -0,0 +1,49 @@
+import TableToolbar from '../TableToolbar.vue'
+
+describe('TableToolbar - Visual regression tests', () => {
+	it('displays the table toolbar by default', () => {
+		cy.mountWithVuetify(TableToolbar, {
+			props: { nbTotal: 42 },
+		})
+
+		cy.get('.sy-table-toolbar').should('be.visible')
+		cy.matchImageSnapshot('table-toolbar-default', cy.get('.sy-table-toolbar'))
+	})
+
+	it('displays the table toolbar with filtered count', () => {
+		cy.mountWithVuetify(TableToolbar, {
+			props: {
+				nbTotal: 42,
+				nbFiltered: 10,
+			},
+		})
+
+		cy.get('.sy-table-toolbar').should('be.visible')
+		cy.matchImageSnapshot('table-toolbar-filtered', cy.get('.sy-table-toolbar'))
+	})
+
+	it('displays the table toolbar with add button', () => {
+		cy.mountWithVuetify(TableToolbar, {
+			props: {
+				nbTotal: 42,
+				showAddButton: true,
+				addButtonLabel: 'Ajouter',
+			},
+		})
+
+		cy.get('.sy-table-toolbar').should('be.visible')
+		cy.matchImageSnapshot('table-toolbar-with-add-btn', cy.get('.sy-table-toolbar'))
+	})
+
+	it('displays the table toolbar in loading state', () => {
+		cy.mountWithVuetify(TableToolbar, {
+			props: {
+				nbTotal: 42,
+				loading: true,
+			},
+		})
+
+		cy.get('.sy-table-toolbar').should('be.visible')
+		cy.matchImageSnapshot('table-toolbar-loading', cy.get('.sy-table-toolbar'))
+	})
+})

package/src/components/Tables/SyServerTable/SyServerTable.stories.ts

@@ -226,6 +226,15 @@ const meta = {
 				defaultValue: { summary: 'false' },
 			},
 		},
+		'hideDefaultFooter': {
+			description: 'Masque le footer par défaut du tableau (pagination et contrôles de page). Utile lorsque l\'on souhaite gérer la pagination manuellement ou ne pas en afficher.',
+			control: { type: 'boolean' },
+			table: {
+				category: 'props',
+				type: { summary: 'boolean' },
+				defaultValue: { summary: 'false' },
+			},
+		},
 		// eslint-disable-next-line @typescript-eslint/ban-ts-comment
 		// @ts-ignore - 'cookie-description-${cookieName}' storybook can't infer dynamic slot name
 		'header.<columnKey>': {
@@ -7352,6 +7361,160 @@ export const ComplexItemsDisplay: Story = {
 	},
 }
 
+export const HideDefaultFooter: Story = {
+	parameters: {
+		a11y: {
+			disable: true,
+		},
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `
+				<template>
+					<SyServerTable
+						v-model:options="options"
+						:items="users"
+						:headers="headers"
+						:server-items-length="totalUsers"
+						:loading="state === StateEnum.PENDING"
+						suffix="server-hide-footer"
+						hide-default-footer
+						@update:options="fetchData"
+					/>
+				</template>
+				`,
+			},
+			{
+				name: 'Script',
+				code: `
+				<script setup lang="ts">
+					import { ref } from 'vue'
+					import { SyServerTable } from '@cnamts/synapse'
+					import { StateEnum } from '@cnamts/synapse/src/components/Tables/common/constants/StateEnum'
+					import type { DataOptions } from '@cnamts/synapse/src/components/Tables/common/types'
+
+					const totalUsers = ref(0)
+					const users = ref([])
+					const state = ref(StateEnum.IDLE)
+					const options = ref({ itemsPerPage: -1, page: 1 })
+
+					const headers = [
+						{ title: 'Nom', key: 'lastname' },
+						{ title: 'Prénom', key: 'firstname' },
+						{ title: 'Email', key: 'email' },
+					]
+
+					const fetchData = async () => {
+						const { items, total } = await getDataFromApi(options.value)
+						users.value = items
+						totalUsers.value = total
+					}
+
+					const getDataFromApi = async ({ page, itemsPerPage }: DataOptions) => {
+						state.value = StateEnum.PENDING
+						await new Promise(resolve => setTimeout(resolve, 500))
+						const allItems = getUsers()
+						const total = allItems.length
+						const items = itemsPerPage > 0
+							? allItems.slice((page - 1) * itemsPerPage, page * itemsPerPage)
+							: allItems
+						state.value = StateEnum.RESOLVED
+						return { items, total }
+					}
+
+					const getUsers = () => [
+						{ firstname: 'Virginie', lastname: 'Beauchesne', email: 'virginie.beauchesne@example.com' },
+						{ firstname: 'Simone', lastname: 'Bellefeuille', email: 'simone.bellefeuille@example.com' },
+						{ firstname: 'Étienne', lastname: 'Salois', email: 'etienne.salois@example.com' },
+						{ firstname: 'Bernadette', lastname: 'Langelier', email: 'bernadette.langelier@example.com' },
+						{ firstname: 'Agate', lastname: 'Roy', email: 'agate.roy@example.com' },
+						{ firstname: 'Louis', lastname: 'Denis', email: 'louis.denis@example.com' },
+					]
+
+					fetchData()
+				</script>
+				`,
+			},
+		],
+	},
+	args: {
+		'options': { itemsPerPage: -1, page: 1 },
+		'headers': [
+			{ title: 'Nom', key: 'lastname' },
+			{ title: 'Prénom', key: 'firstname' },
+			{ title: 'Email', key: 'email' },
+		],
+		'serverItemsLength': 6,
+		'suffix': 'server-hide-footer',
+		'density': 'default',
+		'striped': false,
+		'hideDefaultFooter': true,
+		'onUpdate:options': fn(),
+	},
+	render: (args) => {
+		return {
+			components: { SyServerTable },
+			setup() {
+				const totalUsers = ref(0)
+				const users = ref<User[]>([])
+				const state = ref(StateEnum.IDLE)
+				const options = ref({ ...args.options })
+
+				watch(options, (newVal) => {
+					if (args.options) {
+						Object.assign(args.options, JSON.parse(JSON.stringify(newVal)))
+					}
+				}, { deep: true })
+
+				const fetchData = async (): Promise<void> => {
+					const { items, total } = await getDataFromApi(options.value as DataOptions)
+					users.value = items
+					totalUsers.value = total
+				}
+
+				const getDataFromApi = async ({ page, itemsPerPage }: DataOptions): Promise<{ items: User[], total: number }> => {
+					state.value = StateEnum.PENDING
+					await new Promise(resolve => setTimeout(resolve, 500))
+					return new Promise((resolve) => {
+						const allItems = getUsers()
+						const total = allItems.length
+						const items = itemsPerPage > 0
+							? allItems.slice((page - 1) * itemsPerPage, page * itemsPerPage)
+							: allItems
+						resolve({ items, total })
+						state.value = StateEnum.RESOLVED
+					})
+				}
+
+				const getUsers = (): User[] => [
+					{ firstname: 'Virginie', lastname: 'Beauchesne', email: 'virginie.beauchesne@example.com' },
+					{ firstname: 'Simone', lastname: 'Bellefeuille', email: 'simone.bellefeuille@example.com' },
+					{ firstname: 'Étienne', lastname: 'Salois', email: 'etienne.salois@example.com' },
+					{ firstname: 'Bernadette', lastname: 'Langelier', email: 'bernadette.langelier@example.com' },
+					{ firstname: 'Agate', lastname: 'Roy', email: 'agate.roy@example.com' },
+					{ firstname: 'Louis', lastname: 'Denis', email: 'louis.denis@example.com' },
+				]
+
+				fetchData()
+
+				return { args, users, state, fetchData, options, totalUsers, StateEnum }
+			},
+			template: `
+			<div>
+				<SyServerTable
+					v-model:options="options"
+					:items="users"
+					:server-items-length="totalUsers"
+					:loading="state === StateEnum.PENDING"
+					v-bind="args"
+					@update:options="fetchData"
+				/>
+			</div>
+			`,
+		}
+	},
+}
+
 export const PageInput: Story = {
 	parameters: {
 		a11y: {

package/src/components/Tables/SyServerTable/SyServerTable.vue

@@ -42,6 +42,7 @@
 		headingLevel: 2,
 		clickableRow: false,
 		pageInput: false,
+		hideDefaultFooter: false,
 	})
 
 	const emit = defineEmits<{
@@ -467,7 +468,7 @@
 						v-model:headers="headers"
 					/>
 					<SyTablePagination
-						v-if="displayedItems.length > 0 ? displayedItemsLength : 0"
+						v-if="(displayedItems.length > 0 ? displayedItemsLength : 0) && !props.hideDefaultFooter"
 						:page="page"
 						:heading-level="props.headingLevel"
 						:items-per-page="itemsPerPageValue"
@@ -512,11 +513,11 @@
 }
 
 .sy-server-table--pinned-left-shadow :deep(.sy-table__pinned--left) {
-	box-shadow: 2px 0 6px -4px rgba(var(--v-theme-grey-base), 0.6);
+	box-shadow: 2px 0 6px -4px rgba(var(--v-theme-onSurfaceVariant), 0.6);
 }
 
 .sy-server-table--pinned-right-shadow :deep(.sy-table__pinned--right) {
-	box-shadow: -2px 0 6px -4px rgba(var(--v-theme-grey-base), 0.6);
+	box-shadow: -2px 0 6px -4px rgba(var(--v-theme-onSurfaceVariant), 0.6);
 }
 
 .sy-server-table--pinned-select-left :deep(.v-data-table__th--select),
@@ -557,7 +558,7 @@
 .sy-server-table--pinned-left-shadow.sy-server-table--pinned-select-left :deep(.v-table__wrapper > table > tbody > tr:not(.v-data-table-rows-loading) > .v-data-table__td:first-child),
 .sy-server-table--pinned-left-shadow.sy-server-table--pinned-select-left :deep(.v-data-table__tbody .v-data-table__tr:not(.v-data-table-rows-loading) > .v-data-table__td:first-child),
 .sy-server-table--pinned-left-shadow.sy-server-table--pinned-select-left :deep(.v-data-table__tbody tr:not(.v-data-table-rows-loading) > td:first-child) {
-	box-shadow: 2px 0 6px -4px rgba(var(--v-theme-grey-base), 0.6);
+	box-shadow: 2px 0 6px -4px rgba(var(--v-theme-onSurfaceVariant), 0.6);
 }
 /* stylelint-enable @stylistic/max-line-length */
 

package/src/components/Tables/SyServerTable/accessibilite/Accessibility.mdx

@@ -1,10 +1,117 @@
-import { Meta, Story } from '@storybook/addon-docs';
-import * as SyServerTable from '../SyServerTable.stories';
+import { Meta, Story } from '@storybook/blocks';
+import * as Stories from '../SyServerTable.stories';
+import AccessibilityIcon from '@/common/imgs/accessibility-svgrepo-com.svg';
 import '@/stories/styles/shared.css';
+import {
+    AccessibilityGuideLayout,
+    CriteriaSection,
+    CriteriaCard,
+    DemoSection,
+    BestPracticesSection,
+    ResourcesSection,
+    AuditSection,
+} from '@/stories/accessibility/AccessibilityGuideLayout.mdx';
 
-<Meta of={SyServerTable} />
+<Meta of={Stories}/>
 
-<div className="header">
-  <h1>Accessibilité</h1>
-  <p>Cette page sera bientôt disponible</p>
-</div>
+<AccessibilityGuideLayout
+    componentName="SyServerTable"
+    iconSrc={AccessibilityIcon}
+>
+
+    [//]: # (<AuditSection>)
+
+    [//]: # ( <div>)
+
+        [//]: # ( Rapport d’audit manuel :{' '})
+
+        [//]: # ( <a href="/audits/SyServerTable.xlsx" style={{color: '#0C41BD'}}>Voir le rapport</a>)
+
+        [//]: # ( </div>)
+
+    [//]: # ( <div style={{color: 'grey', fontSize: '14px', marginTop: '0px'}}>)
+
+        [//]: # ( Correctifs associés &#40;<a href="https://github.com/assurance-maladie-digital/design-system-v3/issues/XXX" target="_blank" style={{color: '#0C41BD'}}>issue #XXX</a>&#41;)
+
+        [//]: # ( </div>)
+
+    [//]: # (</AuditSection>)
+
+    <CriteriaSection>
+        <CriteriaCard icon="🏷️" title="Structure et rôles">
+            <ul>
+                <li>Le composant repose sur <code>VDataTableServer</code> et conserve la structure sémantique native d’un tableau HTML (<code>table</code>, <code>caption</code>, <code>thead</code>, <code>tbody</code>, <code>th</code>, <code>td</code>).</li>
+                <li>Une légende (<code>caption</code>) décrit le contenu du tableau et reste disponible aux technologies d’assistance même lorsqu’elle est visuellement masquée.</li>
+                <li>Les en-têtes de colonnes sont rendus dans des cellules <code>th</code> et exposent les informations de tri, de redimensionnement et de filtrage.</li>
+                <li>La zone de statut utilise <code>role="status"</code> et <code>aria-live="polite"</code> pour annoncer les changements du nombre de résultats.</li>
+                <li>Les cases à cocher de sélection utilisent des libellés explicites pour la sélection globale et individuelle.</li>
+                <li>La pagination, les filtres et l’organisation des colonnes conservent les rôles natifs des contrôles HTML.</li>
+            </ul>
+        </CriteriaCard>
+
+        <CriteriaCard icon="⌨️" title="Navigation clavier">
+            <ul>
+                <li>Les en-têtes triables sont activables au clavier via Entrée ou Espace.</li>
+                <li>Les filtres intégrés sont accessibles par Tabulation dans l’ordre naturel du tableau.</li>
+                <li>Les cases à cocher de sélection de ligne et de sélection globale sont entièrement utilisables au clavier.</li>
+                <li>Les lignes cliquables restent focalisables et déclenchables au clavier lorsqu’elles sont activées.</li>
+                <li>La pagination est navigable au clavier et permet de modifier la page et le nombre d’éléments par page.</li>
+                <li>Le bouton de réinitialisation des filtres est accessible par Tabulation et activable via Entrée ou Espace.</li>
+            </ul>
+        </CriteriaCard>
+
+        <CriteriaCard icon="📢" title="Annonces aux technologies d’assistance">
+            <ul>
+                <li>Le changement du nombre de résultats est annoncé automatiquement dans une région <code>aria-live</code>.</li>
+                <li>Les actions de sélection de lignes sont vocalisées grâce à des libellés explicites.</li>
+                <li>Le <code>caption</code> fournit un contexte global pour la lecture du tableau.</li>
+                <li>Les états de tri sont exposés par les attributs ARIA appliqués aux en-têtes.</li>
+            </ul>
+        </CriteriaCard>
+
+        <CriteriaCard icon="🎨" title="Contraste et lisibilité">
+            <ul>
+                <li>Les styles du design system assurent un contraste suffisant pour les textes, les bordures et les états de focus.</li>
+                <li>Les lignes alternées (<code>striped</code>) utilisent une variation de fond discrète sans compromettre la lisibilité.</li>
+                <li>Les colonnes figées conservent un fond opaque et des ombres pour maintenir la séparation visuelle.</li>
+                <li>Les états sélectionnés, triés ou filtrés restent perceptibles visuellement et programmatiquement.</li>
+            </ul>
+        </CriteriaCard>
+
+        <CriteriaCard icon="📌" title="Fonctionnalités avancées accessibles">
+            <ul>
+                <li>Le tri multi-colonnes et obligatoire conserve les attributs ARIA appropriés.</li>
+                <li>Les filtres par colonne utilisent des champs correctement libellés.</li>
+                <li>La sélection simple ou multiple annonce clairement l’état des cases à cocher.</li>
+                <li>Les colonnes épinglées restent accessibles sans altérer l’ordre de lecture du tableau.</li>
+                <li>L’organisation des colonnes conserve la structure et la cohérence des en-têtes.</li>
+                <li>L’état du tableau peut être mémorisé localement sans impact sur l’accessibilité.</li>
+            </ul>
+        </CriteriaCard>
+    </CriteriaSection>
+
+    <DemoSection componentName="SyServerTable">
+        <Story of={Stories.Default}/>
+    </DemoSection>
+
+    <BestPracticesSection>
+        <ul>
+            <li>Renseignez toujours la propriété <code>caption</code> pour décrire clairement l’objet du tableau.</li>
+            <li>Utilisez des intitulés de colonnes explicites, uniques et concis.</li>
+            <li>Activez <code>showFilters</code> uniquement lorsque chaque filtre dispose d’un libellé pertinent.</li>
+            <li>Assurez-vous que les lignes cliquables disposent d’une action compréhensible.</li>
+            <li>Testez la navigation clavier après activation du tri, des filtres, de la sélection et de la pagination.</li>
+            <li>Vérifiez que les annonces <code>aria-live</code> restent pertinentes lors des chargements serveur.</li>
+            <li>Conservez un contraste suffisant pour les colonnes figées et les états sélectionnés.</li>
+        </ul>
+    </BestPracticesSection>
+
+    <ResourcesSection>
+        <ul>
+            <li><a href="https://www.w3.org/WAI/tutorials/tables/" target="_blank" rel="noopener noreferrer">W3C WAI – Tables Tutorial</a></li>
+            <li><a href="https://www.w3.org/WAI/ARIA/apg/patterns/table/" target="_blank" rel="noopener noreferrer">WAI-ARIA Authoring Practices – Table Pattern</a></li>
+            <li><a href="https://www.w3.org/WAI/WCAG21/Understanding/status-messages.html" target="_blank" rel="noopener noreferrer">WCAG – Status Messages (4.1.3)</a></li>
+            <li><a href="https://www.numerique.gouv.fr/publications/rgaa-accessibilite/" target="_blank" rel="noopener noreferrer">RGAA – critères 5 (tableaux), 7 (ARIA), 10 (présentation)</a></li>
+        </ul>
+    </ResourcesSection>
+</AccessibilityGuideLayout>

package/src/components/Tables/SyServerTable/tests/SyServerTable.spec.ts

@@ -1194,6 +1194,73 @@ describe('SyServerTable', () => {
 	})
 })
 
+describe('SyServerTable hideDefaultFooter', () => {
+	const manyItems = Array.from({ length: 11 }, (_, i) => ({
+		id: i + 1,
+		name: `User ${i + 1}`,
+		age: 20 + i,
+	}))
+
+	it('shows pagination footer by default (hideDefaultFooter is false)', async () => {
+		const wrapper = mount(SyServerTable, {
+			props: {
+				options: { itemsPerPage: 5 } as DataOptions,
+				suffix: 'hide-footer-server-test',
+				serverItemsLength: 11,
+				hideDefaultFooter: false,
+			},
+			attrs: { items: manyItems, headers },
+		})
+
+		await wrapper.vm.$nextTick()
+		await vi.dynamicImportSettled()
+
+		const pagination = wrapper.findComponent({ name: 'SyTablePagination' })
+		expect(pagination.exists()).toBe(true)
+	})
+
+	it('hides pagination footer when hideDefaultFooter is true', async () => {
+		const wrapper = mount(SyServerTable, {
+			props: {
+				options: { itemsPerPage: 5 } as DataOptions,
+				suffix: 'hide-footer-server-test',
+				serverItemsLength: 11,
+				hideDefaultFooter: true,
+			},
+			attrs: { items: manyItems, headers },
+		})
+
+		await wrapper.vm.$nextTick()
+		await vi.dynamicImportSettled()
+
+		const pagination = wrapper.findComponent({ name: 'SyTablePagination' })
+		expect(pagination.exists()).toBe(false)
+	})
+
+	it('still shows OrganizeColumns when hideDefaultFooter is true and enableColumnControls is enabled', async () => {
+		const wrapper = mount(SyServerTable, {
+			props: {
+				options: { itemsPerPage: 5 } as DataOptions,
+				suffix: 'hide-footer-col-controls-server-test',
+				serverItemsLength: 11,
+				hideDefaultFooter: true,
+				enableColumnControls: true,
+			},
+			attrs: { items: manyItems, headers },
+			attachTo: document.body,
+		})
+
+		await wrapper.vm.$nextTick()
+		await vi.dynamicImportSettled()
+
+		const organizeColumns = wrapper.findComponent({ name: 'OrganizeColumns' })
+		expect(organizeColumns.exists()).toBe(true)
+
+		const pagination = wrapper.findComponent({ name: 'SyTablePagination' })
+		expect(pagination.exists()).toBe(false)
+	})
+})
+
 describe('SyServerTable pageInput', () => {
 	const manyItems = Array.from({ length: 11 }, (_, i) => ({
 		id: i + 1,

package/src/components/Tables/SyServerTable/tests/SyServerTable.visual.cy.ts

@@ -0,0 +1,58 @@
+import SyServerTable from '../SyServerTable.vue'
+
+const defaultHeaders = [
+	{ title: 'Nom', key: 'nom', sortable: true },
+	{ title: 'Prénom', key: 'prenom', sortable: true },
+	{ title: 'Ville', key: 'ville' },
+]
+
+const defaultItems = [
+	{ nom: 'Dupont', prenom: 'Jean', ville: 'Paris' },
+	{ nom: 'Martin', prenom: 'Marie', ville: 'Lyon' },
+]
+
+describe('SyServerTable - Visual regression tests', () => {
+	it('displays the server table by default', () => {
+		cy.mountWithVuetify(SyServerTable, {
+			props: {
+				headers: defaultHeaders,
+				items: defaultItems,
+				serverItemsLength: 50,
+				caption: 'Tableau serveur',
+			},
+		})
+
+		cy.get('.v-table').should('be.visible')
+		cy.matchImageSnapshot('sy-server-table-default', cy.get('.v-application'))
+	})
+
+	it('displays the server table in loading state', () => {
+		cy.mountWithVuetify(SyServerTable, {
+			props: {
+				headers: defaultHeaders,
+				items: undefined,
+				serverItemsLength: 0,
+				caption: 'Tableau chargement',
+				loading: true,
+			},
+		})
+
+		cy.get('.v-application').should('be.visible')
+		cy.matchImageSnapshot('sy-server-table-loading', cy.get('.v-application'))
+	})
+
+	it('displays the server table with selection', () => {
+		cy.mountWithVuetify(SyServerTable, {
+			props: {
+				headers: defaultHeaders,
+				items: defaultItems,
+				serverItemsLength: 2,
+				caption: 'Tableau avec sélection',
+				showSelect: true,
+			},
+		})
+
+		cy.get('.v-table').should('be.visible')
+		cy.matchImageSnapshot('sy-server-table-with-select', cy.get('.v-application'))
+	})
+})