billisdead/la-voix-du-peuple
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add dark mode and accessibility features for improved user experience

Browse Source 
Integrate a dark mode, an accessibility panel with options for dyslexia, high contrast, and text scaling, and enhance keyboard navigation. Update documentation to reflect these changes.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 923ae0e3-a363-4db8-b04a-e8baca2a1330
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Event-Id: bbd001b6-1b5f-4425-9310-55a9081dabf8
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/8af7d2ec-2cc3-4ece-8af3-9f071488d072/923ae0e3-a363-4db8-b04a-e8baca2a1330/vOeFCU4
Replit-Helium-Checkpoint-Created: true
This commit is contained in:
pironantoine
2026-04-04 11:45:46 +00:00
parent 176b49d796
commit 78eb58844e
8 changed files with 365 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/DEX.md
+28 -4
View File
@@ -1,6 +1,6 @@
# Document d'Exploitation — La Voix du Peuple
**Version** : 1.2
**Version** : 1.3
**Date** : Avril 2026
---
@@ -12,6 +12,7 @@
| 1.0 | Avril 2026 | Version initiale |
| 1.1 | Avril 2026 | Ajout section flyer QR, export PDF, partage horodaté |
| 1.2 | Avril 2026 | Palette pétrol neutre, textes de posture sur l'expression vs. vérité |
| 1.3 | Avril 2026 | Dark mode pétrol, panneau d'accessibilité (dyslexie, contraste, zoom) |
---
@@ -292,7 +293,30 @@ Après une purge, la synthèse se régénère automatiquement à la prochaine co
---
## 12. Modifier les textes de posture
## 12. Accessibilité — fonctionnement et personnalisation
Le panneau d'accessibilité est accessible via l'icône dans la barre de navigation (à gauche du drapeau). Quatre options sont disponibles :
| Option | Effet | Classe CSS sur `<html>` | Clé `localStorage` |
|--------|-------|------------------------|---------------------|
| Mode sombre | Fond sombre, pétrol clair | `.dark` | `a11y-dark` |
| Police dyslexie | Arial/Verdana, espacement élargi, interligne 2 | `.dyslexia` | `a11y-dyslexia` |
| Contraste élevé | Fond blanc/noir pur, contrastes WCAG AA+ | `.high-contrast` | `a11y-contrast` |
| Texte agrandi | +20 % sur tous les textes | `.large-text` | `a11y-large` |
Les préférences sont stockées dans le navigateur (localStorage) et relues automatiquement à chaque visite.
**Pour désactiver une option par code** (au déploiement, si souhaité), supprimer le `ToggleRow` correspondant dans `src/components/accessibility-panel.tsx`.
**Fichiers impliqués** :
- `src/hooks/use-accessibility.tsx` — contexte React, état, persistance
- `src/components/accessibility-panel.tsx` — interface utilisateur
- `src/index.css` — section `/* ─── Accessibilité */` — toutes les classes CSS
- `src/App.tsx` — `<AccessibilityProvider>`, skip-link, `id="main-content"`
---
## 13. Modifier les textes de posture
Les phrases de positionnement éditorial ("expression citoyenne, pas vérité établie", "auteur attaché à l'expertise") sont définies directement dans le code des composants React. Pour les modifier :
@@ -307,7 +331,7 @@ Après modification, reconstruire le frontend si en production (`pnpm build`), o
---
## 13. Modifier la palette de couleurs
## 14. Modifier la palette de couleurs
La couleur principale est définie dans `artifacts/voix-du-peuple/src/index.css`, ligne `--primary`. La valeur actuelle est `185 42% 28%` (pétrol foncé, politiquement neutre).
@@ -325,7 +349,7 @@ Toutes les occurrences de `--primary` dans le fichier CSS s'appliquent automatiq
---
## 14. Contacts et ressources
## 15. Contacts et ressources
- Documentation Mistral : https://docs.mistral.ai
- PostgreSQL : https://www.postgresql.org/docs/