fix: accessibility (#162) and long texts breaking the layout (#159) #179

Merged

asventi merged 4 commits from fix/a11y-and-long-texts into develop

2026-10-30 17:36:41 +00:00

asventi commented

2026-10-30 17:34:22 +00:00

Owner

Corrige les tickets d'accessibilité et de textes longs.

#162 Accessibilité

Contrôles sans nom accessible

Cases de la matrice des permissions (/admin/roles) : nom « {permission} pour {rôle} ».
Flèches mois précédent / suivant du calendrier, champs de recherche (nommés par leur placeholder).
Images : alt sur les avatars (pseudo), l'aperçu d'image d'un fichier (nom), alt="" sur le logo de la sidebar et l'image décorative de connexion / inscription.
Icônes cliquables seulement à la souris transformées en boutons nommés : renommer / supprimer un rôle, modifier un événement, et les crayons du panneau « Account Info » (pseudo, mot de passe, langue), qui n'étaient pas accessibles au clavier.

Focus dans les modales

Le focus reste dans la modale (Tab / Maj+Tab), seulement pour la modale du dessus, sans gêner les listes ou bottom sheets ouvertes par-dessus.
Focus initial sur le premier champ de formulaire, sinon sur le bouton Fermer (plus sur une div).
À la fermeture, le focus revient sur le bouton qui a ouvert la modale.
Le panneau « Account Info » (engrenage) est un role=dialog avec le même piège de focus et se ferme avec Échap. Un Échap dans une modale ouverte depuis le panneau ne ferme que la modale.

#159 Textes longs

/admin/users : pseudo tronqué (titre au survol), colonnes Rôle et Actions visibles.
/knowledge : noms de fichiers et de dossiers tronqués, colonnes Taille et Actions visibles.
DM : auteur du message tronqué (l'heure reste visible), placeholder du composeur tronqué avec « … ».
Surnoms : l'aperçu du dernier message (sidebar, « Recent conversations ») et l'aperçu de réponse utilisent le surnom, comme le titre et les messages.

Vérifications

Testé dans les devcontainers avec un admin :

Audit des noms accessibles : plus aucun contrôle sans nom sur l'accueil, /admin/roles, /calendar, /knowledge et /messages.
Modales Invite, « + Event » et panneau Account Info : 50 Tab / Maj+Tab sans sortir.
Données de test : user avec un pseudo de 255 caractères, fichier de 255 caractères, surnom de 255 caractères dans un DM. Vérifiées en 1024 px et 375 px, puis supprimées.
Lint et tsc OK.

Limite connue : à la fermeture de la modale « + Event », le bouton « Event » est recréé (il est dans un Promisable), le focus revient donc sur la page et non sur ce bouton.

Closes #162
Closes #159

Corrige les tickets d'accessibilité et de textes longs. ## #162 Accessibilité **Contrôles sans nom accessible** - Cases de la matrice des permissions (`/admin/roles`) : nom « {permission} pour {rôle} ». - Flèches mois précédent / suivant du calendrier, champs de recherche (nommés par leur placeholder). - Images : `alt` sur les avatars (pseudo), l'aperçu d'image d'un fichier (nom), `alt=""` sur le logo de la sidebar et l'image décorative de connexion / inscription. - Icônes cliquables seulement à la souris transformées en boutons nommés : renommer / supprimer un rôle, modifier un événement, et les crayons du panneau « Account Info » (pseudo, mot de passe, langue), qui n'étaient pas accessibles au clavier. **Focus dans les modales** - Le focus reste dans la modale (Tab / Maj+Tab), seulement pour la modale du dessus, sans gêner les listes ou bottom sheets ouvertes par-dessus. - Focus initial sur le premier champ de formulaire, sinon sur le bouton Fermer (plus sur une `div`). - À la fermeture, le focus revient sur le bouton qui a ouvert la modale. - Le panneau « Account Info » (engrenage) est un `role=dialog` avec le même piège de focus et se ferme avec Échap. Un Échap dans une modale ouverte depuis le panneau ne ferme que la modale. ## #159 Textes longs - `/admin/users` : pseudo tronqué (titre au survol), colonnes Rôle et Actions visibles. - `/knowledge` : noms de fichiers et de dossiers tronqués, colonnes Taille et Actions visibles. - DM : auteur du message tronqué (l'heure reste visible), placeholder du composeur tronqué avec « … ». - Surnoms : l'aperçu du dernier message (sidebar, « Recent conversations ») et l'aperçu de réponse utilisent le surnom, comme le titre et les messages. ## Vérifications Testé dans les devcontainers avec un admin : - Audit des noms accessibles : plus aucun contrôle sans nom sur l'accueil, `/admin/roles`, `/calendar`, `/knowledge` et `/messages`. - Modales Invite, « + Event » et panneau Account Info : 50 Tab / Maj+Tab sans sortir. - Données de test : user avec un pseudo de 255 caractères, fichier de 255 caractères, surnom de 255 caractères dans un DM. Vérifiées en 1024 px et 375 px, puis supprimées. - Lint et `tsc` OK. Limite connue : à la fermeture de la modale « + Event », le bouton « Event » est recréé (il est dans un `Promisable`), le focus revient donc sur la page et non sur ce bouton. Closes #162 Closes #159

asventi added 4 commits

2026-10-30 17:34:22 +00:00

fix(a11y): name unlabeled controls and images, make icon actions keyboard reachable b8c889b777

fix(a11y): trap and restore focus in modals and the account panel a6e4d08a10

fix(ui): truncate long usernames, file names and message authors 2248136931

fix(friends): show nicknames in conversation previews and replies

VPS Deploy / build-and-push (pull_request) Successful in 17s

Details

VPS Deploy / deploy (pull_request) Successful in 26s

Details

a83b197983