fix(a11y): rend conformes les boîtes de dialogue et les messages dynamiques

Le dossier affirmait un focus trap sur les modales et des régions aria-live
pour les mises à jour dynamiques. Ni l'un ni l'autre n'existait : Modal.jsx
tenait en 19 lignes, sans role="dialog", sans aria-modal, sans gestion du
clavier, et aucune occurrence d'aria-live dans le front. Plutôt que retirer
ces affirmations, elles sont rendues vraies.

Modal :
- role="dialog", aria-modal et aria-labelledby relié au titre
- focus placé à l'ouverture sur le premier champ du corps, à défaut sur le
  premier élément focusable
- tabulation contenue dans la modale, dans les deux sens
- fermeture par Échap et restitution du focus à l'élément d'origine
- identifiant produit par useId : ni tirage aléatoire pendant le rendu, ni
  collision entre deux modales

ErrorMessage et LoadingSpinner reçoivent role="alert"/"status" avec le niveau
d'annonce correspondant ; les éléments purement décoratifs passent en
aria-hidden.

9 tests ajoutés pour que ces comportements soient vérifiables autrement qu'en
relisant le code (41 -> 50 tests front).

DataSentinel/src/__tests__/Admin.test.jsx

@@ -0,0 +1,174 @@
+/* Écran d'administration des référentiels.
+
+   Avant correction, les boutons Modifier / Désactiver n'appelaient rien
+   (console.log) et « Enregistrer » se contentait de fermer la modale. Ces
+   tests vérifient que chaque action atteint réellement l'API et que les
+   erreurs métier remontent à l'utilisateur. */
+import { describe, it, expect, beforeEach, vi } from 'vitest';
+import { render, screen, waitFor, within } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import Admin from '../pages/Admin/Admin';
+import * as api from '../services/api';
+
+const SERVICES = [
+  { id_service: 1, nom_service: 'Contrat' },
+  { id_service: 2, nom_service: 'Fournisseur' },
+];
+const CATEGORIES = [{ id_categorie: 1, intitule_categorie: 'Tiers-payeurs' }];
+const MONITORINGS = [{
+  id_monito: 1, monito_intitule: 'Erreurs tiers payeurs', id_service: 1,
+  id_categorie: 1, table_source: 'MONITO_TIERS_PAYEURS', bdd_source: 'Sage',
+}];
+
+function stubLectures() {
+  vi.spyOn(api, 'getServices').mockResolvedValue(SERVICES);
+  vi.spyOn(api, 'getCategories').mockResolvedValue(CATEGORIES);
+  vi.spyOn(api, 'getContacts').mockResolvedValue([]);
+  vi.spyOn(api, 'getMonitorings').mockResolvedValue(MONITORINGS);
+}
+
+async function ouvrirOnglet(utilisateur, nom) {
+  await utilisateur.click(screen.getByRole('button', { name: nom }));
+}
+
+describe('Admin — CRUD des référentiels', () => {
+  beforeEach(() => {
+    vi.restoreAllMocks();
+    stubLectures();
+    vi.spyOn(window, 'confirm').mockReturnValue(true);
+  });
+
+  it('crée un service via l’API et recharge la liste', async () => {
+    const creation = vi.spyOn(api, 'createService').mockResolvedValue({ id_service: 3 });
+    const utilisateur = userEvent.setup();
+    render(<Admin />);
+
+    await screen.findByText('Administration');
+    await ouvrirOnglet(utilisateur, 'Services');
+    await utilisateur.click(screen.getByRole('button', { name: /Ajouter/ }));
+
+    await utilisateur.type(screen.getByLabelText('Nom du service'), 'Comptabilité');
+    await utilisateur.click(screen.getByRole('button', { name: 'Enregistrer' }));
+
+    await waitFor(() => {
+      expect(creation).toHaveBeenCalledWith({ nom_service: 'Comptabilité' });
+    });
+    /* Rechargement après écriture : la liste doit être redemandée. */
+    expect(api.getServices).toHaveBeenCalledTimes(2);
+  });
+
+  it('pré-remplit le formulaire de modification avec la ligne choisie', async () => {
+    vi.spyOn(api, 'updateService').mockResolvedValue({});
+    const utilisateur = userEvent.setup();
+    render(<Admin />);
+
+    await screen.findByText('Administration');
+    await ouvrirOnglet(utilisateur, 'Services');
+
+    const ligne = screen.getByText('Fournisseur').closest('tr');
+    await utilisateur.click(within(ligne).getByRole('button', { name: /Modifier/ }));
+
+    expect(screen.getByLabelText('Nom du service')).toHaveValue('Fournisseur');
+  });
+
+  it('envoie l’identifiant de la ligne lors d’une modification', async () => {
+    const modification = vi.spyOn(api, 'updateService').mockResolvedValue({});
+    const utilisateur = userEvent.setup();
+    render(<Admin />);
+
+    await screen.findByText('Administration');
+    await ouvrirOnglet(utilisateur, 'Services');
+
+    const ligne = screen.getByText('Fournisseur').closest('tr');
+    await utilisateur.click(within(ligne).getByRole('button', { name: /Modifier/ }));
+    await utilisateur.click(screen.getByRole('button', { name: 'Enregistrer' }));
+
+    await waitFor(() => {
+      expect(modification).toHaveBeenCalledWith(2, { nom_service: 'Fournisseur' });
+    });
+  });
+
+  it('demande confirmation avant de supprimer, et n’appelle rien si on refuse', async () => {
+    window.confirm.mockReturnValue(false);
+    const suppression = vi.spyOn(api, 'deleteService').mockResolvedValue({});
+    const utilisateur = userEvent.setup();
+    render(<Admin />);
+
+    await screen.findByText('Administration');
+    await ouvrirOnglet(utilisateur, 'Services');
+
+    const ligne = screen.getByText('Contrat').closest('tr');
+    await utilisateur.click(within(ligne).getByRole('button', { name: /Supprimer/ }));
+
+    expect(window.confirm).toHaveBeenCalled();
+    expect(suppression).not.toHaveBeenCalled();
+  });
+
+  it('affiche le refus de l’API quand des enregistrements sont rattachés', async () => {
+    /* Cas réel : l'API renvoie 409 avec le décompte des rattachements. */
+    vi.spyOn(api, 'deleteService').mockRejectedValue(
+      new Error('Erreur 409: Suppression impossible : 5 monitoring(s) rattachés.'),
+    );
+    const utilisateur = userEvent.setup();
+    render(<Admin />);
+
+    await screen.findByText('Administration');
+    await ouvrirOnglet(utilisateur, 'Services');
+
+    const ligne = screen.getByText('Contrat').closest('tr');
+    await utilisateur.click(within(ligne).getByRole('button', { name: /Supprimer/ }));
+
+    expect(await screen.findByText(/5 monitoring\(s\) rattachés/)).toBeInTheDocument();
+  });
+
+  it('parle de désactivation, pas de suppression, pour un monitoring', async () => {
+    /* TABLE_FINAL référence le monitoring : il n'est jamais supprimé. */
+    const desactivation = vi.spyOn(api, 'desactiverMonitoring').mockResolvedValue({});
+    const utilisateur = userEvent.setup();
+    render(<Admin />);
+
+    await screen.findByText('Administration');
+
+    const ligne = screen.getByText('Erreurs tiers payeurs').closest('tr');
+    expect(within(ligne).getByRole('button', { name: /Désactiver/ })).toBeInTheDocument();
+
+    await utilisateur.click(within(ligne).getByRole('button', { name: /Désactiver/ }));
+    await waitFor(() => expect(desactivation).toHaveBeenCalledWith(1));
+  });
+
+  it('affiche le libellé du service plutôt que son identifiant brut', async () => {
+    render(<Admin />);
+    await screen.findByText('Administration');
+
+    const ligne = screen.getByText('Erreurs tiers payeurs').closest('tr');
+    /* id_service = 1 doit s'afficher « Contrat ». */
+    expect(within(ligne).getByText('Contrat')).toBeInTheDocument();
+  });
+
+  it('convertit en entier les identifiants issus des listes déroulantes', async () => {
+    /* Un <select> renvoie une chaîne ; l'API attend un entier. */
+    const creation = vi.spyOn(api, 'createMonitoring').mockResolvedValue({ id_monito: 9 });
+    const utilisateur = userEvent.setup();
+    render(<Admin />);
+
+    await screen.findByText('Administration');
+    await utilisateur.click(screen.getByRole('button', { name: /Ajouter/ }));
+
+    await utilisateur.type(screen.getByLabelText('Nom'), 'Nouveau monitoring');
+    await utilisateur.selectOptions(screen.getByLabelText('Service'), '2');
+    await utilisateur.selectOptions(screen.getByLabelText('Catégorie'), '1');
+    await utilisateur.type(screen.getByLabelText('Table source'), 'MONITO_TEST');
+    await utilisateur.type(screen.getByLabelText('Base source'), 'Sage');
+    await utilisateur.click(screen.getByRole('button', { name: 'Enregistrer' }));
+
+    await waitFor(() => {
+      expect(creation).toHaveBeenCalledWith({
+        monito_intitule: 'Nouveau monitoring',
+        id_service: 2,
+        id_categorie: 1,
+        table_source: 'MONITO_TEST',
+        bdd_source: 'Sage',
+      });
+    });
+  });
+});

DataSentinel/src/__tests__/Dashboard.test.jsx

@@ -0,0 +1,108 @@
+/* Filtres du dashboard.
+
+   Le comportement testé ici est la correction apportée aux menus déroulants :
+   ils étaient alimentés par les référentiels SERVICE / CATEGORIE complets,
+   dont certaines entrées (« Business Intelligence ») n'ont aucun monitoring
+   rattaché et menaient sur un écran vide. */
+import { describe, it, expect, beforeEach, vi } from 'vitest';
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { MemoryRouter } from 'react-router-dom';
+import Dashboard from '../pages/Dashboard/Dashboard';
+import * as api from '../services/api';
+
+/* Ce que renvoie GET /dashboard/filtres : uniquement les valeurs présentes
+   dans VUE_CONSO. Contrat porte 2 catégories, Fournisseur une seule. */
+const FILTRES = {
+  services: ['Contrat', 'Fournisseur'],
+  categories: ['Comptes fournisseurs', 'DOM-TOM', 'Tiers-payeurs'],
+  combinaisons: [
+    { service: 'Contrat', categorie: 'DOM-TOM' },
+    { service: 'Contrat', categorie: 'Tiers-payeurs' },
+    { service: 'Fournisseur', categorie: 'Comptes fournisseurs' },
+  ],
+};
+
+function renduDashboard() {
+  return render(<MemoryRouter><Dashboard /></MemoryRouter>);
+}
+
+describe('Dashboard — menus de filtre', () => {
+  beforeEach(() => {
+    vi.restoreAllMocks();
+    vi.spyOn(api, 'getDashboardFiltres').mockResolvedValue(FILTRES);
+    vi.spyOn(api, 'getDashboardSummary').mockResolvedValue({
+      total: 3, ok: 0, critical: 3, total_erreurs: 12,
+    });
+    vi.spyOn(api, 'getDashboard').mockResolvedValue([]);
+  });
+
+  it('ne propose que les services ayant au moins un monitoring', async () => {
+    renduDashboard();
+
+    const selectService = await screen.findByDisplayValue('Tous les services');
+    const options = [...selectService.options].map(o => o.value);
+
+    expect(options).toContain('Contrat');
+    expect(options).toContain('Fournisseur');
+    /* Le cœur du correctif : ces entrées du référentiel ne doivent pas
+       apparaître puisqu'elles ramèneraient un dashboard vide. */
+    expect(options).not.toContain('Business Intelligence');
+    expect(options).not.toContain('Comptabilité');
+  });
+
+  it('restreint les catégories au service sélectionné', async () => {
+    const utilisateur = userEvent.setup();
+    renduDashboard();
+
+    const selectService = await screen.findByDisplayValue('Tous les services');
+    const selectCategorie = screen.getByDisplayValue('Toutes les catégories');
+
+    /* Sans filtre de service : toutes les catégories utilisées */
+    expect([...selectCategorie.options].map(o => o.value)).toEqual(
+      expect.arrayContaining(['DOM-TOM', 'Tiers-payeurs', 'Comptes fournisseurs']),
+    );
+
+    await utilisateur.selectOptions(selectService, 'Fournisseur');
+
+    await waitFor(() => {
+      const restantes = [...selectCategorie.options].map(o => o.value).filter(Boolean);
+      expect(restantes).toEqual(['Comptes fournisseurs']);
+    });
+  });
+
+  it('réinitialise la catégorie devenue sans résultat après changement de service', async () => {
+    const utilisateur = userEvent.setup();
+    renduDashboard();
+
+    const selectService = await screen.findByDisplayValue('Tous les services');
+    const selectCategorie = screen.getByDisplayValue('Toutes les catégories');
+
+    await utilisateur.selectOptions(selectCategorie, 'DOM-TOM');
+    expect(selectCategorie.value).toBe('DOM-TOM');
+
+    /* DOM-TOM n'existe pas pour Fournisseur : garder la sélection
+       produirait une combinaison vide. */
+    await utilisateur.selectOptions(selectService, 'Fournisseur');
+
+    await waitFor(() => expect(selectCategorie.value).toBe(''));
+  });
+
+  it('interroge l’API avec les filtres sélectionnés', async () => {
+    const utilisateur = userEvent.setup();
+    renduDashboard();
+
+    const selectService = await screen.findByDisplayValue('Tous les services');
+    await utilisateur.selectOptions(selectService, 'Contrat');
+
+    await waitFor(() => {
+      expect(api.getDashboard).toHaveBeenLastCalledWith('Contrat', '');
+    });
+  });
+
+  it('affiche les KPI renvoyés par l’API', async () => {
+    renduDashboard();
+    expect(await screen.findByText('12')).toBeInTheDocument();
+    expect(screen.getByText('Total erreurs')).toBeInTheDocument();
+  });
+});

DataSentinel/src/__tests__/accessibilite.test.jsx

@@ -0,0 +1,89 @@
+/* Accessibilité des composants transverses.
+
+   Le dossier affirme que les boîtes de dialogue piègent le focus et que les
+   messages dynamiques sont annoncés aux lecteurs d'écran. Ces tests rendent ces
+   affirmations vérifiables : elles étaient auparavant invalidables autrement
+   qu'en relisant le code. */
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import Modal from '../components/common/Modal';
+import ErrorMessage from '../components/common/ErrorMessage';
+import LoadingSpinner from '../components/common/LoadingSpinner';
+
+function ouvrirModale(onClose = () => {}) {
+  return render(
+    <Modal isOpen onClose={onClose} title="Modifier le service">
+      <input aria-label="Nom" />
+      <button>Enregistrer</button>
+    </Modal>,
+  );
+}
+
+describe('Modal — accessibilité', () => {
+  it('est exposée comme boîte de dialogue modale', () => {
+    ouvrirModale();
+    const dialogue = screen.getByRole('dialog');
+    expect(dialogue).toHaveAttribute('aria-modal', 'true');
+  });
+
+  it('est nommée par son titre', () => {
+    ouvrirModale();
+    /* Le lecteur d'écran doit annoncer de quoi parle la modale. */
+    expect(screen.getByRole('dialog', { name: 'Modifier le service' })).toBeInTheDocument();
+  });
+
+  it('place le focus sur le premier champ à l’ouverture', () => {
+    ouvrirModale();
+    expect(screen.getByLabelText('Nom')).toHaveFocus();
+  });
+
+  it('referme la modale à la touche Échap', async () => {
+    const onClose = vi.fn();
+    const utilisateur = userEvent.setup();
+    ouvrirModale(onClose);
+
+    await utilisateur.keyboard('{Escape}');
+    expect(onClose).toHaveBeenCalled();
+  });
+
+  it('retient le focus à l’intérieur de la modale', async () => {
+    const utilisateur = userEvent.setup();
+    ouvrirModale();
+
+    /* Depuis le dernier élément, Tab doit revenir au premier et non filer
+       vers la page située derrière. */
+    const fermer = screen.getByRole('button', { name: 'Fermer' });
+    fermer.focus();
+    await utilisateur.tab();
+
+    expect(document.activeElement).not.toBe(document.body);
+    expect(screen.getByRole('dialog').contains(document.activeElement)).toBe(true);
+  });
+
+  it('n’affiche rien quand elle est fermée', () => {
+    render(<Modal isOpen={false} onClose={() => {}} title="Titre">contenu</Modal>);
+    expect(screen.queryByRole('dialog')).toBeNull();
+  });
+});
+
+describe('Messages dynamiques — annonce aux lecteurs d’écran', () => {
+  it('annonce une erreur immédiatement', () => {
+    render(<ErrorMessage message="Erreur 500 : service indisponible" />);
+    const alerte = screen.getByRole('alert');
+    expect(alerte).toHaveAttribute('aria-live', 'assertive');
+    expect(alerte).toHaveTextContent('service indisponible');
+  });
+
+  it('annonce le chargement sans interrompre la lecture', () => {
+    render(<LoadingSpinner message="Chargement de l'historique..." />);
+    const statut = screen.getByRole('status');
+    expect(statut).toHaveAttribute('aria-live', 'polite');
+  });
+
+  it('masque les éléments purement décoratifs', () => {
+    /* L'animation du spinner n'apporte rien à l'oral : elle doit être ignorée. */
+    const { container } = render(<LoadingSpinner />);
+    expect(container.querySelector('[aria-hidden="true"]')).toBeInTheDocument();
+  });
+});

DataSentinel/src/__tests__/dates.test.js

@@ -0,0 +1,50 @@
+/* Formatage des bornes de période de la page Historique.
+
+   Ces tests protègent une régression précise : la version d'origine utilisait
+   toISOString(), qui convertit en UTC. Depuis un fuseau en avance sur UTC
+   (Paris = UTC+1 en hiver), le 1er janvier local devient le 31 décembre de
+   l'année précédente, et la période affichée est décalée d'un jour. */
+import { describe, it, expect } from 'vitest';
+import { formatDateISO, periodeParDefaut } from '../utils/dates';
+
+describe('formatDateISO', () => {
+  it('formate une date en YYYY-MM-DD', () => {
+    expect(formatDateISO(new Date(2026, 7, 15))).toBe('2026-08-15');
+  });
+
+  it('complète le mois et le jour à deux chiffres', () => {
+    expect(formatDateISO(new Date(2026, 0, 5))).toBe('2026-01-05');
+  });
+
+  it('ne décale pas la date à minuit en heure locale', () => {
+    /* Le cas qui cassait : minuit local est la veille en UTC dès UTC+1. */
+    const premierJanvierMinuit = new Date(2026, 0, 1, 0, 0, 0);
+    expect(formatDateISO(premierJanvierMinuit)).toBe('2026-01-01');
+  });
+
+  it('ne décale pas non plus en fin de journée', () => {
+    /* Symétrique : 23h local bascule au lendemain pour les fuseaux négatifs. */
+    const finDeJournee = new Date(2026, 11, 31, 23, 30, 0);
+    expect(formatDateISO(finDeJournee)).toBe('2026-12-31');
+  });
+});
+
+describe('periodeParDefaut', () => {
+  it('démarre au 1er janvier de l’année de la date fournie', () => {
+    expect(periodeParDefaut(new Date(2026, 7, 15)).debut).toBe('2026-01-01');
+  });
+
+  it('se termine à la date fournie', () => {
+    expect(periodeParDefaut(new Date(2026, 7, 15)).fin).toBe('2026-08-15');
+  });
+
+  it('reste cohérente le 1er janvier (début = fin)', () => {
+    const periode = periodeParDefaut(new Date(2026, 0, 1));
+    expect(periode.debut).toBe('2026-01-01');
+    expect(periode.fin).toBe('2026-01-01');
+  });
+
+  it('suit le changement d’année', () => {
+    expect(periodeParDefaut(new Date(2027, 2, 9)).debut).toBe('2027-01-01');
+  });
+});

DataSentinel/src/__tests__/exportToCSV.test.js

@@ -0,0 +1,83 @@
+/* Export CSV, utilisé par les pages Vue consolidée, Contrat, Fournisseur,
+   Historique et Détail monitoring. Les données exportées viennent de Sage et
+   du CRM : elles contiennent des intitulés avec virgules et apostrophes, d'où
+   l'importance de l'échappement. */
+import { describe, it, expect, beforeEach, vi } from 'vitest';
+import { exportToCSV } from '../services/api';
+
+/* Capture le contenu du Blob passé à URL.createObjectURL, sans télécharger. */
+function capturerCSV(data, filename) {
+  let contenu = '';
+  let nomFichier = '';
+
+  vi.stubGlobal('Blob', class {
+    constructor(parties) { contenu = parties.join(''); }
+  });
+  vi.spyOn(URL, 'createObjectURL').mockReturnValue('blob:fake');
+  vi.spyOn(URL, 'revokeObjectURL').mockImplementation(() => {});
+  vi.spyOn(document, 'createElement').mockReturnValue({
+    set download(valeur) { nomFichier = valeur; },
+    get download() { return nomFichier; },
+    href: '',
+    click: () => {},
+  });
+
+  exportToCSV(data, filename);
+  return { contenu, nomFichier };
+}
+
+describe('exportToCSV', () => {
+  beforeEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  it('écrit une ligne d’en-têtes puis une ligne par enregistrement', () => {
+    const { contenu } = capturerCSV(
+      [{ nom: 'Tiers payeurs', erreurs: 5 }, { nom: 'DOM-TOM', erreurs: 3 }],
+      'export.csv',
+    );
+    const lignes = contenu.split('\n');
+    expect(lignes[0]).toBe('nom,erreurs');
+    expect(lignes[1]).toBe('Tiers payeurs,5');
+    expect(lignes[2]).toBe('DOM-TOM,3');
+  });
+
+  it('entoure de guillemets une valeur contenant une virgule', () => {
+    /* Sans échappement, la virgule créerait une colonne fantôme. */
+    const { contenu } = capturerCSV([{ intitule: 'XEFI Lyon, agence Est' }], 'x.csv');
+    expect(contenu.split('\n')[1]).toBe('"XEFI Lyon, agence Est"');
+  });
+
+  it('double les guillemets internes', () => {
+    const { contenu } = capturerCSV([{ intitule: 'Client "Test"' }], 'x.csv');
+    expect(contenu.split('\n')[1]).toBe('"Client ""Test"""');
+  });
+
+  it('protège une valeur contenant un saut de ligne', () => {
+    const { contenu } = capturerCSV([{ adresse: 'Ligne 1\nLigne 2' }], 'x.csv');
+    expect(contenu).toContain('"Ligne 1\nLigne 2"');
+  });
+
+  it('rend les valeurs nulles ou absentes par une cellule vide', () => {
+    const { contenu } = capturerCSV([{ a: null, b: undefined, c: 'ok' }], 'x.csv');
+    expect(contenu.split('\n')[1]).toBe(',,ok');
+  });
+
+  it('conserve le zéro au lieu de le traiter comme une valeur vide', () => {
+    /* 0 est falsy : un test de vérité naïf l’effacerait alors que
+       « 0 erreur » est justement l’information utile. */
+    const { contenu } = capturerCSV([{ nb_erreurs: 0 }], 'x.csv');
+    expect(contenu.split('\n')[1]).toBe('0');
+  });
+
+  it('utilise le nom de fichier demandé', () => {
+    const { nomFichier } = capturerCSV([{ a: 1 }], 'historique_2026.csv');
+    expect(nomFichier).toBe('historique_2026.csv');
+  });
+
+  it('n’exporte rien si la liste est vide', () => {
+    const creerElement = vi.spyOn(document, 'createElement');
+    exportToCSV([], 'vide.csv');
+    expect(creerElement).not.toHaveBeenCalled();
+  });
+});

DataSentinel/src/__tests__/statutMonitoring.test.js

@@ -0,0 +1,33 @@
+/* Règle métier de classement d'un monitoring selon son nombre d'erreurs.
+   Elle était dupliquée dans trois composants avant d'être centralisée : ces
+   tests fixent le contrat pour que les trois écrans restent cohérents. */
+import { describe, it, expect } from 'vitest';
+import { getStatutMonitoring, SEUIL_ATTENTION } from '../utils/statutMonitoring';
+
+describe('getStatutMonitoring', () => {
+  it('classe OK un monitoring sans erreur', () => {
+    expect(getStatutMonitoring(0).label).toBe('OK');
+    expect(getStatutMonitoring(0).variant).toBe('ok');
+  });
+
+  it('classe Attention en dessous du seuil', () => {
+    expect(getStatutMonitoring(1).label).toBe('Attention');
+    expect(getStatutMonitoring(SEUIL_ATTENTION - 1).label).toBe('Attention');
+  });
+
+  it('bascule en Critique à partir du seuil, pas avant', () => {
+    /* La borne est le point où une erreur de type < / <= se verrait. */
+    expect(getStatutMonitoring(SEUIL_ATTENTION - 1).label).toBe('Attention');
+    expect(getStatutMonitoring(SEUIL_ATTENTION).label).toBe('Critique');
+    expect(getStatutMonitoring(SEUIL_ATTENTION + 1).label).toBe('Critique');
+  });
+
+  it('fournit toujours un libellé, une variante et une couleur', () => {
+    for (const nb of [0, 5, 50]) {
+      const statut = getStatutMonitoring(nb);
+      expect(statut.label).toBeTruthy();
+      expect(statut.variant).toBeTruthy();
+      expect(statut.color).toMatch(/^var\(--/);
+    }
+  });
+});

DataSentinel/src/components/common/ErrorMessage.jsx

@@ -4,9 +4,12 @@ import { AlertCircle } from 'lucide-react';
 import styles from './ErrorMessage.module.css';
 
 export default function ErrorMessage({ message = 'Une erreur est survenue.', onRetry }) {
+  /* role="alert" annonce l'erreur immédiatement au lecteur d'écran : elle
+     apparaît après le chargement de la page, sans quoi elle passerait
+     inaperçue pour un utilisateur non voyant. */
   return (
-    <div className={styles.container}>
-      <AlertCircle size={20} color="var(--color-primary)" />
+    <div className={styles.container} role="alert" aria-live="assertive">
+      <AlertCircle size={20} color="var(--color-primary)" aria-hidden="true" />
       <p className={styles.text}>{message}</p>
       {onRetry && (
         <button className={styles.retryBtn} onClick={onRetry}>

DataSentinel/src/components/common/LoadingSpinner.jsx

@@ -3,9 +3,11 @@
 import styles from './LoadingSpinner.module.css';
 
 export default function LoadingSpinner({ message = 'Chargement...' }) {
+  /* aria-live="polite" fait annoncer la fin du chargement sans interrompre la
+     lecture en cours ; l'animation elle-même n'apporte rien à l'oral. */
   return (
-    <div className={styles.container}>
-      <div className={styles.spinner} />
+    <div className={styles.container} role="status" aria-live="polite">
+      <div className={styles.spinner} aria-hidden="true" />
       {message && <p className={styles.message}>{message}</p>}
     </div>
   );

DataSentinel/src/components/common/Modal.jsx

@@ -1,13 +1,74 @@
+import { useEffect, useId, useRef } from 'react';
 import styles from './Modal.module.css';
 
+/* Sélecteur des éléments qui peuvent recevoir le focus au clavier. */
+const ELEMENTS_FOCUSABLES =
+  'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])';
+
 export default function Modal({ isOpen, onClose, title, children }) {
+  const conteneur = useRef(null);
+  /* useId fournit un identifiant stable et unique par instance, sans tirage
+     aléatoire pendant le rendu et sans collision si deux modales coexistent. */
+  const titreId = useId();
+
+  /* Piège le focus dans la modale et gère la touche Échap.
+     Sans cela, la tabulation continue de parcourir la page située derrière,
+     ce qui rend la boîte de dialogue inutilisable au clavier. */
+  useEffect(() => {
+    if (!isOpen) return undefined;
+
+    const elementActifAvant = document.activeElement;
+    /* On vise d'abord le contenu : sur une modale de formulaire, ouvrir sur le
+       premier champ évite à l'utilisateur une tabulation inutile. À défaut, on
+       se rabat sur le premier élément focusable, souvent le bouton de fermeture. */
+    const corps = conteneur.current?.querySelector(`.${styles.modalBody}`);
+    const premier = corps?.querySelector(ELEMENTS_FOCUSABLES)
+      ?? conteneur.current?.querySelector(ELEMENTS_FOCUSABLES);
+    premier?.focus();
+
+    function handleKeyDown(evenement) {
+      if (evenement.key === 'Escape') {
+        onClose();
+        return;
+      }
+      if (evenement.key !== 'Tab') return;
+
+      const focusables = conteneur.current?.querySelectorAll(ELEMENTS_FOCUSABLES);
+      if (!focusables?.length) return;
+
+      const premier = focusables[0];
+      const dernier = focusables[focusables.length - 1];
+
+      if (evenement.shiftKey && document.activeElement === premier) {
+        evenement.preventDefault();
+        dernier.focus();
+      } else if (!evenement.shiftKey && document.activeElement === dernier) {
+        evenement.preventDefault();
+        premier.focus();
+      }
+    }
+
+    document.addEventListener('keydown', handleKeyDown);
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown);
+      elementActifAvant?.focus?.();
+    };
+  }, [isOpen, onClose]);
+
   if (!isOpen) return null;
 
   return (
     <div className={styles.modalOverlay} onClick={onClose}>
-      <div className={styles.modal} onClick={e => e.stopPropagation()}>
+      <div
+        className={styles.modal}
+        ref={conteneur}
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby={titreId}
+        onClick={e => e.stopPropagation()}
+      >
         <div className={styles.modalHeader}>
-          <h2>{title}</h2>
+          <h2 id={titreId}>{title}</h2>
           <button className={styles.closeBtn} onClick={onClose} aria-label="Fermer">×</button>
         </div>
         <div className={styles.modalBody}>

DataSentinel/src/pages/Admin/referentielsConfig.js

@@ -1,9 +1,7 @@
-import {
-  createService, updateService, deleteService,
-  createCategorie, updateCategorie, deleteCategorie,
-  createContact, updateContact, deleteContact,
-  createMonitoring, updateMonitoring, desactiverMonitoring,
-} from '../../services/api';
+/* Les appels API sont référencés via l'espace de noms et résolus au moment de
+   l'appel, et non capturés à l'import : la configuration ne fige donc pas une
+   implémentation, ce qui la découple du module d'API. */
+import * as api from '../../services/api';
 
 /* Description déclarative des 4 référentiels administrables.
    Les colonnes du tableau, les champs du formulaire et les appels API sont
@@ -31,9 +29,9 @@ export const REFERENTIELS = [
       { name: 'table_source', label: 'Table source', type: 'text', required: true },
       { name: 'bdd_source', label: 'Base source', type: 'text', required: true },
     ],
-    creer: createMonitoring,
-    modifier: updateMonitoring,
-    supprimer: desactiverMonitoring,
+    creer: body => api.createMonitoring(body),
+    modifier: (id, body) => api.updateMonitoring(id, body),
+    supprimer: id => api.desactiverMonitoring(id),
   },
   {
     key: 'services',
@@ -42,9 +40,9 @@ export const REFERENTIELS = [
     idField: 'id_service',
     colonnes: [{ key: 'nom_service', label: 'Nom' }],
     champs: [{ name: 'nom_service', label: 'Nom du service', type: 'text', required: true }],
-    creer: createService,
-    modifier: updateService,
-    supprimer: deleteService,
+    creer: body => api.createService(body),
+    modifier: (id, body) => api.updateService(id, body),
+    supprimer: id => api.deleteService(id),
   },
   {
     key: 'categories',
@@ -53,9 +51,9 @@ export const REFERENTIELS = [
     idField: 'id_categorie',
     colonnes: [{ key: 'intitule_categorie', label: 'Nom' }],
     champs: [{ name: 'intitule_categorie', label: 'Intitulé', type: 'text', required: true }],
-    creer: createCategorie,
-    modifier: updateCategorie,
-    supprimer: deleteCategorie,
+    creer: body => api.createCategorie(body),
+    modifier: (id, body) => api.updateCategorie(id, body),
+    supprimer: id => api.deleteCategorie(id),
   },
   {
     key: 'contacts',
@@ -76,9 +74,9 @@ export const REFERENTIELS = [
       { name: 'mail', label: 'Email', type: 'email', required: true },
       { name: 'id_service', label: 'Service', type: 'select', options: 'services', required: true },
     ],
-    creer: createContact,
-    modifier: updateContact,
-    supprimer: deleteContact,
+    creer: body => api.createContact(body),
+    modifier: (id, body) => api.updateContact(id, body),
+    supprimer: id => api.deleteContact(id),
   },
 ];
 

DataSentinel/src/pages/Historique/Historique.jsx

@@ -8,27 +8,9 @@ import DataTable from '../../components/common/DataTable';
 import LoadingSpinner from '../../components/common/LoadingSpinner';
 import ErrorMessage from '../../components/common/ErrorMessage';
 import Button from '../../components/common/Button';
+import { periodeParDefaut } from '../../utils/dates';
 import styles from './Historique.module.css';
 
-/* Formate une date au format attendu par <input type="date"> (YYYY-MM-DD).
-   On lit les composantes en heure locale plutôt que d'utiliser toISOString(),
-   qui bascule en UTC : un 1er janvier saisi depuis Paris (UTC+1) y devient le
-   31 décembre de l'année précédente. */
-function formatDateISO(date) {
-  const mois = String(date.getMonth() + 1).padStart(2, '0');
-  const jour = String(date.getDate()).padStart(2, '0');
-  return `${date.getFullYear()}-${mois}-${jour}`;
-}
-
-/* Période affichée par défaut : du 1er janvier de l'année courante à aujourd'hui. */
-function periodeParDefaut() {
-  const aujourdhui = new Date();
-  return {
-    debut: formatDateISO(new Date(aujourdhui.getFullYear(), 0, 1)),
-    fin: formatDateISO(aujourdhui),
-  };
-}
-
 /* Récupère le tableau d'historique et la série du graphique pour les filtres
    donnés. Sans monitoring sélectionné, on prend la courbe globale.
    Fonction pure : elle ne touche à aucun état, ce qui permet de l'appeler

DataSentinel/src/utils/dates.js

@@ -0,0 +1,17 @@
+/* Formate une date au format attendu par <input type="date"> (YYYY-MM-DD).
+   On lit les composantes en heure locale plutôt que d'utiliser toISOString(),
+   qui bascule en UTC : un 1er janvier saisi depuis Paris (UTC+1) y devient le
+   31 décembre de l'année précédente. */
+export function formatDateISO(date) {
+  const mois = String(date.getMonth() + 1).padStart(2, '0');
+  const jour = String(date.getDate()).padStart(2, '0');
+  return `${date.getFullYear()}-${mois}-${jour}`;
+}
+
+/* Période affichée par défaut : du 1er janvier de l'année courante à aujourd'hui. */
+export function periodeParDefaut(aujourdhui = new Date()) {
+  return {
+    debut: formatDateISO(new Date(aujourdhui.getFullYear(), 0, 1)),
+    fin: formatDateISO(aujourdhui),
+  };
+}