Quand je supprime une PJ, je ne veux plus remonter en haut de page

[kara22]

#11948

Au Clic qur le bouton de suppression de la pièce justificative, ça provoque un scroll automatique vers le haut de la page.

Cause trouvée : après suppression, le focus est automatiquement donné aux boutons de retry et messages flash, causant un scroll du navigateur.

Solution : Interception des appels focus() pour ajouter preventScroll: true aux éléments d'attachement, sans impact sur l'accessibilité.

Résultat :

enregistrement-de-lecran-2025-08-06-a-173910_jn1eaTNn.mp4

[kara22]

@marleneklok

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 89.38%. Comparing base (72c7835) to head (1587b9c).
⚠️ Report is 8 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff             @@
##             main   #11958      +/-   ##
==========================================
- Coverage   89.60%   89.38%   -0.22%     
==========================================
  Files        1306     1306              
  Lines       28895    28893       -2     
  Branches     5982     5982              
==========================================
- Hits        25891    25827      -64     
- Misses       3004     3066      +62     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[inseo]

Sauf erreur de ma part, les personnes utilisant un lecteur d'écran n'ont aucun retour indiquant la suppression de la pièce jointe.
Du coup, je vois deux solutions. Soit :

1. Rajouter un message de succès local actant la suppression de la pièce jointe en remplacement du bandeau d'alerte. Ce message serait affiché au-dessus du bouton d'ajout d'une pièce jointe, à la place de la pièce jointe supprimée (ping @marleneklok) ;
2. Déplacer le focus sur le message nouvellement affiché.

Ou alors :

1. Spprimer le bandeau d'alerte présent en haut de page ;
2. Créer une zone live (masquée visuellement mais accessible aux lecteurs d'écran) vide au chargement de la page ;
3. Lors de la suppression de la pièce jointe, remplir cette zone live avec un message indiquant la bonne suppression de la pièce jointe (avec la précision du nom de la pièce jointe supprimée) ;
4. Déplacer le focus sur le bouton permettant d'ajouter d'une nouvelle pièce jointe.

Edit : Je viens de voir le ticket à l'origine de la modif et … il me semble que le renvoi du focus sur bandeau est nécessaire pour l'accessibilité. Car, sauf erreur de ma part, ce bandeau n'est pas une zone une live : elle n'est donc pas restituée aux lecteurs d'écran.

Je vais récupérer la branche pour m'en assurer. ;)

Mais si tel est bien le cas, une solution intermédiaire pourrait être l'ajout d'un lien ancre dans le bandeau d'alerte permettant de retourner au champ d'upload.
Sauf si vous décidez d’implémenter la solution 1, ce qui me semblerait être une bonne pratique même d'un point de vue ergo. :D

PS : Pour les déplacements de focus, je veux bien être pinguée pour vérifier si au niveau access' on est bon. ;)

[marleneklok]

Go pour la zone live masquée visuellement mais accessible aux lecteurs d'écran 👍

[inseo]

Voici deux liens sur le fonctionnement et la mise en place d'une zone live :

• Doc mdn
• Article a11y-collective

Si jamais ça n'est pas suffisant, tu sais où me trouver. :)

[inseo]

Je me permets de lier cette issue à la PR car c'est lié. ;)
Le message de succès tout comme les messages d'erreur doivent être injectés dynamiquement dans la zone live pour être restitués.

[tchak]

Je m'oppose à cette PR. Overrider les méthodes natives, c'est un non. Je veux bien faire un point avec @kara22 pour essayer de trouver une autre solution.

[tchak]

Il faut qu'on trouve une autre solution que d'override la méthode native

[inseo]

Le message de suppression est bien restitué par la synthèse vocale. 🎉
C'est top !

Par contre, j'ai identifié quelques petits soucis annexes :

1. Le focus est perdu ensuite : il se trouve sur un bouton qui est supprimé et il n'est pas déplacé sur un composant existant. Pour corriger le problème, je recommande de placer le focus sur le bouton d'ajout d'une pièce jointe.

2. Lorsqu'une pièce jointe est analysée (j'imagine ?), l'information "traitement en cours" n'est pas restituée.
   Tout comme pour la suppression de la pièce jointe, cette donnée devrait être vocalisée. 🫤

3. Pour des questions de logique de navigation, je recommanderai d'inverser le bouton de suppression de la pièce jointe et son intitulé dans le code source (et de rétablir l'ordre d'affichage en CSS - avec flexbox, par exemple).
   Ce faisant, une fois le focus déplacé sur le lien permettant d'afficher la pièce jointe, l'utilisateur a accès dans la foulée à la fonction de suppression et n'est pas obligé de remonter le flux pour la trouver.

[inseo]

PS : Est-il possible de profiter de la PR pour implémenter le composant de suppression de la PJ dans le composant Carte ?

[marleneklok]

@inseo Concernant ta remarque "Pour des questions de logique de navigation, je recommanderai d'inverser le bouton de suppression de la pièce jointe et son intitulé", tout à fait d'accord avec toi !
On a d'ailleurs revu l'emplacement de ces éléments pour l'évolution prévue du champ PJ (chargement possible via drag & drop sur DESKTOP + optimisation de l'affichage de la PJ une fois chargée) - voir ticket ETQ usager - optimisation du chargement d’une PJ dans le formulaire (possibilité de drag & drop) et de son affichage une fois chargée #11924 :