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