Audit UI/UX — 9 octobre 2026

Grille : Audit UI/UX. Procédure : skill audit-ux. Précédent : audit du 8 octobre. Les bloquants sont corrigés dans la même PR que ce rapport (#92) ; les améliorations A1 à A4 aussi, à la demande de l'utilisateur ; le reste est proposé dans la roadmap, à prioriser ensemble.

Ce qui a été passé

Plateforme	Couverture
App web	25 écrans × clair/sombre × mobile (Pixel 7) et desktop (1280 px), en français, anglais et néerlandais ; tous à 320 px ; en plus : recherche globale, tiroir « Plus » et cinq états vides (Courses, Menus, Dépenses, Notes, Dates) ; axe (WCAG 2.2 AA) en clair et en sombre sur 17 pages (Notes et Dates ajoutées)
Site vitrine	/, /en/, /nl/ à 360, 768 et 1440 px, clair et sombre ; en-tête à 768, 1024, 1280 et 1440 px ; débordement horizontal mesuré
Android	toutes les captures Roborazzi (dont police à 200 %, tiroir, états vides clair/sombre, recherche, notes, dates, dépenses) ; lint (32 alertes, inchangé)
Transverse	clavier (ordre du focus, piège et retour du focus) sur le tiroir et la recherche ; noms accessibles (arbre d'accessibilité) ; clés de traduction (web : 0 écart entre fr, en, nl ; Android : 0 hors app_name et report_faq_url, non traduisibles) ; tokens de couleur inchangés depuis le 8 octobre (contrastes déjà vérifiés)

Outils ajoutés pour les audits suivants : la recherche, le tiroir et les écrans vides dans e2e/visual-review.spec.ts ; Notes et Dates dans e2e/a11y.spec.ts ; capture Android search.png.

Constats

Gravité : B bloquant (empêche la fusion), A à améliorer, OK. Effort : S (< 1 h), M (une demi-journée), L (plusieurs jours).

Bloquants — corrigés dans #92

#	Plateforme	Écran	Constat	Correction	Effort
B1	Site vitrine	En-tête, 768 à 1279 px	Libellés sur deux ou trois lignes (« How it works », « Sign in », « Se connecter »), bouton « Commencer » coupé, logo collé au menu (site/en-768-light.png, site/head-fr-1024.png)	Menu complet à partir de 1280 px, menu repliable en dessous ; libellés sans retour à la ligne (site/head3-fr-1280.png)	S
B2	App web	Tâches	Le filtre et le nouveau bouton de recherche globale avaient le même nom accessible « Rechercher » : ambigu au lecteur d'écran (et E2E en échec)	Le filtre devient « Filtrer les tâches » (fr, en, nl)	S
B3	App web	Recherche globale	À la fermeture (Échap), le focus n'était pas rendu au bouton qui l'avait ouverte : Radix ne rend le focus qu'à un Dialog.Trigger	DialogContent mémorise l'élément actif à l'ouverture et y revient (toutes les boîtes ouvertes par un état en profitent) ; vérifié par e2e/search.spec.ts	S

À améliorer

#	Plateforme	Écran	Constat	Correction proposée	Effort
A1	App web	Menus, semaine vide	Bouton « Tout est déjà dans les courses » affiché grisé alors qu'il n'y a aucun repas (mobile-light-meals-empty.png)	Fait dans #92 : bouton masqué tant que la semaine est vide	S
A2	Android	Dates importantes	Pas d'icône par type (anniversaire, entretien…), alors que le site en affiche une (dates.png contre mobile-light-dates.png)	Fait dans #92 : icônes au trait par type (Lucide), liste et bloc « Dates à venir » (dates.png)	S
A3	Android	Recherche → Dépenses	Un résultat de dépense ouvre le mois en cours, pas le mois de la dépense (le site, lui, ouvre le bon mois)	Fait dans #92 : le mois est passé à l'écran Dépenses (SearchScreenTest, ExpensesScreenTest)	S
A4	App web	Recherche ouverte avec « / »	Ouverte sans élément focalisé, elle rend le focus au document à la fermeture : acceptable, mais le prochain Tab repart du début de la page	Fait dans #92 : le focus revient au bouton « Rechercher » visible (e2e/search.spec.ts)	S
A5	Site vitrine	Accueil	Les titres s'animent à l'arrivée : une capture trop rapide les montre flous. Pas un défaut visible à l'usage ; prefers-reduced-motion est respecté (audit du 8 octobre)	Rien à faire ; attendre 1,5 s dans les captures du site	—

OK

• Tiroir « Plus » (site et Android) : tuiles lisibles en clair, sombre et néerlandais ; au clavier, focus piégé dans le tiroir puis rendu au bouton « Plus » ; noms accessibles corrects (mobile-light-drawer.png, nav-drawer.png).
• États vides illustrés : même dessin sur le site et Android, contraste suffisant du trait (accent) en clair et en sombre, une phrase et une action (*-empty.png, empty-states*.png).
• Recherche globale : résultats groupés, extrait des notes, rien de l'autre en personnel, phrase claire sans résultat (mobile-light-search.png, search.png).
• 320 px : aucun débordement horizontal, barre du bas avec icônes seules (w320-*).
• Police à 200 % (Android) : les lignes passent à la ligne, rien de coupé (today-font-200.png).
• Langues : néerlandais sans texte coupé ; clés identiques dans les trois langues.

Non vérifié : TalkBack sur un vrai téléphone, le geste « tirer la barre » sur un appareil réel (prévu : tests sur émulateur, dernier point du lot 5).