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/DAT.md
+16 -1
View File
@@ -1,6 +1,6 @@
# Document d'Architecture Technique — La Voix du Peuple
**Version** : 1.2
**Version** : 1.3
**Date** : Avril 2026
**Statut** : En production (Replit), prêt pour auto-hébergement
@@ -13,6 +13,7 @@
| 1.0 | Avril 2026 | Version initiale |
| 1.1 | Avril 2026 | Ajout page Flyer QR, boutons Partager / PDF, `qrcode.react` |
| 1.2 | Avril 2026 | Palette pétrol neutre, textes de posture (expression vs. vérité) |
| 1.3 | Avril 2026 | Dark mode pétrol, panneau d'accessibilité (dyslexie, contraste, zoom) |
---
@@ -87,6 +88,20 @@
| `/transparence` | Fonctionnement de l'IA, données collectées, limites, posture éditoriale |
| `/flyer` | Flyer imprimable avec QR code configurable pour diffusion physique |
**Accessibilité** :
| Fonctionnalité | Mécanisme |
|----------------|-----------|
| Dark mode | Classes CSS `.dark` sur `<html>`, variables pétrol clair (`hsl(185 55% 58%)`) |
| Police dyslexie | Classe `.dyslexia` : Arial/Verdana, `letter-spacing 0.06em`, `line-height 2` |
| Contraste élevé | Classe `.high-contrast` : fond blanc/noir pur, ratio WCAG AA+ |
| Texte agrandi | Classe `.large-text` : `font-size 120%` global |
| Navigation clavier | `skip-link` "Aller au contenu principal" + anneau `:focus-visible` 3 px |
| ARIA | `aria-pressed` sur les toggles, `aria-label` sur tous les boutons d'action |
| Persistance | Préférences stockées dans `localStorage`, relues au chargement |
| Panneau | Composant `AccessibilityPanel` — icône dans la barre de navigation |
| Fournisseur d'état | `AccessibilityProvider` + `useAccessibility` hook (React Context) |
**Textes de posture** (infusés dans plusieurs sections) :
- Bandeau d'intro : "espace d'expression citoyenne, pas un sondage ni une vérité établie"
- Pied de synthèse : note italique discrète rappelant l'ancrage dans l'expertise de l'auteur
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/
docs/WIKI.md
+1 -1
View File
@@ -5,7 +5,7 @@
**Hébergement** : Replit (dev) / Auto-hébergeable (RockyLinux, Debian)
**Dépôt** : `voix-du-peuple` (Gitea)
**Statut** : Actif — avril 2026
**Version doc** : 1.2
**Version doc** : 1.3
---